Na čo sa zamerať a ako správne pracovať s obrázkami v prostredí WordPress? Tu je niekoľko odporúčaní z pohľadu uživateľskej skúsenosti, SEO ale aj rýchlosti vašej stránky či jej správy.
1. Obsah a zdroj
Samotný obrázok je vždy o vizuálnej informácii. Vždy pokiaľ je to možné a stojí to za to, odporúčam vytvoriť si vlastné obrázky/fotky. Fotky vašich ľudí, produktov, priestorov, ale aj napríklad zákazníkov pri používaní produktu a podobne. Priorita by vždy mala byť relevantnosť, no netreba zabúdať na očakávanú kvalitu. Ak sa profilujete na webe ako poskytovateľ prémiovej služby, nekvalitné a lacné fotky vám tento image môžu kedykoľvek narušiť.
Vyhol by som sa opozeraným obrázkom z fotobanky, i keď aj tu sa nájdu skvelé kúsky – musia byť ale kompatibilné s vašim štýlom a identitou. Pokiaľ sú vlastné fotky problém, existuje mnoho free zdrojov. Môžete ich použiť v podobe akej sú alebo ako základ pre ďalšie úpravy.
2. Správne pomenovanie a popisky
Zmysluplné pomenovanie pomáha v dvoch oblastiach: správa webu aj SEO. Názov rucne-sita-zavinovacka-nahlad.jpg hovorí o obsahu obrázku ďaleko viac ako IMG1234.jpg. Pri vyhľadávaní obrázkov v knižnici médií WordPress vám správny názov pomôže nájsť požadovaný obrázok. Z hľadiska uloženia obrázkov na serveri, odporúčam tieto tri pravidlá:
- triediť obrázky do zložiek podľa dátumu nahrania – Nastavenia WordPress > Multimédia > a povoliť voľbu Triediť súbory podľa mesiaca
- názvy obrázkov písať bez diakritiky
- miesto medzier používať znak “-“, no WordPress by si mal s tým poradiť aj sám
ALT popisy sú pri obrázkoch pravdepodobne to najviac, čo z hľadiska onpage SEO môžete pre vašu webovú stránku spraviť. Odporúčam ich zadávať ihneď pri nahrávaní obrázku do knižnice, no upraviť sa dajú kedykoľvek.
3. Veľkosť obrázkov
Veľké obrázky spomaľujú vašu webovú stránku a zaberajú zbytočne veľa miesta na serveri. Na veľkosť súborov vplývajú najmä:
- rozlíšenie obrázka
- formát súboru
- kvalita
Ak váš WooCommerce e-shop zobrazuje náhľady produktu vo veľkosti 600×600 px, nahrajte tam obrázok o takejto veľkosti. (prípadne 2x rozlíšenie, viď nižšie). Fotka s rozlíšením 4000×4000 px je zbytočne veľká, dlhšie sa sťahuje (najmä na mobiloch) a zaberá niekoľko-násobne viac miesta na serveri. S pluginom Imsanity môžete zabrániť nahrávaniu takto veľkých obrázkov, resp. nastaviť ich automatické zmenšenie na požadované rozlíšenie.
Správny formát hrá významnú úlohu tiež. By default, WordPress nevie pracovať s SVG formátom vektorovej grafiky, takže berme do úvahy iba JPG a PNG.
- Na fotky a obrázky zobrazujúce reálny svet je vhodný formát JPG
- Na ilustrácie a rôzne ikony (napr. logá) je vhodný formát PNG. PNG vie navyše obsahovať prehliadnosť.
Ale taký Facebook má radšej PNG, ktorý vám nepreženie ich silnou kompresiou pri zdieľaní odkazu na váš web. S dobrým SEO pluginom viete nastaviť aj toto.
4. Správne rozlíšenie
Aktuálne verzie WordPress si vedia poradiť s rôznymi veľkosťami obrazoviek a obrazovkam s menším rozlíšením servírovať automaticky nižšie rozlíšenia obrázkov – pomocou automaticky vytvorených zmenšenín pri nahrávaní. Čo ale s Retina displejmi Apple zariadení či inými ultraHD obrazovkami? Tam je problém presne opačný a je potrebné servírovať dvojnásobné rozlíšenie, inak sa obrázky na vašom webe javia ako nekvalitné.
Na mojich weboch používam už dlhšie plugin WP Retina 2x, ktorý umožňuje nahrať tzv. 2x verzie vybraným obrázkov. Pre príklad, na našom WooCommerce e-shope používam náhľady produktov v rozlíšení 600×600 px, takže naše 2x verzie majú rozmer 1200×1200 px. Plugin zabezpečí zobrazenie aj načítanie správnej verzie podľa aktuálneho rozlíšenia obrazovky.
5. Kompresia
Dôvodom na kompresiu je najmä zníženie veľkosti a tým zrýchlenie načítavania webu. Väčšinu času sa budeme baviť o strátovej kompresii, ktorej výsledkom je aj mierne zníženie vizuálnej kvalitu obrázku. Kľúčom k úspechu je násť ten správny pomer kvality a veľkosti.
Väčšina grafických programov (Photoshop, Sketch,…) má pri exporte možnosť typu Save for web (Uložiť pre web), no využiť môžete aj externé nástroje/služby. Mnou obľúbený https://tinypng.com ponúka aj plugin do WordPress. Ďalšie vhodné pluginy sú napríklad EWWW Image Optimizer či Smush It.
6. Uloženie obrázkov mimo webový server
Pre veľké projekty môže byť zaujímavé načítavať ukladať a načítavať statický obsah mimo webového servera. Využívať sa dá tzv CDN sieť, ktorá zabezpečí načítavanie obsahu z viacerých geografických lokalít, no využijú to naozaj iba tie najväčšie/globálne projekty.
Ako niečo také funguje si viete vyskúšať aj pomocou WordPress pluginu JetPack, ktorý v sebe obsahuje možnosť načítavať obrázky z WordPress.com siete Photon.
