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.

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.