Optimalizace a práce s obrázky na webu

Pokud jste někdy testovali rychlost načítání svého webu, jistě jste došli k závěru, že jednou z největších datových zátěží vašeho webu jsou právě obrázky. Přesto se mnoho z nás optimalizaci datové velikosti obrázků a jejich rychlosti načítání příliš nevěnuje. A pokud ano, tak v nedostatečné míře.

Sám jsem postupem let otestoval několik různých postupů, jak práci s obrázky co nejvíce zefektivnit a přináším vám mnou získané poznatky.

Velikosti různých typů souborů na webu – obrázky často hrají prim, test proveden službou pingdom.com

1. Zobrazujte obrázky v odpovídajících rozlišeních

Rada číslo jedna je jasná, pokud na frontendu webu chcete zobrazit obrázek ve velikosti 200×200 pixelů, měli byste načítat obrázek skutečně v tomto rozlišení, ne v rozlišení full HD či jiných šílených velikostech, jak je tomu bohužel často k vidění na mnoha webech.

Jasně, uživatelé nic okem nepoznají, jelikož prohlížeč obrázek sám pro danou velikost přizpůsobí.

Uživatelé, ale i roboti vyhledávačů to však poznají, a to na výrazně pomalejším načítání webu.

2. Lazy Loading

Lazy loading je skvělá věc, pokud na dané stránce načítáte velké množství obrázků mimo viewport, tedy načítáte obrázky, které se zobrazují až pod aktuálně viditelným obsahem.

Funkce lazy loading zajistí načítání obrázků až ve chvíli, kdy se mají dané obrázky uživateli skutečně zobrazit. Web se tak načítá mnohem, ale mnohem rychleji.

Sám mám lazy loading naprogramován přímo ve vlastní šabloně na míru. Pokud používáte WordPress, vřele doporučuji dva pluginy – BJ Lazy load, případně Autoptimize. Sám jsem dříve pro tuto funkci používal placený plugin WP Rocket.

Jakmile nasadíte plugin pro lazy loading, určitě vyzkoušejte funkčnost a řádné zobrazování celého webu, a to jak na desktopu, tak i na mobilu. Někdy může docházet ke kolizi k cachovacím pluginem či dalšími pluginy a může vám to na webu dělat nepříjemnou rotyku, proto raději vždy vše otestujte, a ideálně i na různých prohlížečích :).

3. Komprese obrázků

Sám jsem v různých etapách provozování on-line magazínů testoval velké množství pluginů pro automatickou kompresi obrázků pro WordPress, které dokáží ušetřit i 60 – 70 % datové velikosti obrázku.

Postupem let jsem tak otestoval tyto kompresní pluginy:

Kraken Image Optimizer
EWWW Image Optimizer
Compress JPEG & PNG images
Imagify
reSmush.it Image Optimizer
ShortPixel Image Optimizer
Smush

Abych nakonec skončil u placené verze pluginu Optimus, kde za cenu 29 dolarů ročně získám nástroj, který mohu používat na všech mých webech a kromě samotné komprese obrázků získám nástroj pro automatické generování obrázků ve formátu *.webp (více informací o tomto formátu najdete níže v článku).

Limity neplacených pluginů pro kompresi obrázků
Všechny výše uvedené pluginy jsem dříve používal ve free verzích, vesměs u všech je proto nutné provést registraci a plugin následně napárovat s vygenerovaným API klíčem.

Často u těchto pluginů také narazíte na měsíční limity v podobě maximálního možného počtu komprimovaných obrázků, ale také na omezení ohledně velikosti – lze komprimovat pouze obrázky menší, jak 1 MB.

Jak naložit s větší porcí obrázků?

Všechny neplacené pluginy mají limity a ať už v podobě počtu obrázků, které je možné za měsíc komprimovat, či v datové velikosti. U WordPressu je problém, že si každý obrázek ukládá v různých velikostech (na tomto mém blogu mám 36! různých velikostí totožného obrázku), a tak je limit v čudu raz dva.

Můj kamarád z „mástrmájndu“ Honza Janouškovec mi ale poradil, ať využívám webové rozhraní Krakena, které umožňuje dávkové nahrání a komprimaci většího množství obrázků, které lze pak hromadně stáhnout.

Nejjednodušší způsob je tedy následující:

stáhněte si všechny své obrázky z FTP serveru (ve WordPressu je bude mít pravděpodobně ve složce wp-content/uploads) do počítače
otevřete si web Kraken.io a vyberte volbu Web interface
nechte vybranou „kvalitu“ lossy – ani při bližším zkoumání na jemném Retina displeji jsem rozdíl v kvalitě neviděl (pokud vy rozdíl vidíte, zvolte kompresi lossless)
klikněte na ikonu šipky s popiskem „Click to upload…“
vyberte obrázky na svém PC a vložte je do rozhraní
počkejte na kompresi
stáhněte si všechny zkomprimované obrázky do rar souboru, který si rozbalte do složky
nahraďte novými obrázky ty původní

Mně se takto jednoduše podařilo hromadně zkomprimovat přes 31 tisíc obrázků, i když jsem musel nahrávání rozdělit do více menších bloků :).

DOPORUČENÍ od Linkiho: Pro hromadnou kompresi obrázků, a to včetně zachování struktury adresářů můžete použít desktopovou aplikaci Caesium.

* Za tip na appku děkuji Zdeňkovi Dvořákovi :).

4. WebP komprese

Jedná se o formát obrázků vyvinutý Googlem. Podle různých testů se jedná o kompresní formát, který dokáže snížit datovou velikost obrázků až o 45 %, což je slušná úspora dat.

Já se rozhodl, že si sám provedu test různých kompresí – otestoval obrázek v rozlišení 1920×1280 s původní velikostí 2,218 MB. Rozdíly ve výsledné velikosti si můžete prohlédnout v níže uvedené tabulce.

Komprese	Velikost po kompresi	Úspora v %
Obrázek bez komprese	2,218 MB	0 %
Komprese v Photoshopu (10)	1, 046 MB	53 %
Komprese pluginem Optimus	0,631 MB	72 %
Obrázek ve formátu WebP	0,576 MB	74 %

Výsledek? Obrázek ve formátu WebP měl o 74 % menší velikost než zcela nekomprimovaný obrázek.

Jelikož někdo může namítat, že na komprimovaných obrázcích budou okem vidět značné rozdíly, přikládám odkazy na jednotlivé obrázky, abyste si je mohli posoudit sami :).