Jaký formát obrázků je pro web nejlepší?

Otázka na „nejlepší formát“ je nesprávná, dokud nevíte, o jaký obrázek jde. Web obsahuje několik velmi odlišných druhů obrázků a každý má jasného vítěze:

• Fotografie (produkty, lidé, místa): ztrátový formát. AVIF vytváří nejmenší soubory, WebP je bezpečná moderní výchozí volba a JPG je záloha, kterou dokáže zobrazit každý prohlížeč.
• Loga, ikony a ilustrace: SVG. Jde o vektorovou grafiku, takže zůstává ostrá při jakékoli velikosti na každé obrazovce a soubor bývá velmi malý. K rastrovému formátu se uchylte jen tehdy, když platforma SVG odmítá.
• Snímky obrazovky, grafika UI a cokoli s průhledností: PNG nebo bezztrátový WebP. Ploché barvy a ostré hrany jsou přesně tím, co bezztrátové formáty dobře komprimují.
• Krátké animace: animovaný WebP nebo AVIF namísto GIF, který je omezený na malou paletu a vytváří mnohem větší soubory.
• Favicon: soubor ICO, ideálně spolu s verzí SVG nebo PNG; přečtěte si, jak vytvořit favicon z obrázku.

Klasickou chybou je fotografie uložená jako PNG. PNG ukládá každý pixel bezztrátově, což je ideální pro logo, ale katastrofální pro fotografii: soubor naroste na několikanásobek velikosti JPG bez viditelného přínosu.

U fotografií záleží volba na tom, nakolik se můžete spolehnout na novější prohlížeče:

• AVIF komprimuje nejlépe: při běžné kvalitě pro web je přibližně o 50% menší než JPEG a o 20–30% menší než WebP, přičemž v případě potřeby podporuje HDR a široký barevný gamut. Chrome, Firefox i Safari ho zobrazují (Safari od verze 16.4, v roce 2023). Nevýhodou je pomalé kódování, zejména u velkých obrázků, a omezená podpora v programech pro stolní počítače a starších zařízeních.
• WebP je pragmatická výchozí volba: při stejné vizuální kvalitě je o 25–35% menší než JPEG, podporuje průhlednost a od roku 2020 jej podporují všechny běžné prohlížeče. Některé desktopové aplikace a starší nástroje ho stále neumějí otevřít, což je důležité u souboru předávaného grafikovi, nikoli u souboru poskytovaného návštěvníkům.
• JPG je univerzální záloha. Ze všech tří je nejméně efektivní, ale JPG uložený s kvalitou kolem 75–82 je na obrazovce obvykle nerozeznatelný od originálu a na webu ho dokáže zobrazit vše.

Nejlepší řešení poskytuje AVIF prohlížečům, které mu rozumějí, WebP ostatním a ponechává JPG pro cokoli staršího. Pokud chcete vybrat jen jeden formát, WebP se záložním JPG pokryje prakticky všechny uživatele. Přímá srovnání najdete v článcích WebP vs AVIF a WebP vs JPG; pro grafiku místo fotografií si přečtěte PNG vs JPG.

Jakmile znáte cílový formát, převod je rychlý a obrázek nikdy neopustí vaše zařízení. Převodník obrázků EditItAll běží celý v prohlížeči:

1. Otevřete převodník a přetáhněte do něj obrázky – jeden soubor nebo obsah celé složky. Dávky se zpracují společně.
2. Vyberte výstupní formát: WebP nebo AVIF pro fotografie, PNG pro grafiku vyžadující průhlednost. Pro běžné úlohy jsou připravené přímé možnosti: JPG na WebP, PNG na WebP, JPG na AVIF a PNG na AVIF.
3. Nastavte kvalitu. Pole pro cílovou velikost zde není: velikost je výsledkem. U každého souboru uvidíte velikost před zpracováním i po něm, takže posouvejte jezdec, dokud nebudou správně vypadat údaj i obrázek.
4. Stáhněte výsledky jednotlivě nebo jako jediný ZIP.

Nic se nenahrává – po načtení stránky se můžete odpojit od internetu a pokračovat v převádění – a z každého exportovaného obrázku se odstraní metadata EXIF a GPS, takže produktová fotografie nezveřejní místo svého pořízení. Vše je zdarma, bez účtu a vodoznaku. Už máte správný formát a potřebujete jen menší soubor? Přejděte rovnou na kompresor obrázků. Pokud platforma vyžaduje rastrovou verzi vektorového loga, nástroj SVG na PNG ho vykreslí v libovolné zvolené velikosti.

Výběr formátu má smysl, ale tři návyky ušetří více bajtů, než by kdy dokázal přechod z JPG na AVIF:

• Změňte rozměry podle velikosti, ve které obrázek skutečně zobrazujete. Fotografie z fotoaparátu je mnohonásobně širší než prostor, který na stránce vyplňuje, a každý z těchto nadbytečných pixelů se stáhne a zahodí. Nástroje EditItAll pro obrázky mají právě proto volitelný limit maximálního rozměru.
• Komprimujte jednou a z originálu. Každé ztrátové uložení odstraní o něco více detailů. Uchovejte originál, exportujte z něj kopii pro web a neukládejte opakovaně JPG jako WebP a následně jako AVIF.
• Moderní formáty poskytujte se zálohou. Nabídněte nejprve AVIF nebo WebP a starším prohlížečům umožněte použít záložní JPG nebo PNG, aby žádný návštěvník nikdy neviděl nefunkční obrázek.

Pokud vám zpráva o rychlosti doporučuje „efektivně kódovat obrázky“ nebo „poskytovat obrázky ve formátech nové generace“, znamená to přesně toto rozhodnutí: článek jak opravit upozornění na neefektivní kódování obrázků vás provede celým postupem a komprese JPEG pro web podrobně vysvětluje nastavení kvality. Další průvodce formáty najdete v kolekci převod obrázků.