Formáty fotek a grafiky vhodné pro webové stránky

Základní formáty pro web

JPEG/JPG

Byl vyvinut v roce 1992 skupinou Joint Photographic Experts Group (odtud zkratka JPEG). Byl navržen specificky pro digitální fotografie kdy úložný prostor byl velmi omezený a kompresí řešil problém s ukládáním a přenosem fotografií v době pomalého internetu a drahých paměťových médií. JPEG používá tzv. ztrátovou kompresi založenou na tom, jak lidské oko vnímá obraz (odstraňuje detaily, které lidské oko hůře vnímá). Při nastavení 50 - 60% kvality většina lidí nepozná rozdíl od originálu. Jeho výhodou je tedy malá velikost souboru, je vhodný pro fotografie a obrázky s mnoha barvami, nepodporuje ale průhlednost a je potřeba počítat s tím že jde o ztrátovou kompresi (při každém uložení se ztrácí kvalita).

Použití:

Je vhodný na fotografie, složité ilustrace, obrázky s přechody barev. Používaná přípona je .jpg nebo .jpeg a do poručená velikost je maximálně 1-2 MB pro velké fotografie, ideálně méně než 500 KB.

GIF

Vznikl ve společnosti CompuServe v roce 1987 jako první běžně používaný formát obrázků na internetu. Měl umožnit sdílení barevných obrázků v době, kdy většina internetového obsahu byla textová. GIF způsobil v 90. letech "patentové války", protože jeho kompresní algoritmus LZW byl patentován. To vedlo k vytvoření formátu PNG. Navzdory omezením a stáří formátu, GIF prožil renesanci díky sociálním sítím a meme kultuře. Jeho výhodou je podpora jednoduchých animací a podpora průhlednosti, nevýhodou je omezená barevná paleta (256 barev) a větší velikost souborů u animací.

Použítí:

Jednoduché animace, velmi jednoduché ikony. Typická přípona je .gif, velikost statických gifů je do 100 KB a u animovaných je to 1 MB (pro krátké animace).

PNG

Byl vytvořen v roce 1996 jako svobodná alternativa k formátu GIF, když se objevily patentové spory ohledně kompresního algoritmu GIFu. Původně měl nahradit GIF formát formátem bez patentových omezení a s lepší podporou barev a průhlednosti. Zkratka PNG byla původně zamýšlena jako rekurzivní "PNG's Not GIF". Formát používá bezztrátovou kompresi, což znamená, že obrázek lze stokrát uložit a vždy bude stejně kvalitní. Jeho nevýhodou je větší velikost souboru než JPEG

Použití:

Loga, ikony, obrázky s průhledným pozadím, grafika s textem. Typická přípona je .png a doporučená velikost je do 1 MB, ideálně méně než 300 KB

WebP

Jde o formát společnosti Google z roku 2010, jako formát speciálně navržený pro web, měl snížit velikost souborů na webu a tím zrychlit načítání stránek při zachování vysoké obrazové kvality. WebP kombinuje nejlepší vlastnosti JPEG (malá velikost) a PNG (průhlednost) a přidává podporu animací jako GIF. Může být až o 34% menší než JPEG se stejnou vizuální kvalitou.

Použití:

Jde o typický formát vhodný na webové stránky, přípona je .webp a doporučená velikost je do 500 KB

SVG

Vznikl v konsorciu W3C v roce 1999, standardizován byl v roce 2001. Měl umožnit webdesignerům pracovat s vektorovou grafikou, která se může škálovat bez ztráty kvality, a poskytovat animace a interaktivitu. SVG soubory jsou vlastně XML dokumenty, které popisují grafiku pomocí matematických vztahů místo jednotlivých bodů. To znamená, že je lze upravovat v textovém editoru a lze je stylovat pomocí CSS. Vektorový formát (lze libovolně zvětšovat bez ztráty kvality), má velmi malou velikost souboru ale není vhodný pro fotografie, pouze pro vektorovou grafiku.

Použití:

Je vhodný na loga, ikony, jednoduché ilustrace, grafy, infografiky typická přípona je .svg a doporučená velikost je typicky pod 100 KB

Moderní formáty (novější)

AVIF

• Historie: Vyvinut v roce 2019 firmou Alliance for Open Media jako součást formátu AV1.
• Původní účel: Poskytnout vysoce efektivní formát pro kompresi obrázků, který by byl otevřený a bez licenčních poplatků.
• Zajímavost: AVIF dosahuje až o 50% lepší komprese než JPEG při zachování stejné vizuální kvality a byl rychle adoptován společnostmi jako Google a Netflix.
• Výhody: Výborná komprese (menší než WebP), vysoká kvalita
• Nevýhody: Omezená podpora v prohlížečích (zatím)
• Kdy použít: Pokročilé webové projekty s možností fallbacku na jiné formáty
• Typická přípona: .avif

