Jak zrychlit načítání obrázků na webu
Pět změn, které sníží datovou váhu obrázků na jakémkoli webu, seřazených podle dopadu.
Na většině webů tvoří obrázky převážnou část toho, co si návštěvník stahuje. Jediná neoptimalizovaná fotka z telefonu může vážit víc než celý zbytek stránky dohromady. Úprava obrázků bývá největším a nejlevnějším zrychlením, jaké je k dispozici, a rychlejší stránky se lépe umisťují ve vyhledávání, udrží návštěvníky déle a víc prodávají.
1. Nahrávejte obrázky v té velikosti, v jaké se zobrazují
Fotka přímo z telefonu má na šířku 4000 pixelů i víc. Sloupec s obsahem na webu bývá jen zřídka širší než 1200 pixelů a karta nebo náhled jsou mnohem menší. Každý pixel navíc se stáhne a prohlížeč ho pak zahodí. Velikost změňte před nahráním: zhruba 2000 pixelů na šířku pro bannery přes celou šířku (aby zůstaly ostré na obrazovkách s vysokou hustotou), 1200 až 1600 pro obrázky v obsahu a 600 až 800 pro karty. Nástroj pro změnu velikosti zvládne celou složku najednou.
2. Komprimujte
Při správných rozměrech udělá zbytek komprese. Fotka uložená v kvalitě 80 vypadá na webové stránce úplně stejně jako fotka v kvalitě 100 a často má třetinovou velikost. Kompresor obrázků zpracovává celé dávky a u každého souboru ukáže úsporu.
3. Používejte WebP
WebP podporuje každý aktuální prohlížeč a při stejné viditelné kvalitě bývá o 25 až 35 procent menší než JPG, navíc s podporou průhlednosti, díky které nahradí i mnoho souborů PNG. Převádějte pomocí JPG na WebP nebo PNG na WebP. AVIF je ještě menší, ale kóduje se pomaleji a systémy pro nahrávání ho nepodporují tak univerzálně, takže praktickou výchozí volbou je WebP.
4. Zvolte správný formát pro daný obsah
| Obsah | Nejlepší formát |
|---|---|
| Fotky | WebP, nebo JPG tam, kde WebP nepřijímají |
| Loga a ikony | SVG, pokud ho máte, jinak PNG nebo WebP |
| Snímky obrazovky s textem | PNG nebo bezeztrátový WebP |
| Jednoduché animace | Krátké video místo GIF |
5. Pomozte prohlížeči načítat je rozumně
- Líné načítání. Obrázky pod první obrazovkou by se měly načíst až ve chvíli, kdy se k nim návštěvník doroluje. Většina platforem to dělá automaticky; v čistém HTML přidejte loading="lazy" ke značkám img, které nejsou hned vidět.
- Rozměry. Každému obrázku zadejte šířku a výšku, aby stránka při načítání obrázků neposkakovala. Posun rozvržení je jednou z metrik Core Web Vitals od Googlu.
- Hlavní obrázek jako první. Velký obrázek v horní části stránky, obvykle ten, který se počítá jako Largest Contentful Paint, by se nikdy neměl načítat líně. Měl by se načíst co nejdřív.
Jaký je to rozdíl
Typická stránka s deseti fotkami přímo z telefonu může vážit 30 MB. Po zmenšení na rozumné šířky a kompresi má stejná stránka obvykle kolem 2 MB. Po převodu na WebP spíš kolem 1,4 MB. Na mobilním připojení je to rozdíl mezi stránkou, která se objeví za sekundu, a stránkou, kterou mnoho návštěvníků opustí.
Kontrola výsledků
Nástroj PageSpeed Insights od Googlu i panel Lighthouse v nástrojích pro vývojáře v Chromu vypíšou příliš velké obrázky, obrázky, které by měly být ve WebP, i prvek Largest Contentful Paint. Spusťte je před úpravou i po ní a začněte stránkami s největší návštěvností.