Jak optimalizovat obrázky pro rychlejší webové stránky

Obrázky jsou obvykle největšími soubory na jakékoli webové stránce. Neoptimalizované obrázky jsou hlavním důvodem, proč se weby načítají pomalu, což přímo škodí uživatelskému zážitku, konverzním poměrům a pozicím ve vyhledávačích Google. Google používá Core Web Vitals jako signál pro hodnocení a rychlost stránky je klíčovou součástí. Nejrychlejší způsob, jak zrychlit webové stránky, je optimalizace jejich obrázků.

Proč je optimalizace obrázků důležitá pro SEO

Google byl jasný: rychlost stránky ovlivňuje hodnocení. Jejich metrika Largest Contentful Paint (LCP) konkrétně měří, jak rychle se načte největší viditelný prvek, což je téměř vždy obrázek. Pokud je váš LCP nad 2,5 sekundy, ztrácíte pozice ve prospěch konkurentů s rychlejšími stránkami. Pro e-commerce Amazon zjistil, že každých 100 ms dodatečného času načítání jim stálo 1 % prodejů.

Čtyři pilíře optimalizace obrázků

1. Vyberte správný formát

Výběr formátu je největším faktorem ovlivňujícím velikost souboru obrázku:

• WebP by měl být vaší výchozí volbou pro webové obrázky. Je 25-35% menší než JPEG při stejné kvalitě a podporuje průhlednost. Použijte JPG na WebP konvertor od fileGOD nebo PNG na WebP konvertor pro dávkovou konverzi.
• JPEG pro fotografie, kde WebP není podporován vaší platformou.
• PNG pouze když potřebujete průhlednost a nemůžete použít WebP.
• SVG pro loga, ikony a jednoduchou grafiku. SVG jsou malé a lze je nekonečně škálovat.

2. Komprimujte před nahráním

Každý obrázek by měl být komprimován před umístěním na webové stránky. Moderní komprese může snížit velikost souborů o 60-80 % bez viditelné ztráty kvality.

• Použijte JPEG kompresi pro fotografie s kvalitou 75-85.
• Použijte PNG kompresi pro grafiku a snímky obrazovky.
• U hlavních obrázků a velkých bannerů jsou úspory nejdramatičtější. Hlavní obrázek o velikosti 5 MB komprimovaný na 200 KB znamená obrovský rozdíl v času načítání.

3. Změňte velikost na skutečné rozměry zobrazení

Toto je nejpřehlíženější optimalizace. Pokud vaše webové stránky zobrazují obrázek o šířce 800px, nenahrávejte zdrojový obrázek o velikosti 4000px a nenechávejte prohlížeč, aby ho zmenšil. Prohlížeč stále stahuje celý soubor. Změňte velikost obrázků na skutečné rozměry zobrazení před nahráním.

Pro responzivní weby připravte 2-3 velikosti (malé pro mobil, střední pro tablet, velké pro desktop) a nechte prohlížeč vybrat tu správnou pomocí atributu srcset.

4. Odstraňte nepotřebná metadata

EXIF data (model fotoaparátu, GPS souřadnice, časová razítka) přidávají 10-50KB na obrázek. Na webových stránkách neslouží žádnému účelu a mohou představovat riziko pro soukromí, pokud obsahují GPS data. Odstraňte metadata ze všech webových obrázků před nahráním.

Rychlý kontrolní seznam optimalizace

• Převeďte fotografie na WebP (nebo JPEG, pokud WebP není možnost)
• Změňte velikost na skutečné rozměry zobrazení, ne větší
• Komprimujte s kvalitou 75-85 pro fotografie
• Odstraňte EXIF metadata
• Používejte popisné názvy souborů a alt text (pomáhá SEO pro vyhledávání obrázků)
• Implementujte lazy loading pro obrázky pod záhybem

Všechny výše uvedené operace se soubory můžete provést v prohlížeči pomocí fileGOD. Žádné nahrávání na servery třetích stran, žádná předplatná a můžete dávkově zpracovat více obrázků najednou.