Vaše stránky se načítají pomalu a návštěvníci mizí dřív, než vůbec uvidí váš obsah? Problém často tkví v neoptimalizovaných obrázcích. Optimalizátor obrázků je tudíž nepostradatelným nástrojem pro každého, kdo spravuje web – ať už provozujete e-shop, blog nebo firemní prezentaci.
Proč vlastně obrázky optimalizovat?
Každá sekunda načítání stránky vás stojí zákazníky. Statistiky ukazují, že 53 % návštěvníků opustí web, který se načítá déle než 3 sekundy. Přitom právě obrázky tvoří v průměru 50-60 % celkové velikosti webové stránky.
Dejme tomu, že nahrajete krásnou fotografii produktu přímo z fotoaparátu, která má ale 5 MB. Návštěvník na mobilním internetu čeká, stránka se načítá pomalu, a nakonec odchází ke konkurenci. Přitom stejnou fotografii dokážete zmenšit na 200 KB bez viditelné ztráty kvality.
Základní pojmy jednoduše vysvětlené
Než se pustíme do praxe, pojďme si ujasnit terminologii. Komprese obrázků znamená zmenšení velikosti souboru. Existují dva základní typy:
Bezeztrátová komprese funguje tak, že odstraní nadbytečná metadata a optimalizuje způsob uložení dat. Výsledný obrázek vypadá naprosto stejně. Ušetříte třeba 10-20 % velikosti.
Ztrátová komprese už do obrázku trochu zasáhne. Odstraní detaily, které lidské oko těžko rozpozná. Tady ušetříte 50-80 % velikosti, přičemž rozdíl většina lidí ani nepozná.
Kvalita obrázku se obvykle udává v procentech nebo škále 0-100. Pro web funguje nejlépe nastavení kolem 75-85 %. Pod 70 % už začínají být vidět artefakty a rozmazání.
Pokud vás téma komprese obrázků zajímá detailněji, můžeme vás odkázat ještě na tento text.
Výběr správného formátu
- JPEG používejte pro fotografie a obrázky s mnoha barvami. Tento formát skvěle komprimuje složité barevné přechody. Ideální je pro produktové fotky, bannery nebo fotogalerie.
- PNG volte pro obrázky s průhledností, loga, ikony nebo grafiku s ostrými hranami a textem. PNG zachovává ostrost linií, která by se v JPEG formátu rozmazala.
- WebP je moderní řešení, které kombinuje výhody obou předchozích formátů. Dosahuje o 25-35 % menší velikosti než JPEG při stejné kvalitě. Všechny současné prohlížeče už ho podporují.
- GIF používejte jen pro krátké animace. Pro statické obrázky existují mnohem lepší varianty.
Praktický postup optimalizace krok za krokem
Krok 1: Upravte rozměry
Nejdřív zkontrolujte, jakou velikost obrázek skutečně potřebujete. Když máte fotografii 4000 × 3000 pixelů, ale na webu se zobrazí jen 800 × 600 pixelů, zbytečně plýtváte daty. Změňte rozměry už před uploadem.
Pro hlavní obrázky na desktopu stačí šířka 1920 pixelů. Pro produktové fotky v e-shopu vystačíte s 1200-1500 pixely. Miniatury nepotřebují víc než 300-400 pixelů.
Krok 2: Zkomprimujte soubor
Tady přichází na řadu komprimovací nástroj. Nahrajte obrázek do optimalizátoru, nastavte kvalitu na 80-85 % a nechte zpracovat. Výsledek si vždy zkontrolujte – musí vypadat dobře na různých zařízeních.
Krok 3: Porovnejte výsledky
Postavte originál vedle komprimované verze. Pokud rozdíl nevidíte na první pohled, máte vyhráno. Jestliže obrázek vypadá rozmazaně nebo pixelovaně, vraťte se o krok zpět a zkuste vyšší kvalitu.
Krok 4: Správně pojmenujte soubor
Místo „IMG_2547.jpg“ použijte „cervene-damske-boty-nike.jpg“. Vyhledávače ocení popisný název a pomohou vašemu SEO.
Tipy pro běžné situace
Pokud máte například e-shop s desítkami či stovkami produktů, nastavte si šablonu: produktové fotky 1200 × 1200 px, kvalita 82 %, formát JPEG. Všechny obrázky zpracujte najednou přes hromadnou optimalizaci.
Pro ilustrační fotky do blogu zase stačí šířka 1000 pixelů a kvalita 75 %. Dají se použít i volně dostupné obrázky z bank, které už bývají předoptimalizované.
Děláte-li fotogalerii, vytvořte si dvě sady – miniatury (400 px) pro náhledy a větší verze (1600 px) pro lightbox. Takhle se galerie načte bleskově a plné rozlišení se stáhne, až když uživatel na fotku klikne.
Mobilní návštěvníci si zaslouží pozornost
Víc než 60 % návštěvníků dnes přichází z mobilních zařízení. Na pomalém mobilním připojení dělá každý kilobyte velký rozdíl. Proto zvažte takzvané responsive images neboli responzivní obrázky – technologii, která automaticky načte menší verzi obrázku pro mobily a větší pro desktop. Váš web tím výrazně zrychlíte a ušetříte uživatelům drahá mobilní data. Technické řešení není složité a většina moderních CMS systémů ho už má vestavěné.
Jak poznat dobře optimalizovaný obrázek
Zkontrolujte si velikost souborů. Běžná webová fotografie by neměla přesáhnout 200 KB, ideálně se vejde pod 150 KB. Ikony a malé grafiky by měly mít maximálně 50 KB.
Rychlost načítání testujte přes nástroje třeba PageSpeed Insights od Google. Ukáží vám přesně, které obrázky stránku zpomalují.
Čas začít šetřit data i peníze
Optimalizace obrázků je jednoduchá a vašemu webu velmi pomůže. Stačí dodržovat několik jednoduchých pravidel: používat správné rozměry, volit vhodný formát a komprimovat s rozumným nastavením kvality. Stránka se vám načte rychleji, ušetříte náklady na hosting a návštěvníci u vás zůstanou déle. Začněte hned – stačí pár minut a rozdíl je okamžitě znatelný.
