Proč zmenšit JPEG soubory online? Mobilní web se bez nich neobejde
Potřeba zmenšit JPEG soubory online se nejsilněji projeví právě na mobilních zařízeních, kde každý zbytečný kilobajt prodlužuje načítání a zvyšuje spotřebu mobilních dat uživatele. Web s nekomprimovanými fotografiemi nepřenáší pouze data na server – přenáší i náklady na mobilní uživatele, kteří za tato data platí ze svého tarifu.
Jak mobilní připojení mění pravidla hry
Desktopový uživatel na rychlém Wi-Fi připojení vnímá rozdíl mezi JPEG souborem o velikosti 5 MB a 200 kB jen jako mírně kratší dobu načítání.
Mobilní uživatel na LTE síti s datovým tarifem 5 GB měsíčně vnímá rozdíl jinak: každá nekomprimovaná fotografie mu ubírá z omezeného datového balíčku mnohonásobně více, než je nutné.
Průměrná webová stránka s fotografiemi přenáší při načítání 2 až 4 MB dat. (Pro srovnání se můžete podívat, kolik dat „žerou“ průměrné aplikace v mobilu).
U stránek s nekomprimovanými JPEG soubory nicméně objem přenesených dat snadno přesáhne 15 až 30 MB. Pro uživatele s tarifem 1 až 2 GB měsíčně, které jsou v Česku stále běžné zejména u starších nebo cenově citlivých zákazníků, znamená návštěva takového webu spotřebu nezanedbatelné části měsíčního datového limitu.
Kde mobilní připojení stále zaostává
Přestože 5G sítě se postupně rozšiřují, realita mobilního připojení v České republice je různorodá. Mimo velká města, v podzemních garážích, v budovách s tlustými zdmi nebo v dopravních špičkách přepínají telefony na 4G nebo 3G připojení s výrazně nižší rychlostí. Na 3G připojení s reálnou rychlostí 2 Mbit/s trvá stažení 10 MB déle než 40 sekund. Nekomprimovaná fotogalerie se v takových podmínkách nenačte vůbec.
Čekat se nechce nikomu
Statistiky opakovaně ukazují, že více než polovina mobilních uživatelů stránku, která se nenačte do 3 sekund, prostě opouští. Na desktopu je tolerance vyšší, mobilní uživatelé jsou zvyklí na okamžité reakce aplikací a jejich trpělivost s pomalými weby je nižší. Stránka s nekomprimovanými JPEG soubory tuto hranici překračuje na průměrném mobilním připojení s přehledem.
Například tento přehled nejčastějších chyb při optimalizaci obrázků, které zpomalují web, potvrzuje, že nahrávání JPEG souborů bez předchozí komprese patří mezi chyby s nejvyšším dopadem na mobilní uživatele. Přitom jde zároveň o jednu z chyb nejjednodušeji opravitelných.
Spotřeba baterie a zahřívání zařízení
Stahování velkých souborů zatěžuje mobilní procesor a síťový čip více než stahování malých souborů. Delší síťová aktivita při načítání nekomprimovaných fotografií spotřebovává více energie z baterie. U starších zařízení s menší kapacitou baterie jde o znatelný efekt, zvláště při procházení obsahu s rozsáhlými galeriemi.
Jak mobilní zařízení zpracovávají JPEG soubory
Škálování na straně prohlížeče
Mobilní prohlížeč zobrazí JPEG soubor v rozměrech definovaných CSS nebo HTML atributy, nehledě na reálné rozlišení souboru. Fotografie o šířce 4000 pixelů zobrazená na displeji s šířkou 390 pixelů přenese více než stokrát více dat, než prohlížeč skutečně zobrazí. Mobilní zařízení soubor celý stáhne, načte do paměti a teprve pak ho zmenší na zobrazovanou velikost.
Tento postup plýtvá přenosovou kapacitou, pamětí zařízení i časem uživatele. Řešením je servírovat obrázky v rozlišení odpovídajícím zobrazovaným rozměrům, a ne v rozlišení originálu.
Retina displeje a dvojnásobné rozlišení
Moderní smartphony používají displeje s vysokou hustotou pixelů, označované jako Retina nebo HiDPI. Tyto displeje zobrazují ostré obrázky při dvojnásobném nebo trojnásobném rozlišení oproti CSS pixelům. Fotografie určená pro kontejner o šířce 400 CSS pixelů by proto měla mít šířku 800 až 1200 fyzických pixelů pro ostré zobrazení na Retina displeji.
To ovšem neznamená, že je třeba nahrávat soubory v plném rozlišení z fotoaparátu. Fotografie o šířce 1200 pixelů správně zkomprimovaná na 150 kB splní oba požadavky: ostrý Retina displej i rychlé načítání na mobilním připojení.
Praktická čísla: co komprese JPEG přináší na mobilu
Typická produktová fotografie z fotoaparátu nebo dodaná od fotografa má 8 až 15 MB. Po správné kompresi klesne na 100 až 250 kB při zachování vizuální kvality dostatečné pro zobrazení na mobilním displeji. Úspora přesahuje 95 % původní velikosti.
Produktová stránka e-shopu s galerií šesti fotografií přenáší před kompresí 50 až 90 MB dat. Po komprimaci klesne stejná galerie na 600 kB až 1,5 MB. Na LTE připojení s rychlostí 20 Mbit/s se galerie před kompresí načítá 20 až 36 sekund, po kompresi pod jednu sekundu. Na 3G připojení je rozdíl ještě dramatičtější.
Jak začít se zmenšením JPEG souborů pro mobilní uživatele
Optimalizace JPEG souborů pro mobilní web nevyžaduje technické znalosti ani instalaci softwaru. Nástroj pro zmenšení JPEG souborů online zpracuje soubory přímo v prohlížeči, funguje stejně na počítači i na telefonu a výsledek nabídne ke stažení okamžitě po zpracování.
Doporučený postup pro správce webu je zhruba tento:
- Nastavte cílovou velikost souboru podle typu fotografie: produktové fotky do 150 kB, bannery a hlavní vizuály do 400 kB, náhledy a miniatur ay do 40 kB.
- Před každým nahráním nových fotografií proveďte kompresi mimo CMS. Automatická komprese v redakčních systémech je zpravidla méně efektivní než cílená optimalizace.
- Pravidelně auditujte stávající fotografie nástrojem PageSpeed Insights a identifikujte stránky, kde nekomprimované soubory stále zpomalují načítání.
- Implementujte atribut srcset, který umožňuje prohlížeči stáhnout obrázek v rozlišení odpovídajícím konkrétnímu zařízení, nikoliv nejvyšší dostupnou verzi pro všechna zařízení najednou.
Myslíte na mobilní uživatele při přípravě fotografií pro web pravidelně, nebo optimalizujete obrázky primárně s ohledem na desktopové zobrazení?
