JPEG a PNG – jaký je rozdíl mezi formáty?

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 vydán v roce 2019 a 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 zrychlit načítání webu. Obrázky můžete „zesvětlit“ buď 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. Stránky, které navštěvujete, mohou mít také problémy 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 kanál jednoduše „ucpat“.

Článek vydaný v roce 2019

Obrázky na stránkách se mohou přizpůsobit jak rozlišení obrazovky zařízení pro správné zobrazení na mobilních zařízeních, tak obrazovkám s vysokým DPI pro detailnější zobrazení.

Možností implementace adaptivních obrazů je více, liší se složitostí implementace, kompatibilitou mezi prohlížeči a zátěží vytvořenou na internetovém připojení. Podívejme se na ty nejčastější.

Článek vydaný v roce 2019

Ukládání statických zdrojů (obrázky, skripty, styly) a neměnných stránek na straně prohlížeče může ušetřit čas načítání stránky, pokud uživatel navštíví web vícekrát nebo když navštíví více 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.

Existuje mnoho obrazových formátů, s některými se vývojáři setkávají neustále, s jinými velmi zřídka.

V tomto článku se podíváme na tři běžné formáty: JPEG, PNG a WebP. Každý z nich má své silné a slabé stránky. Výběr správného formátu závisí na specifikách vašeho webu a na obrázcích, se kterými pracujete. Pojďme zjistit vlastnosti formátů a v jakých případech je lepší je použít.

Obrazové formáty a jejich účel

JPEG

Formát JPEG (Joint Photographic Experts Group) byl vyvinut v roce 1992 pro kompresi fotografií nebo jiných obrázků s velkým množstvím barev a plynulými přechody mezi odstíny. Obrázky JPEG jsou na webu široce používány. Většina barevných obrázků, které vidíme na internetu, má přesně tento formát.

Obrázek ve formátu JPG.

Během procesu komprese obrazu jsou některá data odstraněna, aby se zmenšila velikost souboru. V tomto případě dochází k mírné ztrátě kvality, která však není okem příliš patrná.

Nevýhodou souborů JPEG je, že pokud změníte jejich velikost, mohou být rozmazané. Také jim chybí průhlednost, takže JPEGy nejsou vhodné pro tvorbu log. Soubory .jpg se používají pro obsah, dekorativní obrázky na pozadí webových stránek, také pro ilustrace produktů a mnoho dalšího.

PNG

Pro grafiku a loga se často používá obrázkový formát PNG (Portable Network Graphics). Na rozdíl od JPEG je komprese PNG bezeztrátová – obrázek si zachová původní kvalitu i po opakovaných úpravách nebo změně velikosti. Díky tomu je PNG vynikající volbou pro loga, ikony a další grafiku, která musí zůstat vždy ostrá.

Příklad obrázku PNG. Zdroj

Důležitou vlastností tohoto formátu je schopnost podporovat alfa kanál, tedy průhlednost. Navíc může mít různou míru: od neprůhledného obrazu po zcela průhledný. Tento formát je vhodné použít, pokud potřebujete průhledné pozadí, například pro logo nebo grafiku.

PNG má vrstvení. Vrstvením a změnou jejich průhlednosti můžete vytvářet zajímavé efekty se stíny a přechody.

Formát také podporuje různé barevné prostory, včetně RGB a indexovaných barev, což umožňuje uložit paletu barev. To je užitečné, když používáte PNG k ukládání obrázků s méně barvami, jako jsou ikony a loga.

Nevýhodou PNG je, že jeho soubor je obvykle větší než JPEG, což může vést k pomalejšímu načítání stránek.

WebP

Formát WebP byl vyvinut společností Google v roce 2010. Byl vytvořen za účelem zvýšení rychlosti načítání stránek a úspory místa na serveru.

WebP má oproti jiným formátům obrázků řadu výhod. Dokáže zmenšit velikost obrazového souboru o 25-35 % ve srovnání s JPEG při zachování kvality obrazu. WebP poskytuje podporu pro transparentnost, animaci a vícekanálové funkce. Díky tomu je formát ideální pro použití na webech, kde je důležitá rychlá doba načítání, jako jsou online obchody nebo weby s velkým množstvím obrázků.

Příklad obrázku WebP

Google nedávno vydal novou verzi formátu – WebP Lossless. Používá algoritmus, který umožňuje komprimovat obrázky bez ztráty kvality, zatímco předchozí verze používaly pouze ztrátovou kompresi.

✅ Pokud potřebujete pro rozvržení webu použít odlehčené obrázky, pak se doporučuje použít online převodníky pro převod do formátu WebP. Například:

1. Convertio je konvertor obrázků, který umožňuje převádět JPEG, PNG a další formáty do WebP.
2. Online-Convert je služba, která umožňuje převádět obrázky, videa, audio a další soubory do různých formátů, včetně WebP.
3. Squoosh je online aplikace pro optimalizaci obrázků, která také umožňuje ukládat obrázky ve formátu WebP.

Jak vybrat formát obrázku

Pro každý úkol si vyberte svůj vlastní formát obrázku. Pokud je důležité rychlé načítání nebo pracujete s fotografiemi nebo jinými vícebarevnými obrázky, pak je WebP nejvhodnější.

Pokud potřebujete zachovat kvalitu grafiky a log, pak je lepší použít PNG. Pro obrázky s velkým množstvím barev a hladkými barevnými přechody zvolte formát JPEG.

✅ Výběr formátu obrázku:

• definovat cíle webu a každého obrázku;
• Pro loga a grafiku s malými detaily doporučujeme použít formát PNG. WebP je vhodný i pro tyto účely;
• JPEG je vhodný pro dekorativní a barevné obrázky;
• Pokud je důležité rychlé načítání a velké množství vícebarevných obrázků, je lepší dát přednost WebP.

Související materiály:

• Přehled barevných formátů CSS
• Průsvitný přechod nad obrázkem pomocí čistého CSS
• Jak přidat obrázek na stránku
• Jak udělat z obrázku odkaz

Doctype je časopis o frontendu. Čtěte, poslouchejte a učte se s námi.