HEIF/HEIC

• Historie: Vyvinut skupinou MPEG v roce 2015, popularizován firmou Apple, která ho začala používat jako výchozí formát fotografií v iOS 11 (2017).
• Původní účel: Nahradit JPEG efektivnějším formátem pro ukládání fotografií zejména na mobilních zařízeních.
• Zajímavost: Formát HEIC ukládá fotografie pořízené na iPhone a zabírá přibližně polovinu místa při stejné nebo lepší kvalitě než JPEG. Používá stejný kompresní algoritmus jako video formát HEVC (H.265).
• Výhody: Lepší komprese než JPEG při zachování kvality
• Nevýhody: Omezená podpora ve webových prohlížečích
• Kdy použít: Zatím není běžně používán pro web
• Typická přípona: .heic

Doporučení pro přípravu obrázků pro web

Fotografie

1. Formát: JPEG nebo WebP
2. Rozlišení: Maximálně 2000px na šířku (pro běžné použití stačí 1200-1500px)
3. Komprese: Střední až vysoká (60-80% kvality)
4. Barevný profil: sRGB

Loga a ikony

1. Formát: SVG (ideálně) nebo PNG s průhledností
2. Rozlišení: Pro PNG alespoň 2x větší než potřebná zobrazovací velikost (pro retina displeje)

Produktové obrázky

1. Formát: JPEG nebo WebP
2. Pozadí: Ideálně bílé nebo průhledné (PNG)
3. Rozlišení: Konzistentní pro všechny produkty
4. Poměr stran: Ideálně stejný pro všechny produkty ve stejné kategorii

Ilustrace a grafika

1. Formát: SVG pro vektorovou grafiku, PNG pro komplexnější ilustrace
2. Průhlednost: Zachovat u PNG pokud je třeba

Jak připravit obrázky pro web

Základní workflow:

1. Ořízněte obrázek na požadovaný rozměr a poměr stran
2. Upravte jas, kontrast a další parametry dle potřeby
3. Uložte v příslušném formátu s optimálním nastavením komprese
4. Zkomprimujte pomocí specializovaných nástrojů

Kontrolní seznam před nahráním na web

• Je obrázek v správném formátu pro daný účel?
• Má obrázek vhodnou velikost a rozlišení?
• Byl obrázek zkomprimován?
• Jsou zachována autorská práva k obrázku?
• Má obrázek správný název souboru (bez diakritiky, mezer a speciálních znaků)?
• Jsou obrázky konzistentní s ostatními na webu (styl, kvalita, rozměry)?

Nevhodné formáty pro web

RAW

• Historie: První digitální RAW formáty se objevily v druhé polovině 90. let s rozvojem digitálních fotoaparátů. Každý výrobce vyvinul svůj vlastní formát.
• Původní účel: Zachovat veškerá surová data ze snímače fotoaparátu bez jakéhokoliv zpracování pro maximální flexibilitu při pozdějších úpravách.
• Zajímavost: Formát DNG (Digital Negative) byl vyvinut firmou Adobe v roce 2004 jako pokus o standardizaci RAW formátů. Přestože je dostupný všem výrobcům, mnoho z nich stále používá své proprietární formáty. RAW soubory lze považovat za "digitální negativy", které obsahují mnohem více informací než vyvolaná fotografie.
• Co to je: Surový formát dat z fotoaparátu, obsahující minimálně zpracovaná data ze snímače
• Výhody: Maximální kvalita a flexibilita pro pozdější úpravy, zachování všech původních informací
• Nevýhody:
  • Extrémně velké soubory (20-50 MB i více na jeden snímek)
  • Žádná podpora v webových prohlížečích
  • Vyžaduje speciální software pro zobrazení a zpracování
  • Každý výrobce fotoaparátů používá vlastní formát RAW (.CR2 - Canon, .NEF - Nikon, .ARW - Sony, atd.)
• Typické přípony: .raw, .cr2, .nef, .arw, .dng a mnoho dalších
• Proč není vhodný pro web:
  1. Webové prohlížeče neumí RAW soubory zobrazit
  2. Velikost souborů by dramaticky zpomalila načítání webových stránek
  3. Pro koncového uživatele nepřináší žádnou výhodu oproti optimalizovaným formátům
  4. Zbytečně zatěžuje datové přenosy a hosting

Poznámka: RAW formáty jsou skvělé pro archivaci, profesionální fotografickou práci a post-processing, ale pro publikaci na web vždy exportujte do vhodného webového formátu (JPEG, WebP).