Jediný neoptimalizovaný hero obrázek může vážit více než veškeré HTML, CSS a JavaScript webové stránky dohromady. Obrázky tvoří přibližně 50 % celkových bajtů průměrné webové stránky, což z nich dělá největší páku pro zlepšení výkonu. Přesto zůstává optimalizace obrázků jedním z nejméně pochopených aspektů vývoje webu a tvorby obsahu.
Dopad sahá daleko za rychlost načítání. Velikost obrázků ovlivňuje vaše pozice ve vyhledávání, účet za hosting, datové tarify uživatelů a dokonce i míru konverze.
Spojení s výkonem: Core Web Vitals a LCP
Core Web Vitals od Google jsou sada metrik přímo ovlivňujících pozice ve vyhledávání. Mezi nimi Largest Contentful Paint (LCP) měří, jak dlouho trvá vykreslení největšího viditelného prvku na obrazovce. Ve většině případů je tímto prvkem obrázek.
Google považuje LCP pod 2,5 sekundy za „dobrý". Mezi 2,5 a 4 sekundami je „potřeba zlepšení". Nad 4 sekundy je „špatný". Hero obrázek o 3 MB na standardním připojení může snadno překročit 4sekundový práh a stáhnout celou stránku do kategorie „špatný".
Důsledky jsou hmatatelné:
- Pokles SEO pozic — Core Web Vitals jsou ranking signál; pomalé stránky ztrácejí pozice
- Vyšší míra odchodu — 53 % mobilních návštěvníků odejde, pokud se stránka načítá déle než 3 sekundy
- Nižší konverze — každá další sekunda načítání snižuje konverze přibližně o 7 %
Pravidlo 100 KB Pro obsahové obrázky na webové stránce mířte pod 100 KB na obrázek. Pro hero obrázky přes celou šířku zůstaňte pod 200 KB. Těchto cílů lze dosáhnout s moderními formáty a správnou kompresí bez viditelné ztráty kvality.
Ztrátová vs. bezztrátová: pochopení kompromisu
Veškerá komprese obrázků spadá do dvou kategorií a volba špatné je častou příčinou nafouknutých souborů.
Bezztrátová komprese zmenšuje velikost souboru nalezením efektivnějších způsobů kódování stejných dat. Každý pixel je zachován přesně. Úspora je skromná — obvykle 10–30 %. PNG používá bezztrátovou kompresi.
Ztrátová komprese zahazuje informace, kterých si lidské oko pravděpodobně nevšimne. Přesnost barev v gradientech, jemné texturní detaily a subtilní tonální variace jsou zjednodušeny. Úspora je dramatická — obvykle 70–90 %. JPEG a WebP (ve ztrátovém režimu) používají tento přístup.
Klíčové zjištění: ztrátová komprese na kvalitě 80–85 % je vizuálně nerozlišitelná od originálu pro fotografie. Perceptuální rozdíl je v podstatě nulový, ale rozdíl ve velikosti souboru je obrovský.
| Přístup | Úspora velikosti | Ztráta kvality | Nejlepší pro |
|---|---|---|---|
| Bezztrátová (PNG) | 10–30 % | Žádná | Loga, snímky obrazovky, grafiky s textem |
| Ztrátová 85 % (JPEG/WebP) | 70–85 % | Nepostřehnutelná | Fotografie, ilustrace, pozadí |
| Ztrátová 60 % (JPEG/WebP) | 85–95 % | Postřehnutelná při bližším pohledu | Náhledy, dekorativní obrázky |
Chyba, které se mnoho lidí dopouští, je používání bezztrátové komprese pro fotografický obsah nebo ztrátové komprese s příliš nízkou kvalitou pro důležité vizuály.
Formát záleží: stejný obrázek, diametrálně odlišné velikosti
Volba formátu obrázku má stejný dopad jako úroveň komprese. Fotografie uložená jako PNG může být 5 až 10× větší než stejný obrázek uložený jako JPEG na kvalitě 85 %, bez postřehnutelného rozdílu.
JPEG zůstává univerzálním standardem pro fotografie. Je podporován všude a nabízí vynikající ztrátovou kompresi.
WebP nabízí o 25–35 % menší soubory než JPEG při ekvivalentní vizuální kvalitě, s přidanou výhodou podpory průhlednosti. Všechny moderní prohlížeče ho podporují.
AVIF je nejnovější uchazeč, nabízející ještě lepší kompresi než WebP (přibližně o 20 % menší), ale podpora prohlížečů a rychlost kódování stále dohánějí.
PNG je správnou volbou pouze pro obrázky vyžadující přesnou reprodukci pixelů — loga, ikony, snímky obrazovky s textem.
Šířka pásma a úložiště: skryté náklady
Pro osobní blogy a malé weby se náklady na šířku pásma mohou zdát zanedbatelné. Ale rychle se škálují:
- Stránka s 2 MB obrázků, zobrazená 10 000× měsíčně, přenáší 20 GB obrazových dat měsíčně
- Optimalizujte obrázky na 400 KB celkem a přenesete 4 GB — úspora 80 %
Úložiště se také sčítá. E-shop s 5 000 produkty, každý se 4 neoptimalizovanými obrázky po 2 MB, zabírá 40 GB jen fotografiemi produktů. Optimalizované na 200 KB každý to klesne na 4 GB.
Responzivní obrázky a problém zařízení
Obrázek o šířce 1920 pixelů zobrazený na displeji telefonu o šířce 375 pixelů plýtvá více než 96 % svých pixelů. Prohlížeč stáhne celý obrázek a pak většinu dat zahodí.
Řešením jsou responzivní obrázky — servírování různých velikostí obrázků různým zařízením.
Líné načítání: nestahujte, co není vidět
Obrázky pod ohybem stránky — neviditelné bez scrollování — se nemusí načítat okamžitě. Líné načítání odloží jejich stahování, dokud uživatel k nim nepřescrolluje. Moderní prohlížeče podporují nativní líné načítání jediným HTML atributem.
CDN: servírování obrázků z okraje
Content Delivery Network ukládá kopie vašich obrázků na servery rozmístěné po celém světě. Návštěvník v Tokiu dostane obrázky z blízkého serveru místo vašeho původního serveru v Paříži.
Mnoho moderních CDN také nabízí transformaci obrázků za běhu — automatický převod do WebP, změnu velikosti pro různá zařízení a aplikaci optimální komprese.
Další informace
Optimalizace obrázků je téma, kde se malá zlepšení násobí ve významné výsledky. Pokud chcete experimentovat s úrovněmi komprese, toolk.io nabízí Kompresor obrázků, který zpracovává vše ve vašem prohlížeči. Na stránkách jsou dostupné také tutoriály pro kompresi obrázků a převod mezi formáty.