Obrázky jsou velice důležitou a nepostradatelnou součástí každých webových stránek. Mnoho majitelů webových prezentací ale neví, jaké formáty a velikosti jsou pro jejich www stránky nejlepší a zbytečně tak zatěžují a zpomalují chod vlastní prezentace. Přitom správným zvolením formátu obrázku lze výrazně snížit velikost objemu dat a zároveň nepřijít o kvalitu obrázku.
Obrázky JPG (JPEG)? Nejlepší volba pro váš web.
Obrázky s koncovkou .jpg jsou nejideálnějším a nejčastějším formátem, který pro obsah webu doporučuji používat, zejména pokud se jedná o digitální zpracování fotografií. Jejich hlavní výhodou je malá velikost – JPEG díky ztrátové komprese dokáže výrazně snížit datový objem, aniž by došlo k poškození kvality obrazu. Tento formát obrázků neumožňuje průhlednost (tzv. alfa kanál), pro tento případ je vhodné využít obrázky ve formátu .png.
Tento obrázek je ve formátu .jpg a jeho rozměry jsou 500x289px. Velikost obrázku je 13,7 kB.
Obrázky PNG(JPEG)? Ideální pro průhledné (alfa) pozadí
Obrázky s koncovkou .png se využívají zejména tam, kde potřebujete využít průhledné pozadí. Nejčastěji se využívá v šabllonách při tvorbě webových stránek, ve standardním obsahu příspěvků či stránek mi přijdou tyto obrázky zbytečné, zvláště pokud průhledné pozadí není pro obsah stránky či příspěvku podstatným prvkem. PNG obrázky totiž využívají bezdrátovou kompresy a byl vyvinut jako náhrada za starší formát .gif. Obrázky ve formátu .png mají podstatně větší datový objem a zbytečně tak zatěžují server. Jsou dobré zobrazení obrázků s velkými a jasnými plochami či ostrými liniemi (např. ikony či vektorové obrázky).
Tento obrázek je ve formátu .png a využívá průhledného pozadí. Jeho rozměry jsou 500x289px, stejné tedy jako u obrázku .jpg. Jeho velikost je ale 165 kB, několikanásobně tedy vyšší než u konkurenta s formátem .jpg.
Pravidla pro používání obrázků, aby na webu vypadaly dobře
Pro zachování hezkého vzhledu na webu je ideální používat obrázky o stejných rozměrech uvedených v pixelech (px). Rozlišení by mělo být 72 obrazových bodů na palec, vyšší rozlišení je pro internetovou prezentaci zbytečné. Pro chod webové prezentace vám bohatě postačí obrázky o rozměru 800×600 px, za předpokladu, že se jedná o obrázky vkládané např. do textů. V tomto případě by maximální vělikost obrázku neměla přesáhnout 1200×800 px.
Pokud vkládáte obrázky, které budou přes celou šíři monitoru (např. vkládané do záhlaví či jako pozadí webu), pak postačí obrázky s min. šíří 1920 px – max. 2000 px. Výška obrázku záleží opět na použití, zde je nutné výšku použít dle zaměření šablony. Může to být jen krátký pruh o šíři 400 px, ale také velký obrázek na pozadí, kde pak je výška např. 1200 px.
Pokud nahrajete obrázky větší, WordPress si sice poradí s jejich zmenšením, ale původní velikost zůstává na serveru a zbytečně jej zpomaluje. Navíc při zobrazení v lightboxu (náhled, který se zobrazí při kliknutí na obrázek myší) by se nemusel náhled některým uživatelům zobrazit celé, nehledě na pomalé načítání, které zákazníky spíše odradí.
Pro úpravu či zmenšní obrázků je možné použít některé nástroje. Asi tím nejoblíbenějším je Photoshop, který je však placený a pro uživatele, kteří pravidelně s grafikou nepracují zbytečně drahý. Navíc velké množství fotografií v něm rychle nezmenšíte. Pro rychlé zmenšení fotek doproučji použít free program JPEG Resampler 2010, který se mi skvělě osvědčil a dobře se mi v něm pracuje. Pro úpravu menšího množství fotografií můžete také využít Microsoft Office Picture, který je standardně nabízen v balíčku Microsoft Office. I zde můžete poměrně jednoduše upravovat obrázky.
