Zeptejte se kteréhokoli webového vývojáře, co zpomaluje většinu webů, a odpověď je téměř vždy stejná. Obrázky. Optimalizace obrázků pro web je proces zmenšování velikosti souborů obrázků bez ztráty vizuální kvality, takže se stránky načítají rychleji a nevypadají hůř. Jedna nekomprimovaná fotografie může mít několik megabajtů. Stejný obrázek ve správném formátu a zkomprimovaný může mít méně než 100 kilobajtů bez viditelného rozdílu na obrazovce. Tento článek popisuje, jaké formáty souborů použít, jak funguje komprese, kdy před nahráním změnit velikost, jak do toho zapadá lazy loading a co dělá největší praktický rozdíl v rychlosti načítání stránky.
Obrázky jsou na většině webů největším jednotlivým přispěvatelem k velikosti stránky. Stránka s pěti neoptimalizovanými fotkami může vážit desetkrát víc, než je nutné. Tato váha se přímo promítá do pomalejšího načítání, horšího skóre Largest Contentful Paint a návštěvníků, kteří odejdou dřív, než se stránka dokončí vykreslit. Proč rychlost načítání ovlivňuje vaši firmu a pozice ve vyhledávání, vysvětluje článek o tom, proč záleží na rychlosti webu.
Proč obrázky zpomalují weby?
Když návštěvník otevře stránku, prohlížeč stáhne každý zdroj na ní, než stránku zobrazí. Obrázky bývají z těchto zdrojů největší. Každý obrázek vyžaduje vlastní požadavek a prohlížeč musí počkat na dokončení těchto požadavků, než může obsah plně vykreslit.
Jak obrázky ovlivňují metriky načítání
- Obrázky přímo ovlivňují Largest Contentful Paint (LCP). Pokud je největším viditelným prvkem stránky hlavní obrázek, LCP je doba, za kterou se tento obrázek plně načte
- Neoptimalizované obrázky zvyšují celkovou velikost stránky, což zdržuje všechny ostatní metriky na časové ose načítání
- Na mobilních připojeních je efekt zesílený. Hlavní obrázek o velikosti 3MB, který se na širokopásmovém připojení načte za dvě vteřiny, může na průměrné mobilní síti trvat osm vteřin nebo víc
- Více velkých obrázků problém znásobuje. Galerie nebo stránka produktu s deseti nekomprimovanými fotkami se může na pomalejších připojeních špatně používat
Jaké formáty souborů používat pro webové obrázky?
JPEG
- Standardní formát pro fotografie a obrázky s přechody a mnoha barvami
- Podporuje ztrátovou kompresi, což znamená, že se část dat obrázku trvale odstraní, aby se zmenšil soubor
- Podporovaný všemi prohlížeči a zařízeními bez výjimky
- Nastavení kvality 75 až 85 vytváří soubory o 60 až 80 procent menší než originál bez viditelné ztráty kvality u většiny fotografií
PNG
- Formát pro obrázky, které potřebují průhledné pozadí, včetně log, ikon a grafiky s plochými barevnými plochami
- Používá bezeztrátovou kompresi, což znamená, že se neodstraňují žádná data a obrázek zůstává zachován přesně
- Soubory PNG jsou u fotografií výrazně větší než JPEG. PNG používejte jen tehdy, když je potřeba průhlednost; pro fotky používejte JPEG nebo WebP
WebP
- Moderní formát vyvinutý jako náhrada JPEG i PNG s lepší kompresí při stejné kvalitě
- Obrázky WebP bývají o 25 až 35 procent menší než ekvivalentní soubory JPEG
- Podporuje ztrátovou i bezeztrátovou kompresi a podporuje průhlednost
- Podporovaný všemi hlavními prohlížeči. Pokud váš tvůrce webů obrázky automaticky nepřevádí na WebP, převeďte je ručně před nahráním
AVIF
- Novější formát, který nabízí lepší kompresi než WebP, často o 50 procent menší než JPEG při srovnatelné kvalitě
- Podpora v prohlížečích roste, ale zatím není univerzální. Používejte AVIF tam, kde je podporovaný, s automatickou záložní variantou WebP nebo JPEG pro prohlížeče, které ho nepodporují
Co je komprese obrázků a jak funguje?
Komprese zmenšuje velikost souboru odstraněním nebo zjednodušením dat obrázku. Existují dva typy a rozdíl určuje, kdy který použít.
Ztrátová komprese
- Trvale odstraní část dat obrázku, aby se dosáhlo menšího souboru
- Odstraněná data se vybírají podle toho, čeho si lidské oko nejspíš nevšimne, typicky jemných barevných variací a detailů jemné textury
- Používá se v JPEG a ztrátovém WebP
- Nastavení kvality 75 až 85 vytváří dramaticky menší soubory s obrázky, které pro většinu praktických použití vypadají stejně jako nekomprimovaný originál
- Neukládejte znovu už zkomprimovaný JPEG s nižším nastavením kvality. Hromadí se tím artefakty komprese a obrázek se při každém uložení dál zhoršuje
Bezeztrátová komprese
- Zmenšuje velikost souboru bez odstranění jakýchkoli dat obrázku. Každý pixel zůstává zachován přesně
- Používá se v PNG a bezeztrátovém WebP
- Úspora velikosti souboru je menší než u ztrátové komprese, ale bez jakékoli ztráty kvality
- Nejvhodnější pro diagramy produktů, snímky obrazovky, grafiku s velkým množstvím textu nebo jakýkoli obrázek, kde by artefakty komprese byly vidět nebo nepřijatelné
Je třeba změnit velikost obrázků před nahráním?
Velikost souboru a rozměry v pixelech jsou dvě samostatné věci a obě ovlivňují rychlost načítání. Komprimace obrázku širokého 4 000 pixelů nepomůže, pokud ho prohlížeč potřebuje zobrazit jen v šířce 800 pixelů. Prohlížeč stáhne celý obrázek o 4 000 pixelech a ve viewportu ho zmenší, čímž plýtvá přenosem dat a zpomaluje stránku každému návštěvníkovi.
Jak správně nastavit velikost obrázků před nahráním
- Zjistěte maximální šířku, ve které se obrázek někdy zobrazí. U obrázků na celou šířku na počítači je to obvykle 1 440 až 1 920 pixelů
- U obrázků ve sloupcích nebo kartách je zobrazená šířka menší, často 400 až 800 pixelů
- Před nahráním změňte velikost obrázku na jeho maximální zobrazovanou velikost
- U displejů retina a s vysokou hustotou vynásobte šířku zobrazení číslem 1,5 až 2. Obrázek karty širokého 400 pixelů profituje ze zdrojového souboru širokého 600 až 800 pixelů, aby na obrazovkách retina vypadal ostře
Co je lazy loading a jak ovlivňuje optimalizaci obrázků?
Lazy loading odkládá stahování obrázků, které zatím nejsou ve viewportu vidět. Místo načtení všech obrázků na stránce najednou prohlížeč načítá obrázky, až když se k nim návštěvníci při rolování přiblíží. Na stránkách s mnoha obrázky to výrazně snižuje počáteční velikost stránky a zlepšuje Time to Interactive pro obsah viditelný bez rolování.
- Lazy loading je nativně podporovaný ve všech hlavních prohlížečích pomocí atributu
loading="lazy"na značkách obrázků - Nepoužívejte lazy loading u obrázků nad ohybem. Hlavní obrázek a jakýkoli obsah viditelný bez rolování by se měl načíst okamžitě
- Lazy loading použijte u všech obrázků pod ohybem, včetně galerií produktů, náhledů blogu a sekcí s mnoha obrázky níž na stránce
Úplný rozbor toho, jak lazy loading funguje a kdy ho použít, najdete v článku o tom, co je lazy loading a jak funguje.
Co jsou responzivní obrázky a proč na nich záleží?
Responzivní obrázek je takový, který podává soubor jiné velikosti podle velikosti obrazovky návštěvníka. Místo aby se obrázek o šířce 1 920 pixelů posílal na každé zařízení včetně návštěvníka s mobilní obrazovkou širokou 375 pixelů, responzivní obrázky nechají prohlížeč vyžádat jen to, co potřebuje.
Jak responzivní obrázky zkracují načítání na mobilu
- Mobilní návštěvník dostane verzi obrázku o šířce 400 pixelů místo celého souboru pro počítač, což dramaticky snižuje velikost stahování
- Responzivní obrázky používají atribut
srcset, který definuje více zdrojových souborů v různých šířkách, aby prohlížeč mohl vybrat ten vhodný - Tvůrci webů, kteří to řeší automaticky, vás ušetří ručního vytváření více velikostí obrázků
- Responzivní obrázky přímo zlepšují Core Web Vitals na mobilu, kde má optimalizace obrázků největší dopad na LCP
Rozbor Core Web Vitals a toho, jak se LCP hodnotí, najdete v článku o tom, co jsou Core Web Vitals.
Jak optimalizovat obrázky krok za krokem?
Před nahráním
- Změňte velikost obrázku na správné rozměry zobrazení
- Zvolte správný formát: WebP pro fotografie a běžnou grafiku, PNG jen tehdy, když je potřeba průhlednost
- Komprimujte s nastavením kvality 75 až 85 u ztrátových formátů
- Zkontrolujte velikost souboru. Typický webový obrázek by měl mít méně než 200KB. Hlavní obrázky na počítači mohou mít až 400KB; cokoli nad to stojí za to před nahráním znovu zvážit
Po nahrání
- Přidejte popisný alt text ke každému obrázku. Je to důležité pro přístupnost a přispívá to k viditelnosti ve vyhledávání. Úplného průvodce najdete v článku o tom, jak používat obrázky na webu
- Použijte lazy loading u všech obrázků pod ohybem
- Po přidání nových obrázků spusťte test rychlosti stránky. Jediný neoptimalizovaný obrázek může zrušit všechna ostatní zrychlení na stránce
Průběžně
- Kontrolujte nové obrázky před každým nahráním. Neoptimalizované obrázky snadno proklouznou, když se pracuje rychle
- Po zveřejnění každé větší dávky nových obrázků spusťte test rychlosti
- Zkontrolujte starší obrázky, pokud je web starší než současné postupy optimalizace. Staré knihovny obrázků jsou častým a přehlíženým zdrojem problémů s rychlostí
Průvodce testováním výkonu celého webu najdete v článku o tom, jak otestovat rychlost webu.
Jak WEMASY řeší optimalizaci obrázků
Tvůrce webů WEMASY automaticky komprimuje a převádí obrázky při nahrání. Obrázky se podávají ve formátu WebP tam, kde ho prohlížeč podporuje, se záložními formáty pro starší zařízení. Při nahrání se vytvoří více velikostí, takže mobilní návštěvníci dostanou soubory odpovídající velikosti bez jakéhokoli ručního nastavování.
Lazy loading se ve výchozím stavu používá u obrázků pod ohybem na všech stránkách vytvořených ve WEMASY. Alt text lze přidat v editoru obrázků na platformě. Skóre rychlosti stránek včetně LCP je vidět v analytice WEMASY, s problémy souvisejícími s obrázky označenými u každé stránky spolu s konkrétními doporučeními.
Co všechno je součástí, uvidíte na stránce tvůrce webů WEMASY, nebo si prohlédněte možnosti tarifů na stránce ceníku.
Často kladené otázky
Co je optimalizace obrázků pro web?
Optimalizace obrázků pro web je proces zmenšování velikosti souboru obrázku při zachování přijatelné vizuální kvality pro zobrazení na obrazovce. Zahrnuje výběr správného formátu souboru, komprimaci obrázku na vhodnou úroveň kvality, změnu velikosti na skutečné rozměry zobrazení a použití technik jako lazy loading a responzivní obrázky, aby si návštěvníci stáhli jen tu verzi souboru, kterou jejich zařízení a připojení potřebují. S tvůrcem webů WEMASY si to můžete nastavit přímo na svém webu.
Jaký je nejlepší formát obrázků pro web?
WebP je nejlepší formát pro většinu webových obrázků. Nabízí výrazně lepší kompresi než JPEG při srovnatelné vizuální kvalitě, podporuje průhlednost jako PNG a podporují ho všechny hlavní prohlížeče. U obrázků, které vyžadují průhledné pozadí a přesnost na pixel, je správnou volbou PNG. AVIF nabízí ještě lepší kompresi než WebP, ale má omezenější podporu v prohlížečích a nejlépe funguje s automatickým záložním formátem.
O kolik může komprese obrázků zmenšit velikost souboru?
Ztrátová komprese s nastavením kvality 75 až 85 obvykle zmenší velikost souboru JPEG o 60 až 80 procent bez viditelného rozdílu v kvalitě u většiny fotografií. Převod z JPEG na WebP při stejné úrovni kvality zmenší velikost souboru o dalších 25 až 35 procent. Fotku, která začíná na 4MB, lze často zmenšit pod 150KB kombinací správné změny velikosti, převodu formátu a nastavení komprese.
Ovlivňuje optimalizace obrázků SEO?
Ano. Neoptimalizované obrázky jsou jednou z nejčastějších příčin pomalého skóre Largest Contentful Paint, což je Core Web Vital, který vyhledávače používají jako signál pro řazení. Stránky s velkými nekomprimovanými obrázky často dopadají v LCP hůř než stránky, které mají stejný obsah v optimalizované podobě. Popisný alt text u obrázků navíc přispívá k viditelnosti ve vyhledávání obrázků a k celkové přístupnosti stránky.
Má se lazy loading používat u všech obrázků?
Ne. Lazy loading by se měl používat jen u obrázků, které jsou pod ohybem, tedy u obsahu, který není vidět při prvním otevření stránky. Obrázky nad ohybem, včetně hlavního obrázku nebo jakéhokoli výrazného vizuálu poblíž horní části stránky, by se měly načíst okamžitě. Použití lazy loadingu u obrázků nad ohybem zdržuje LCP, což zhoršuje skóre Core Web Vitals i zážitek návštěvníků.
Jak velké mají webové obrázky být?
Typický webový obrázek by měl mít méně než 200KB. Hlavní obrázky a obrázky na celou šířku na počítači mohou mít až 400KB bez výrazného dopadu na dobu načítání, pokud jsou ve formátu WebP a správně zkomprimované. Obrázky používané v kartách, náhledech a menších kontejnerech by měly mít velikost podle skutečné šířky zobrazení. Podávání obrázku o šířce 1 920 pixelů v kontejneru širokém 400 pixelů plýtvá přenosem dat každému návštěvníkovi na každém zařízení.