Kdy a proč používat SVG, WebP, PNG a JPEG: Komplexní průvodce

Pojďme si podrobněji rozebrat jednotlivé formáty, jejich výhody, nevýhody a praktické příklady použití, abyste z nich vytěžili maximum.

SVG (Scalable Vector Graphics)

SVG je formát založený na vektorové (křivkové) grafice. Místo toho, aby uchovával informace o jednotlivých pixelech, pracuje s matematickými tvary (čáry, kruhy, polygony).

Kdy je SVG nejlepší volbou?

1. Loga a ikony: Loga e-shopů by měla být ostrá a vypadat dobře na všech zařízeních. SVG zajistí, že logo bude vždy perfektní, ať už na monitoru, nebo v mobilním zobrazení.
2. Dekorativní prvky: SVG se hodí i pro grafické detaily, jako jsou šipky, ikonky filtrů, nebo třeba vektorové ilustrace jako sněhové vločky.
3. Animace: SVG lze animovat pomocí CSS nebo JavaScriptu, což umožňuje vytvářet interaktivní efekty. Příkladem může být načítací animace při přidávání produktu do košíku.

Proč používat SVG?

• Bezztrátová kvalita při libovolném zvětšení (díky matematickému výpočtu křivek).
• Nízká velikost souboru (zvlášť u velkého obrázku).
• Možnost přímé úpravy pomocí kódu (při tmavém a světlém režimu, či motto podle ročního období).

Kdy SVG nepoužívat?

Pro fotografie nebo složitější obrázky. Tyto soubory by byly zbytečně velké.

WebP – Moderní formát pro rychlé načítání

WebP je formát obrázků vyvinutý společností Google, který často nahrazuje JPEG a PNG díky lepší kompresi a podpoře průhlednosti.

Kdy je WebP ideální?

1. Transparentní obrázky: Skvělá alternativa k PNG, které podporuje průhledné pozadí a minimalizuje velikost souboru. Například produktové fotografie bez pozadí, které zrychlí načítání e-shopu.
2. Fotografie: Díky skvělé kompresi WebP šetří datový přenos a zrychluje načítání, to neplatí jen pro PNG, ale i pro JPG. Je vhodné je použít například při ilustračních obrázcích na blogu.
3. Animované prvky: WebP podporuje animace a může nahradit GIF s menší velikostí souboru.

Kdy WebP nemusí být nejlepší?

Pokud potřebujete vysokou kvalitu pro galerie s důrazem na detaily, jako je tomu například na webu Megapixel, doporučujeme spíše JPEG nebo PNG jako obrázek ke stažení.

Mýty a obavy ohledně WebP

Protože je WebP stále relativně nový formát, mnozí jej mohou vnímat jako riziko kvůli historicky omezené podpoře v prohlížečích a na starších zařízeních. Jak je to tedy dnes?

1. Podpora prohlížečů: Dříve byl WebP podporován hlavně v moderních prohlížečích, jako jsou Chrome a Edge. V roce 2024 však WebP podporují téměř všechny aktuální prohlížeče, včetně Firefoxu a Safari na macOS i iOS.
2. Podpora na telefonech: Prakticky všechny moderní chytré telefony dnes WebP podporují.

PNG (Portable Network Graphics)

PNG je rastrový formát (popsán pomocí jednotlivých barevných bodů/pixelů), který stále nachází své využití u specifických typů obrázků. Velkou výhodou oproti JPG je možné použití s průhledným pozadím, stejně jako u WebP. Dnes je méně využívaným formátem, zejména u fotografií, kde je zbytečně velký a neefektivní.

Kdy použít PNG?

1. Maximální kvalita: Díky vysoké kvalitě 24bitové PNG, které podporuje různé úrovně průhlednosti, lze tento formát využít na webu především pro obrázky ke stažení, kde je kladen důraz na maximální kvalitu a detaily. Pro přímé zobrazení na webu se však kvůli větší velikosti souborů nedoporučuje.
2. Průhlednost: Oproti JPG podporuje průhlednou barvu, nicméně často je lepší variantou WebP.

Nevýhody PNG:

Větší velikost souboru oproti WebP.

JPEG/JPG (Joint Photographic Experts Group)

JPEG zůstává nejoblíbenějším formátem pro fotografie. Díky ztrátové kompresi nabízí dobrou kvalitu při malé velikosti souboru.

Kdy zvolit JPEG?

1. Fotografie: Ideální pro velké fotografie bez průhlednosti.
2. Bannery: Pokud vytváříte bannery, JPEG zajistí menší velikost než PNG.

Nevýhody JPEG:

Ztrátová komprese může vést ke snížení kvality.

Jak optimalizovat obrázky na webu?

1. Používejte správný formát: Vyberte formát podle typu obrázku. SVG pro ikony, WebP pro transparentní obrázky a fotografie, PNG nebo JPEG pro detailní snímky.
2. Vkládejte správnou velikost obrázku: Pro obrázek 100×200 px nenahrávejte zbytečně velký ani malý soubor. Pro Retina displeje připravte dvojitou velikost.
3. Komprimujte obrázky: Neukládejte obrázky pro web ve 100% kvalitě nebo využijte nástroje jako TinyPNG, které sníží velikost souboru, aniž by došlo k výrazné ztrátě kvality.
4. Retina a neretina obrázky: Pro obrázky s maximální ostrostí, rychlostí načítání a přizpůsobení různým zařízením doporučujeme připravit varianty pro Retina a neretina displeje ve správných formátech. Více o této problematice najdete v našem článku Retina a neretina obrázky: Jak správně používat oba tipy při tvorbě webu.

Zde je malý cheat sheet, který vám pomůže vybrat správnou formu vašeho obrázku.

Závěr

Správný výběr formátu obrázku může zásadně ovlivnit rychlost načítání a uživatelský zážitek na vašem webu. S pomocí moderních formátů, jako je WebP, můžete výrazně zlepšit výkon webu.

Nezapomeňte optimalizovat obrázky a pokud chcete zajistit maximální ostrost a přizpůsobení různým zařízením, připravte varianty pro Retina a neretina displeje.