Nainstalovali jste si pro váš web plugin na optimalizaci obrázků a teď nejspíš čekáte, že problémy s obrázky jsou vyřešeny jednou provždy. Částečně máte pravdu. Ale jen částečně. Optimalizátor obrázků je mocný nástroj s jasnými hranicemi a kdo tyto hranice nezná, zjistí jeho limity až ve chvíli, kdy se web stále načítá pomalu navzdory zdánlivě správnému nastavení.
Co optimalizátor obrázků skutečně dělá?
Optimalizátor obrázků automatizuje technické zpracování souborů, které by jinak vyžadovalo ruční práci s každým obrázkem zvlášť. To je jeho hlavní přínos – nahrazuje opakující se manuální úkony spolehlivým automatickým procesem.
- Komprese je první a nejviditelnější věc, kterou optimalizátor řeší. Nahraje se obrázek o velikosti čtyři megabajty a optimalizátor ho zkomprimuje na dvě stě kilobajtů bez viditelné ztráty kvality. Děje se to na pozadí, bez jakéhokoliv zásahu. Pro web provozovaný více lidmi je to výhoda, protože nevyžaduje, aby každý člen týmu znal správné nastavení exportu.
- Převod formátů je druhou oblastí, kde optimalizátor ušetří čas a prostor. Moderní optimalizátory převedou nahraný JPEG nebo PNG automaticky do AVIF nebo WebP, formátu s výrazně lepší kompresí při stejné vizuální kvalitě. Prohlížeč pak dostane nejmenší soubor, který zvládne zobrazit, a starší prohlížeče automaticky dostanou záložní formát. Tohle nastavit ručně pro každý obrázek by bylo časově neúnosné.
- Generování responzivních variant je třetí výhodou. Moderní weby potřebují obrázek v několika rozměrech: velký pro desktop, střední pro tablet, malý pro mobil. Optimalizátor tyto varianty vygeneruje automaticky z jednoho nahraného souboru a správnou velikost pak servíruje podle zařízení uživatele. Výsledkem je, že majitel mobilu nestahuje obrázek o šířce 2000 pixelů, ale jen variantu 400 pixelů, která se mu skutečně zobrazí.
- Odstraňování metadat je poslední věcí, o které se v tomto kontextu mluví méně, ale která má reálný dopad. Každý obrázek z fotoaparátu nebo telefonu obsahuje skryté informace: GPS souřadnice, výrobce přístroje, datum a čas pořízení, nastavení clony. Tyto data uživatel nikdy neuvidí, ale zabírají místo. Optimalizátor je z každého souboru automaticky odstraní.
Kde optimalizátor naráží na své hranice?
Optimalizátor pracuje s tím, co dostane. Pokud mu nahrajete špatný obrázek, dostanete optimalizovaný, ale špatný obrázek. Technické zpracování souboru nenahrazuje rozhodnutí, která musíte udělat vy sami ještě před nahráním.
- Rozměry obrázku jsou první věcí, na kterou optimalizátor zpravidla nesáhne, nebo ji řeší jen omezeně. Nahrajete fotografii v rozlišení 5000 × 3000 pixelů a optimalizátor ji zkomprimuje. Soubor bude menší, ale stále zbytečně velký, protože nikdo vám neřekl, že na webu se obrázek zobrazí na šířce 800 pixelů. Ořez a změnu rozměrů na cílové zobrazovací rozměry musíte provést vy, ideálně ještě před nahráním.
- Výběr správného formátu pro konkrétní typ obsahu je druhá oblast, kde lidský úsudek nelze zcela nahradit automatem. Optimalizátor převede vše do WebP, ale nepozastaví se nad tím, že logo s průhledností by možná lépe sloužilo jako SVG. Nebo že animovaný GIF by bylo výhodné nahradit videem MP4, které bude desetkrát menší. Tohle jsou rozhodnutí, která vyžadují pochopení kontextu, a žádný plugin ho nemá.
- Kvalita vstupního obrázku je třetí faktor zcela mimo dosah optimalizátoru. Rozmazaná fotografie, obrázek s viditelným šumem nebo produkt nafocený za špatného světla zůstane po optimalizaci stejně nekvalitní. Optimalizátor pracuje s technickými parametry souboru, ne s vizuální kvalitou obsahu.
- Alt texty a pojmenování souborů jsou pak oblastí, kde optimalizátor nepomůže vůbec. Soubor pojmenovaný IMG_4872.jpg zůstane pojmenován IMG_4872.jpg. Alt text k obrázku nevyplní žádný algoritmus za vás smysluplným způsobem. Obojí má přímý dopad na SEO a přístupnost webu a vyžaduje vaši pozornost při každém nahrávaném obrázku.
Jak optimalizátor zapojit do skutečného pracovního procesu?
Nejlepší výsledky nepřinese optimalizátor, který jednou nastavíte a necháte být. Přinese ho jasně definovaný proces, ve kterém optimalizátor zastává svou část a vy tu svou.
Před nahráním obrázku se ujistěte, že soubor má správné rozměry pro místo, kde se zobrazí. Produktový obrázek na e-shopu zobrazený na šířce 1200 pixelů by měl mít právě tuto šířku, ne čtyři tisíce pixelů jen pro jistotu. Fotografie do banneru přes celou šířku stránky na desktopu potřebuje zase jinou přípravu než obrázek v postranním sloupci.
Pojmenujte soubor pokud možno popisně ještě před nahráním. Jednou uložený soubor pod smysluplným názvem ušetří čas a pomůže SEO. Název cervene-sportovni-tenisky-nike.jpg je pro vyhledávač nesrovnatelně cennější než DSC00124.jpg. Optimalizátor název souboru nezmění, takže tohle je výhradně vaše úloha.
Vyplňte alt text bezprostředně po nahrání. Prázdný alt text je chyba, kterou optimalizátor neodhalí ani neopraví. Přitom alt texty hrají roli jak v SEO, tak v přístupnosti webu pro uživatele se zrakovým postižením, kteří stránky procházejí pomocí čteček obrazovky.
Jak vybrat správný optimalizátor pro váš web?
Pro WordPress existuje několik osvědčených pluginů. ShortPixel, Imagify a Smush jsou nejrozšířenější a každý nabídne trochu jiný přístup ke kompresi i jiné cenové modely. ShortPixel účtuje podle počtu zpracovaných obrázků, Imagify podle měsíčního objemu dat a Smush nabídne základní funkce zdarma s placeným rozšířením.
Při výběru sledujte dvě věci. Za prvé, zda plugin podporuje formát WebP nebo AVIF a jak s ním pracuje. Za druhé, zda nabídne zpětné zpracování existujících obrázků, tedy těch, které jsou na webu nahrané před instalací pluginu. Web provozovaný tři roky bez optimalizace má zpravidla stovky nebo tisíce nekomprimovaných souborů a zpětné zpracování je pro takový web stejně důležité jako automatizace pro budoucí nahrávání.
Pro weby mimo WordPress existují cloudová řešení jako Cloudinary nebo ImageKit. Tyhle platformy jdou dále než pluginy. Obrázky uloží, optimalizují a rovnou doručí přes globální CDN síť, takže návštěvník z Brna i z Londýna dostane soubor ze serveru, který je mu geograficky nejblíže. Pro weby s mezinárodním publikem nebo s vysokým objemem obrázků se to může vyplatit.
Optimalizátor nebude myslet za vás
Optimalizátor obrázků dělá svou práci spolehlivě a bez únavy. Komprimuje, převádí formáty, generuje varianty pro různá zařízení. Nerozhodne ale za vás, zda obrázek vůbec na stránce má být, zda je dostatečně kvalitní, zda má správné rozměry a zda mu věnujete správný alt text. Tyhle věci jsou na vás a žádná automatizace to nezmění. Pokud si to včas uvědomíte, dostane výsledek, který samostatně ani optimalizátor, ani individuální práce nepřinese.
