Lehký obrázek nevzniká jen posunutím posuvníku kvality dolů. Nejprve potřebujete vhodné rozměry, potom formát a teprve pak kompresi. Příliš velký soubor zpomaluje načítání; příliš malý obrázek nebo nečitelný text zase zhoršují použitelnost. Cílem je rozumná rovnováha pro konkrétní místo na stránce.
Rozměry v pixelech nejsou velikost souboru
Údaj 2400 × 1350 popisuje počet obrazových bodů. Údaj v bajtech popisuje objem uložených dat. Dva soubory se stejnými rozměry mohou mít velmi rozdílnou velikost podle obsahu, formátu a nastavení. Změna rozměrů a komprese jsou dva samostatné zásahy.
Nejdřív zjistěte, jak široký obrázek čtenář skutečně uvidí. Pro větší displeje a vyšší hustotu pixelů mohou být potřeba větší varianty; pro mobil má prohlížeč dostat odpovídající menší soubor. Není vhodné posílat každému zařízení jeden obří originál a pouze ho vizuálně zmenšit.
Vlastní měření na stejném obrazci
Pro tento návod jsme vytvořili neosobní testovací obrazec: barevný přechod, jemný šum, světlý panel a velký český nápis. Nejde o převzatou fotografii ani o měření všech možných obrázků. Soubor vznikl pomocí knihovny Pillow; při zmenšení byl použit filtr Lanczos.
- JPEG 2400 × 1350, nastavení kvality 95: 782 859 bajtů.
- JPEG 1200 × 675, kvalita 80: 57 100 bajtů.
- WebP 1200 × 675, kvalita 80: 14 554 bajtů.
První porovnání současně mění rozměry i kvalitu, a proto neizoluje samotný účinek komprese. Poslední dvě varianty mají stejné rozměry, ale číslo kvality 80 není napříč formáty zárukou stejného vzhledu. Výsledky platí pro tento obrazec a tato nastavení, nikoli jako univerzální příslib úspory. U fotografie obličeje, screenshotu nebo jemného písma mohou vyjít jinak.
Jak vybrat formát a nepokazit čitelnost
WebP podporuje ztrátové i bezztrátové ukládání. Vhodný režim záleží na obsahu; technické rozdíly vysvětluje dokumentace WebP na web.dev. U fotografií hledejte viditelné mapy v přechodech a rozpad detailů. U návodů kontrolujte především písmo, čísla a okraje ikon.
Náhled posuzujte v zamýšlené velikosti na stránce a také při zvětšení. Jestli je popisek drobný už v originálu, agresivní komprese jej nezachrání. Raději upravte samotnou ilustraci nebo přesuňte důležitý údaj do běžného textu článku.
Kontrolní postup před nahráním
- Uchovejte původní soubor a pracujte s kopií.
- Zvolte rozměry podle použití, ne podle rozlišení fotoaparátu.
- Porovnejte několik exportů; zapisujte pixely i bajty.
- Zkontrolujte ostré hrany, drobný text a barevné přechody.
- Po nahrání otevřete veřejnou stránku a ověřte skutečné načtení obrázku.
Prohlížeči pomáhá správně uvedená šířka a výška, aby si předem vyhradil místo. Obrázky níže na stránce lze načítat odloženě; hlavní viditelný obrázek tím ale nezdržujte. Souvislosti vysvětluje přehled výkonu obrázků na web.dev.
Komprese sama o sobě neprokazuje odstranění citlivých údajů. Před zveřejněním fotografie projděte také kontrolu polohy a metadat. Při plánování více webů započítejte i náhledy, které systém vytváří automaticky; souvisí s tím kapacita hostingu a počet souborů.
