Online optimalizátor obrázků – proč každý web potřebuje dokonale optimalizované obrázky?
Fotografie prodávají. Vizuál zaujme dřív než jakýkoliv text a také zůstane déle v paměti. Jenže stejné obrázky, které mají zákazníka přesvědčit, mohou být zároveň největším nepřítelem vašeho webu, pokud jsou příliš velké, špatně naformátované a neoptimalizované. Proto by neměl v repertoáru vašich nástrojů chybět ani online optimalizátor obrázků.
Co optimalizace obrázků vlastně znamená?
Zjednodušeně jde o to, aby obrázek měl co nejmenší datovou velikost při zachování dostatečné vizuální kvality. Fotografie vyfocená moderním smartphonem nebo zrcadlovkou má běžně velikost několik megabajtů. Pro tisk nebo archiv je to v pořádku, pro web je to katastrofa.
Optimalizace obrázků tento nepoměr řeší. Kombinuje zmenšení rozlišení na rozměry, které web skutečně potřebuje, převod do vhodnějšího formátu a kompresi, tedy odstranění dat, která jsou pro zobrazení v prohlížeči zbytečná. Výsledkem je soubor, který vypadá prakticky stejně, ale váží desetinu nebo dvacetinu originálu.
Proč na rychlosti záleží víc, než si myslíte?
Představte si, že vejdete do obchodu a prodavač vás nechá čekat tři minuty, než vůbec přijde pozdravit. Většina lidí otočí a odejde. Web funguje úplně stejně.
Výzkumy Google opakovaně potvrzují, že pokud se stránka načítá déle než tři sekundy, velká část návštěvníků odchází dřív, než cokoliv uvidí. Na mobilu je tato hranice ještě nižší. A kdo odejde, ten nenakoupí, nezavolá a nevyplní formulář.
Obrázky přitom tvoří v průměru největší část datového objemu každé webové stránky – typicky 50 až 80 procent celkové váhy stránky. To znamená, že právě neoptimalizované fotografie jsou nejčastějším důvodem, proč se web načítá pomalu. Opravit tento problém je přitom technicky jednoduché a výsledky jsou okamžitě měřitelné.
Co s tím dělá Google?
Rychlost načítání stránky není jen záležitostí uživatelského komfortu. Google ji od roku 2021 zahrnuje do hodnotícího algoritmu prostřednictvím metrik Core Web Vitals. Jednou z nich je Largest Contentful Paint, což je čas, za který se načte největší vizuální prvek stránky. Tím prvkem bývá nejčastěji obrázek.
Weby s pomalým načítáním dostávají v Googlu horší pozice než weby rychlé i při srovnatelném obsahu a zpětných odkazech. To znamená, že neoptimalizované obrázky vás připravují nejen o zákazníky, kteří odejdou kvůli čekání, ale i o ty, kteří vás v Googlu vůbec nenajdou, protože konkurence je rychlejší.
Formáty, na které se zapomíná
Velká část webů stále používá formáty JPEG a PNG jako jediné možnosti. Přitom moderní formáty jako WebP nebo AVIF nabízejí při stejné vizuální kvalitě výrazně menší velikost souboru. WebP je přibližně o 25 až 35 procent menší než srovnatelný JPEG. AVIF jde ještě dál.
Oba formáty dnes podporují všechny moderní prohlížeče. Neexistuje proto technický důvod, proč je na webu nepoužívat. Přechod na modernější formáty je jedna z nejrychlejších cest, jak zlepšit rychlost webu bez větších technických zásahů.
JPEG funguje nejlépe pro fotografie s přirozenými přechody barev. PNG se hodí tam, kde potřebujete průhledné pozadí. WebP zvládá obojí a přitom váží méně. Volba formátu je tím pádem rozhodnutí, které přímo ovlivňuje výkon celého webu.
Alt texty a názvy souborů nejsou formalita
Google obrázky nevidí, ale čte. A to prostřednictvím dvou textových prvků: názvu souboru a alt textu.
Soubor pojmenovaný „IMG_4872.jpg“ Googlu nic neříká. Soubor pojmenovaný „cervene-letni-saty-bavlna.jpg“ mu poskytuje konkrétní informaci. Stejně funguje alt text – tedy popis obrázku, který je součástí kódu stránky a zobrazí se tehdy, když se obrázek nenačte nebo když stránku čte zrakově postižený návštěvník pomocí čtečky.
Dobře napsaný alt text popisuje, co je na obrázku vidět, a přirozeně pracuje s výrazy, které na stránce dávají smysl. Nepleťte si ale obrázek s prostorem pro nacpání co nejvíce klíčových slov – to Google pozná a penalizuje. Důležitý je v první řadě přesný, stručný popis.
E-shopy platí za neoptimalizované obrázky nejvíc
Produktové fotografie jsou srdcem každého e-shopu. A zároveň nejčastějším zdrojem technických problémů. Typický e-shop nahraje fotografii v rozlišení 4000 × 3000 pixelů „aby to bylo hezky vidět“ a pak ji zobrazuje v náhledu o velikosti 300 × 200 pixelů. Prohlížeč ale stáhl celý původní soubor. Zbytečně.
Správná optimalizace pro e-shop proto pracuje s responzivními obrázky, tedy s tím, aby prohlížeč stáhl vždy jen tu verzi obrázku, která odpovídá aktuálnímu zobrazení na konkrétním zařízení. Na mobilním telefonu menší soubor, na velkém monitoru větší. Tato technika se jmenuje srcset a moderní e-shopové platformy ji zvládají buď automaticky, nebo prostřednictvím pluginů.
Jak začít, i když nejste technik
Optimalizace obrázků nevyžaduje pokročilé technické znalosti. Pro většinu webů stačí tři kroky.
- Prvním krokem je přestat nahrávat obrázky v originálním rozlišení z fotoaparátu. Před nahráním stačí fotku zmenšit na rozměry, které web skutečně používá – většinou postačí šířka 1200 až 1600 pixelů.
- Druhým krokem je komprese. Online nástroje jako TinyPNG, Squoosh, Compressor.io a řada dalších zmenší soubor bez viditelné ztráty kvality během několika sekund a zdarma. Weby na WordPressu mohou celý proces automatizovat pomocí pluginů jako ShortPixel nebo Imagify.
- Třetím krokem je přechod na modernější formáty. Většina výše zmíněných nástrojů převod do WebP nabízí automaticky.
Malá změna s velkým dopadem
Optimalizace obrázků patří mezi zlepšení, která nejsou vidět, ale jejichž absence se velmi dobře měří. Ve statistikách návštěvnosti, v míře opuštění stránek, v pozicích ve vyhledávání a nakonec i v počtu objednávek nebo poptávek.
Není to přitom bůhvíjak složitá práce. Na většině webů jde o jednorázový zásah, který pak funguje automaticky. A weby, které takový zásah podceňují, platí za každou neoptimalizovanou fotografii znovu a znovu – pokaždé, když ji někdo otevře a pak zavře dřív, než se stačí načíst.
