Online optimalizátor obrázků na stránce, který zmenší JPG, PNG i GIF bez instalace programu

Online optimalizátor obrázků na stránce, který zmenší JPG, PNG i GIF bez instalace programu

Fotka nahraná rovnou z telefonu nebo z fotoaparátu má často několik megabajtů, přestože na stránce zabírá jen malou plochu obrazovky. Online optimalizátor obrázků na stránce řeší přesně tento nepoměr, tedy zmenšení souboru na rozumnou velikost bez nutnosti instalovat grafický program či cokoliv na server. Jeden z takových nástrojů najdete zde. Tento text vysvětluje, jak podobný nástroj v praxi funguje, na jakém principu zmenšuje data, a co se s nahranými soubory děje po dokončení zpracování.

Co online optimalizátor obrázků na stránce nabízí

Typický nástroj tohoto typu zvládá tři nejběžnější formáty používané na webu, tedy JPG, PNG a GIF, a umožňuje nahrát víc souborů najednou místo zpracování jednoho obrázku po druhém. Po nahrání se u každého souboru zobrazí náhled s posuvníkem, kterým lze porovnat verzi před úpravou a po ní, než se změna potvrdí a soubor stáhne.

Jak probíhá nahrání a zpracování souborů

Uživatel přetáhne obrázky do plochy v prohlížeči nebo je vybere přes klasický dialog pro výběr souborů. Zpracování začíná ihned po nahrání, takže náhled zmenšené verze je k dispozici během chvilky, ne až po ručním spuštění nějaké dávky. Pokud výchozí úroveň komprese nevyhovuje, jde ji u jednotlivého obrázku doladit posuvníkem a teprve poté změnu potvrdit. Nahrát lze najednou obvykle až kolem dvaceti souborů a formáty je možné v jedné dávce libovolně kombinovat, server totiž každý soubor rozpozná a zpracuje zvlášť podle jeho typu. Hotové soubory se dají stáhnout jednotlivě, nebo všechny najednou v podobě jednoho archivu.

Ztrátová komprese jako základní princip

Většina online optimalizátorů pracuje se ztrátovou kompresí, tedy s postupem, který z obrázku odstraní data považovaná za méně podstatná pro lidské oko, a tím zmenší výsledný soubor. Míra ztráty se odvíjí od zvolené agresivity komprese, čím menší má výstup být, tím víc kvality se obvykle obětuje. Doporučené datové limity pro jednotlivé typy obrázků na webu, od tlačítek přes fotografie až po ilustrace, přehledně shrnuje tento starší materiál o přípravě obrázků pro web, podle kterého se ještě donedávna za rozumné maximum u běžné fotografie považovalo kolem 250 kilobajtů.

Kdy dává ztrátová komprese smysl a kdy ne

Pro fotografie funguje ztrátová komprese téměř vždy dobře, protože drobná ztráta detailů zůstane pro běžného návštěvníka nepostřehnutelná. U grafiky s ostrými hranami, textem či malým počtem barev naopak stejná míra komprese často vytvoří viditelné artefakty kolem přechodů. Pro takový obsah se víc hodí bezeztrátový přístup, i za cenu o něco větší výsledné velikosti souboru.

Proč samotná komprese nestačí bez lazy loadingu

Zmenšení datového objemu obrázku řeší jen jednu polovinu problému, tou druhou je pořadí, ve kterém prohlížeč soubory vůbec stahuje. I dokonale zkomprimovaný obrázek hluboko pod první obrazovkou zpomaluje načtení stránky, pokud se stahuje hned na začátku spolu se vším ostatním. Kombinaci komprese s odloženým načítáním obrázků mimo první viewport podrobně rozebírá tento článek o zrychlení webu pomocí obou technik dohromady, podle kterého společné nasazení obou postupů dokáže zkrátit dobu načítání i o desítky procent.

Co se děje s nahranými soubory po zpracování

Online nástroje tohoto typu obvykle nahrané soubory po určité době automaticky odstraní ze serveru, často už po hodině od nahrání, což omezuje dobu, po kterou tam data vůbec zůstávají. Původní soubor přitom zůstává nedotčený v zařízení uživatele, takže je možné se k němu kdykoliv vrátit, pokud výsledek komprese nevyhovuje. Kdo pracuje s citlivějším obsahem, měl by si dobu uchování dat a zásady mazání u konkrétního nástroje ověřit ještě předtím, než soubory nahraje.

Formát obrázku jako další vrstva úspory

Vedle komprese v rámci stejného formátu existuje i možnost převést obrázek na modernější formát, třeba WebP, který při srovnatelné kvalitě obvykle ušetří čtvrtinu až třetinu datového objemu oproti JPEG či PNG. Rozdíl mezi kompresí a změnou formátu, i doporučenou úroveň kvality kolem 70 až 90 procent u ztrátového zápisu, popisuje tento materiál o formátu WebP a úsporách datového objemu. Obě úpravy se dají kombinovat, nejdřív zvolit vhodný formát, a teprve pak doladit míru komprese.

Nejčastější chyby v praxi

V praxi se u online komprese obrázků opakuje několik podobných problémů:

  1. Nahrání fotky přímo z fotoaparátu bez jakékoli úpravy, přestože na stránce zabírá jen zlomek původního rozlišení.
  2. Použití agresivní ztrátové komprese i u grafiky s ostrými hranami, kde vzniknou viditelné artefakty.
  3. Komprese obrázku bez následného nasazení odloženého načítání, takže se úspora projeví jen částečně.
  4. Nahrání citlivého obsahu do online nástroje bez ověření, jak dlouho a za jakých podmínek si soubory na serveru ponechává.

Co si z tohoto postupu odnést

Zmenšení obrázku před nahráním na web patří mezi úpravy, které nevyžadují žádnou instalaci ani technické znalosti, přesto se dotýkají rychlosti stránky i pohodlí návštěvníka na pomalejším připojení. Volba vhodné míry komprese podle typu obsahu a případná kombinace s modernějším formátem obrázku dohromady dokážou snížit datový objem stránky o výraznou část, aniž by byl na první pohled znát rozdíl v kvalitě.

Kontrolujete si velikost obrázků před nahráním na web pravidelně, nebo se k jejich zmenšení dostanete až ve chvíli, kdy si toho někdo všimne?

Marie Chudá