Váš web možná funguje dlouhé roky a návštěvníky má. Jenže stránky se načítá čtyři sekundy a PageSpeed Insights ukazuje červená čísla. Příčina bývá vždy stejná – zapomněli jste komprimovat obrázky. Stovky nebo tisíce nekomprimovaných obrázků nahromaděných za roky provozu představují pro váš web mrtvou váhu, která ho táhne dolů. Tohle je řešitelný problém a nemusíte začínat od nuly.
Proč je zpětná komprimace jiná než optimalizace nového webu?
Při spouštění nového webu nastavíte proces jednou a každý nový obrázek jím automaticky prochází. U webu, který běží roky bez optimalizace, stojíte před jiným úkolem. Musíte zpracovat existující obsah, aniž byste cokoliv rozbili.
Zpětná komprimace má svá specifika. Obrázky jsou rozesety po celém webu, v článcích, kategoriích, produktových stránkách i médiích nahraných a zapomenutých. Nevíte přesně, kolik jich je, kde všude jsou použity a jak velké jsou soubory. Než začnete cokoliv komprimovat, potřebujete přehled.
Nejdřív zmapujte situaci
Před jakoukoli akcí zjistěte, s čím vlastně pracujete. Pro WordPress weby otevřete sekci Média v administraci a podívejte se na celkový počet souborů. Větší přehled ale nabídne nástroj jako Screaming Frog nebo online služba Sitebulb, které projdou celý web a vypíší všechny obrázky s jejich velikostí a URL adresou.
Exportujte tento seznam do tabulky a seřaďte obrázky podle velikosti souboru od největšího po nejmenší. Tímto krokem okamžitě uvidíte, kde jsou největší problémy. Velmi pravděpodobně zjistíte, že dvacet procent obrázků tvoří osmdesát procent celkové datové zátěže. Na ty se zaměřte jako první.
PageSpeed Insights na adrese pagespeed.web.dev pak ukáže konkrétní doporučení pro klíčové stránky webu. V sekci Příležitosti uvidíte, kolik kilobajtů nebo megabajtů by správná komprimace ušetřila. Toto číslo je váš cíl a zároveň argument pro to, proč má zpětná optimalizace smysl.
WordPress a automatické zpětné zpracování
Pro weby na WordPressu je zpětná komprimace technicky nejjednodušší díky pluginům, které zvládnou hromadné zpracování existujících obrázků na pozadí.
-
ShortPixel je jeden z nejoblíbenějších nástrojů pro tento účel. Po instalaci a nastavení nabídne tlačítko pro hromadnou optimalizaci všech existujících obrázků v mediální knihovně. Plugin zpracovává soubory postupně, takže server není přetížen najednou. Bezplatný plán pokryje sto obrázků měsíčně. Pro větší weby existují placené kredity nebo měsíční předplatné.
-
Imagify funguje na podobném principu a navíc ukáže přehlednou statistiku: kolik obrázků bylo zpracováno, kolik místa bylo ušetřeno a jaká je průměrná míra komprimace. Tyhle čísla jsou užitečné pro reportování výsledků a pro přesvědčení klienta nebo šéfa, že optimalizace měla smysl.
-
Smush v bezplatné verzi zvládne hromadné zpracování obrázků do určité velikosti souboru. Pro větší soubory, typicky fotografie nad jeden megabajt, vyžaduje placený Smush Pro. Výhodou Smushe je přehledné rozhraní, které ocení i méně technicky zdatní uživatelé.
Všechny tyto pluginy ukládají originální soubory jako zálohu, takže v případě problémů lze kompresi vrátit. Přesto před spuštěním hromadného zpracování raději zálohujte celý web. Záloha vás nezachrání jen před chybou pluginu, ale také před lidskou chybou při nastavení.
Jak postupovat na webech mimo WordPress?
Weby postavené na jiných platformách nebo na míru vyžadují jiný přístup. Obrázky jsou fyzicky uloženy na serveru a k jejich hromadnému zpracování potřebujete buď přístup přes FTP (více o FTP zde) nebo SSH, nebo spolupráci s vývojářem.
Přes FTP stáhněte celou složku s obrázky, typicky bývá pojmenovaná uploads nebo images, na lokální disk. Pak použijte desktopový nástroj pro hromadnou komprimaci. ImageOptim pro Mac zpracuje celé složky přetažením a automaticky nahradí originály optimalizovanými verzemi. Pro Windows plní stejnou funkci FileOptimizer nebo aplikace RIOT.
Po lokální komprimaci nahrajte zpracované soubory zpět na server přes FTP na stejná místa. Obrázky na webu se automaticky zobrazí v optimalizované podobě, protože URL adresy zůstaly stejné.
Pro větší weby s tisíci obrázků je efektivnější řešení přes příkazový řádek na serveru. Nástroje jako ImageMagick nebo jpegoptim zpracují celou složku jedním příkazem a zvládnou tisíce souborů za minuty. To si žádá přístup přes SSH a základní znalost příkazového řádku. Pokud to přesahuje vaše technické znalosti, oslovte vývojáře. Jde o jednorázovou práci, která trvá hodinu a výsledky jsou okamžitě měřitelné.
Převod na moderní formáty při zpětné optimalizaci
Zpětná komprimace je dobrá příležitost k přechodu na modernější formáty. WebP nabídne při stejné vizuální kvalitě soubory o pětadvacet až třicet pět procent menší než JPEG. AVIF jde ještě dál, ale podpora v prohlížečích je zatím o něco slabší.
WordPress pluginy ShortPixel a Imagify při zpětném zpracování automaticky vygenerují WebP varianty každého obrázku. Web pak přes speciální nastavení serveru nebo plugin servíruje WebP prohlížečům, které ho podporují, a JPEG nebo PNG jako záložní variantu pro starší prohlížeče.
Tenhle přístup nevyžaduje ruční konverzi ani přepisování kódu. Plugin vše vyřeší automaticky a výsledkem je výrazně menší datová zátěž bez jakékoliv viditelné změny pro návštěvníka.
Co dělat s obrázky použitými v textech článků?
Jedním ze skrytých problémů zpětné optimalizace je situace, kdy jsou v obsahu webu přímo vloženy velké obrázky v plném rozlišení. Zkomprimovat soubor v mediální knihovně nestačí, pokud je v kódu stránky obrázek odkazován v rozlišení 3000 × 2000 pixelů tam, kde se zobrazuje na šířce 800 pixelů.
Screaming Frog po crawlu webu zobrazí obrázky, jejichž přirozené rozměry výrazně přesahují zobrazované rozměry. Tyhle obrázky potřebují nejen komprimaci, ale také ořez nebo změnu rozměrů. U WordPressu to lze vyřešit nástrojem Regenerate Thumbnails, který znovu vygeneruje všechny miniatury a zmenšené verze obrázků podle aktuálního nastavení šablon.
Jak změřit výsledky zpětné komprimace?
Po dokončení zpracování spusťte PageSpeed Insights znovu na stejných stránkách, kde jste měřili před optimalizací. Porovnání čísel ukáže konkrétní dopad práce. Skóre výkonu by mělo vzrůst a sekce Příležitosti by měla zmizet nebo výrazně zkrátit seznam doporučení týkajících se obrázků.
Google Search Console v sekci Core Web Vitals pak po čtyřech až šesti týdnech zobrazí, zda se zlepšily metriky LCP a CLS. LCP je přitom přímo ovlivněna rychlostí načítání největšího obrázku na stránce. Pokles LCP pod 2,5 sekundy je hranice, při které Google považuje stránku za rychlou.
Zpětná komprimace s trvalým efektem
Zpětná optimalizace obrázků vyžaduje investici času na začátku, ale výsledky za to stojí. Web, který léta shromažďoval nekomprimované soubory, se po optimalizaci načítá rychleji, dostává lepší hodnocení od Googlu a návštěvníci méně často odcházejí před načtením stránky. Hlavní ale je, co přijde po zpětné optimalizaci. Musíte především nastavit automatický proces pro všechny nové obrázky, aby se situace za dalších pět let neopakovala.
