JPEG a PNG jsou dva hlavní digitální grafické formáty používané pro obrázky na webových stránkách. V některých případech je lepší použít JPEG a v jiných je lepší použít PNG.
formát JPEG
JPEG (neboli JPG) — je formát obrázku, který používá ztrátovou kompresi a nepodporuje průhlednost. Umožňuje upravit úroveň kvality uloženého obrázku – při snížení úrovně kvality se odstraní některá data, aby se zmenšila velikost souboru – vizuálně je patrné, že jsou odstraněny detaily a do obrázku je přidán šum, ale velikost se stává kompaktnější. JPG může poskytnout kompresi 2:1 nebo 100:1 v závislosti na nastavení, ale kvalita je přímo úměrná kompresnímu poměru. Název formátu je zkratkou pro Joint Photographic Experts Group.
JPEG podporuje miliony barev (24bitové) a je vhodný pro složité obrázky, existuje podpora 24bitových barevných prostorů RGB a CMYK a také 8bitové stupně šedi. Prostory CMYK a stupně šedi se však používají poměrně zřídka a jejich podpora vyvolává stížnosti.
JPEG má také integrovanou podporu EXIF , která umožňuje ukládat metadata, například: výrobce a model použitého fotoaparátu, rychlost závěrky, clonu a světelnou citlivost použitou při fotografování, rozlišení snímku, nastavení vyvážení bílé, ohniskovou vzdálenost (včetně ekvivalentní ), použití blesku, matice velikostí, datum a čas pořízení, zeměpisné souřadnice a adresa místa pořízení.
Použité přípony souborů jsou .jpg a .jpeg (fungují identicky).
Z praktického hlediska je JPEG optimální pro obrázky s velkým počtem barev, jako jsou fotografie, a také pro další obrázky, které mají plynulé barevné přechody – přechody a stíny.. JPEG není vhodný pro text, loga, grafiku a další ilustrace s ostrými linkami a omezenými barvami.
formát PNG
PNG — je obrazový formát, který pracuje s plnobarevnými obrázky, používá bezztrátovou kompresi a umožňuje zachování průhlednosti. Není možné upravit kvalitu ukládání v PNG, můžete však upravit uložený obrázek tak, abyste dosáhli minimální velikosti souboru: k tomu můžete snížit počet barev v obrázku. Název formátu je zkratka pro Portable Network Graphics.
PNG podporuje barevnou hloubku až do 48 bitů, ale častěji se používá 24bitová varianta. Existuje také formát PNG 8 – je kompaktnější než PNG 24, ale je vhodný pouze pro obrázky s velmi omezeným počtem barev: 256 je maximum. Při použití PNG 8 pro obrázky s velkým počtem barev bude komprese ztrátová a způsobí efekt posterizace.
PNG nepodporoval EXIF až do roku 2017, ale poté byla jeho podpora implementována ve standardu. PNG se ve fotografii používá jen zřídka – JPEG je vhodnější pro ukládání kompaktních souborů a pro profesionální práci jsou vhodnější formáty RAW DNG nebo TIFF.
PNG 24 a PNG 8 používají přípony souborů .png, použitá bitová hloubka je zaznamenána v metadatech souboru a není určena příponou.
Z praktického hlediska je PNG 24 optimální pro obrázky s malým počtem barev, jako jsou ikony, diagramy, kresby, snímky obrazovky, infografika a text. Pokud má obrázek méně než 256 barev, je možná ještě efektivnější komprese v PNG 8. PNG je vhodný i pro obrázky s průhledností. PNG není příliš vhodný pro fotografie a jiné složité obrázky, protože jiné formáty (stejný JPEG) umožňují získat výrazně menší velikost souboru se stejnou kvalitou obrazu.
Souhrn. JPEG a PNG – jaký formát je nejlepší použít?
Využijte přednosti každého formátu k dosažení optimálních výsledků.
Fotografie a obrázky s velkým množstvím barev, stínů a přechodů je nejlepší uložit jako JPEG. Je však třeba si uvědomit, že kompresní algoritmus JPEG komprimuje obrázky se ztrátou kvality (tento parametr je konfigurovatelný).
Ikony, diagramy, obrázky s velkým množstvím textu a také obrázky s průhledností se nejlépe ukládají do PNG. Kompresní algoritmus PNG komprimuje obrázky bez ztráty kvality.
Kromě JPEG a PNG se při vývoji webu používají i další moderní obrazové formáty, které JPEG a PNG předčí, pokud jde o možnosti komprese a některé další parametry.
Článek aktualizován v roce 2025
Výběr správného formátu obrázku je klíčovým aspektem optimalizace webových stránek. Ovlivňuje rychlost stahování, kvalitu obsahu a uživatelskou zkušenost. Podívejme se na oblíbené formáty podporované moderními prohlížeči, jejich funkce a oblasti použití.
Článek vydaný v roce 2025
Komprese obrázků je jedním ze způsobů, jak urychlit načítání webových stránek. Obrázky můžete „odlehčit“ zmenšením jejich fyzické velikosti v pixelech nebo optimalizací parametrů ukládání. Na „širokých“ kanálech velikost obrázků na webu příliš neovlivňuje rychlost načítání webu, ale pro uživatele prohlížející si web přes mobilní internet (EDGE nebo 3G) mohou být velké obrázky problémem. Na navštívených webech se mohou také vyskytnout potíže s načítáním kanálu serveru – neoptimalizované obrázky mohou výrazně ovlivnit objem provozu (to je problém, pokud je placený) nebo jednoduše „ucpat“ kanál.
Článek vydaný v roce 2019
Obrázky na webových stránkách lze přizpůsobit rozlišení obrazovky zařízení pro správné zobrazení na mobilních zařízeních a také obrazovkám s vysokým DPI pro detailnější zobrazení. Existuje několik možností implementace adaptivních obrázků, které se liší složitostí implementace, kompatibilitou napříč prohlížeči a zátěží internetového připojení. Podívejme se na ty nejběžnější.
Článek vydaný v roce 2019
Ukládání statických zdrojů (obrázků, skriptů, stylů) a neměnných stránek do mezipaměti na straně prohlížeče může ušetřit dobu načítání stránky, pokud uživatel navštíví web vícekrát nebo si během návštěvy zobrazí několik stránek, které používají stejné zdroje.
Článek vydaný v roce 2014
Vaše stránky se mohou načítat a zobrazovat rychleji, pokud budete postupovat podle těchto pokynů pro optimalizaci označení HTML; bez toho bude rychlost načítání a vykreslování pomalejší.
Článek vydaný v roce 2014
Čas potřebný k načtení a vykreslení webové stránky v prohlížeči lze výrazně zkrátit, pokud použijete následující tipy.
Článek vydaný v roce 2014
Váš web může běžet rychleji, pokud se budete řídit těmito doporučeními pro optimalizaci kódu JS. Pokud tak neučiníte, stránka se na straně klienta nezobrazí dostatečně rychle.
Článek vydaný v roce 2014
Stává se, že některý obsah stránky nepotřebuje každý nebo ne vždy, ale na generování tohoto materiálu nebo na jeho přenos je vynaloženo mnoho zdrojů. V tomto případě má smysl načítání „zleštit“, tedy negenerovat a nenačítat informace do prohlížeče, dokud nejsou potřeba.
