JPG alebo PNG obrázky. Ktoré z hľadiska optimalizácie?

Pôvodne sme vírili túto tému len ako nezáväznú diskusiu na pive. No v skutočnosti je to výborná (a dôležitá) téma aj pre marketérov, grafikov a tých, čo sa venujú optimalizácii webov. Používať obrázky na webe v tom či onom formáte?

Po prečítaní titulku si možno poviete, že otázka je zle postavená, že nejde o to v akom formáte je obrázok na webe, ale v akej forme – no nepredbiehajme ešte.

Na čo sa hodí PNG

Tento mladý formát využívame (ako všetci dobre vedia) všade tam kde potrebujeme alfa kanál, čiže transparentnosť, priehľadnosť. Logá, ikony, ale pokojne aj vyrezané objekty z fotografií. A teraz pozor, formát PNG je bezstratový, to znamená, že pri kompresii na obrázku nevznikajú rôzne nepríjemné artefakty, neostrosti a ľudovo povedané fľaky. Aj preto sa hodí na spomínané logá a ikony – kvôli jemnej kresbe. Formát je výborný aj na všetky vektorové ilustrácie, ktoré sú v posledných rokoch také populárne v marketingu. Jednoducho, kde je málo farieb, kde sú jemné linky, kontrastné obrysy a podobne. Skúste uložiť obrázok s textovým nápisom do PNG a do JPG formátu. V JPG je už voľným okom vidno nejaká neostrosť. Krásne to vidieť aj na retina obrazovkách (s vyššou hustotou pixelov), ostatne, autor článku iste nie je jediný, kto má už na telefóne vyššie rozlíšenie ako na desktop monitore.

Na čo sa hodí JPG

No a potom tu máme formát JPG, ktorý je podľa dostupných dát asi najpoužívanejší na svete. Je to niečo ako MP3 vo svete hudby, akurát v grafike. Je to stratový formát, pri kompresii prídete o nejaké dáta a z výsledku sa už nedá vyrobiť pôvodný obrázok. Kľúčová je jeho veľkosť. Z 50 MB veľkého BMP obrázku urobíte 100 kilobajtový obrázok a stále je pekný. JPG obrázok môžete z klasického rastru vyrábať na mnohých úrovniach – napríklad ovplyvňovať kvalitu po percentách. JPG formát sa skvele hodí na fotografie a maľby, všade tam kde sú prechody medzi farbami postupné. Tam, kde vôbec nevidno ako sa pri kompresii zlievajú pixely s rovnakou farbou (pri extrémne nízkej kvalite to, samozrejme, vidno a také obrázky sú až nepríjemne škaredé).

Príliš veľké = príliš pomalé

PNG sa oproti JPG už nehodí do slideru na webstránku, ktorý má povedzme 900 alebo 1600 bodov na šírku. Výsledný súbor by už bol príliš veľký. Aj v roku 2017 stále myslíme na veľkosť súborov, hoci to už nie je také horúce ako keď všade kraľovali GIF obrázky (dnes už legendárne škaredé weby s ešte škaredšími animáciami – staré dobré časy). GIF-y ešte dnes sem-tam vídať ako webové elementy, ale je to už anachronizmus.

A vlastne až teraz sme prišli k jadru debaty, k optimalizácii. Pre vyhľadávače a iné technológie totiž nie je dôležité aký bol použitý formát. Rozprávame sa iba o dvoch základných, pričom ich existujú stovky (veľmi sexy formát je vektorový SVG, ale o ňom možno nabudúce). Dôležitá je najmä veľkosť. Čím menší obrázok, tým lepšie. Na druhú stranu, sme vo veku, keď máme na weboch obrovské obrázky, pozadia, animácie… A tie musíme stlačiť tak, aby vyzerali k svetu a aby bol náš web rýchly.

Rýchlosť webu je totiž kľúčový prvok v optimalizácii. Ideálny web má menej ako 1 megabajt pre každú jednotlivú podstránku vrátane hlavnej. Na rýchlosť vás upozorňujú všetky SEO testery. Rýchlosť načítania webu pod jednu sekundu ocenia všetky vyhľadávače, naopak pomalé weby sú tlačené vo výsledkoch vyhľadávania nadol. Neberte si príklad zo slovenskej súťaže Blogger roka, kde vyhrala módna blogerka, ktorá na web uploadovala 5 megabajtové obrázky… jej blog možno zaujal hlúpu porotu, no určite nezaujal vyhľadávače.

Takže si v stručnosti zopakujme, čo je z pohľadu optimalizácie pre vyhľadávače (SEO) dôležité pri vyrábaní a vkladaní obrázkov na web:

1. Používajte tagy určené na popis! Čiže ALT a TITLE. Ideálne s rôznym textom.
2. Popisky musia byť stručné a čo najvýstižnejšie, v správnej gramatike.
3. V popiskoch sa vyhnite black hat technikám typu, že sem nasekáte veľa nesúvisiacich kľúčových slov a dúfate, že budete dobre viditeľní pri rôznych hľadaniach v Google Images. Nebudete.
4. Voľte správny rozmer obrázku. Možno máte redakčný systém, ktorý automaticky mení veľkosť obrázku, no nemusíte ho nahrávať vo väčšej veľkosti ako sa zobrazuje v skutočnosti. Naopak, menší obrázok bude po roztiahnutí na webe veľmi nepekný a amatérsky.
5. Pohrajte sa s veľkosťou súboru. Skúšajte viac úrovní kompresií, aby ste našli čo najmenší súbor pri zachovaní estetickej krásy obrázku. Najmä pri tých najväčších a najviditeľnejších obrázkoch (na internete je na to veľa free toolov).
6. Používajte správny formát v správnej situácii – viď. text hore. Čiže PNG na texty, logá, ikony, ilustrácie… a JPG na slidery, fotky atď.
7. Postrážte si thumbnaily. Sú nesmierne užitočné pri vytváraní zoznamov produktov, každý zákazník si potrebuje predsa kategórie najskôr očami preskenovať. Robte ich čo najmenšie, produkt musí byť umiestnený pekne v strede a ALT tag by mal byť iný ako pri zväčšenej verzii obrázku.
8. Vyvarujte sa nezmyselnej dekoratívnosti. Veľké backgroundy, gýčové tapety, zbytočné serepetičky – načo je to dobré? Grafický dizajn je o jednoduchosti a účelnosti, nehovoriac o tom, že všelijaké pomocné pásiky a hlúposti nemajú pre vyhľadávač žiadnu cenu.
9. Veľa testujte. Napríklad koľko thumbnailov a položiek na stránku je optimálne, ako rýchlo sa web načíta a tak ďalej.