Formáty obrázků: Porovnání WebP, PNG, JPG a SVG
Výběr nesprávného formátu obrázku může zpomalit načítání stránky nebo rozostřit grafiku. Zde je srovnání moderních webových formátů z hlediska komprese, průhlednosti a ostrosti.
Vaše soubory jsou zpracovávány výhradně ve vašem webovém prohlížeči pomocí HTML5 Canvas a WebAssembly. Z vašeho zařízení neopustí data ani v nejmenším.
Přeskočte fronty pro nahrávání a stahování. Konverze probíhají lokálně plnou rychlostí hardwaru vašeho zařízení bez serverových omezení.
V souladu s oficiálními specifikacemi ISO, W3C a IETF pro zaručení kompatibility výstupu v moderních operačních systémech.
Porovnání formátů a technické specifikace
| Výstupní formát | MIME typ | Specifikace | Typ |
|---|---|---|---|
| PNG Obrázek | image/png | W3C-PNG | Přenositelná síťová grafika |
| JPG Obrázek JPEG | image/jpeg | ITU-T-T81-JPEG | Kompresní formát pro fotografickou grafiku Joint Photographic Experts Group |
| WebP Obrázek | image/webp | RFC-6386-VP8 | Moderní obrazový formát WebP od společnosti Google |
| SVG Vektorový formát | image/svg+xml | W3C-SVG | Škálovatelná vektorová grafika |
| HEIC Fotografie | image/heic | ISO-IEC-23008-12-HEIF | Vysoce efektivní kontejner pro obrázky |
| AVIF Obrázek | image/avif | AOMEDIA-AV1-AVIF | Obrazový formát AV1 |
| PSD Photoshop Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Document |
| PSB Photoshop Large Document | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop Large Document |
| WMF Windows Metafile | image/x-wmf | MS-WMF-SPEC | Windows Metafile Vector Format |
| EMF Enhanced Metafile | image/x-emf | MS-EMF-SPEC | Enhanced Metafile Vector Format |
| JFIF Image | image/jpeg | ITU-T-T81-JPEG | JPEG File Interchange Format |
| TGA Truevision | image/x-tga | TGA-SPEC | Pokročilý rastrový formát Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Technické specifikace a přehled kodeků
Rychlé rozhodovací pravidlo pro formáty
Pro moderní weby použijte WebP nebo AVIF (o 30 % menší než JPEG s podporou průhlednosti). JPG použijte pro fotografie, kde nevadí drobné nepostřehnutelné artefakty komprese. PNG použijte pro snímky obrazovky, UI grafiku a ilustrace vyžadující ostrý text. SVG použijte pro loga a ikony, které potřebují nekonečné škálování.
Rastrové vs. vektorové: Proč se SVG nikdy nerozostří
Rastrové obrázky (JPG, PNG, WebP) jsou mřížky pevných barevných pixelů - při přílišném přiblížení se rozmažou nebo zpixelovatějí. SVG je čistá matematika: ukládá matematické čáry, křivky a barvy, což umožňuje ikonám a ilustracím vykreslovat se ostře jako břitva na čemkoli od mobilních obrazovek po 8K displeje s nepatrnou velikostí souborů.
Mýtus: „Vyšší DPI znamená lepší kvalitu webového obrázku"
DPI (tečky na palec) je čistě instrukce pro fyzický tisk a webové prohlížeče ji zcela ignorují. Na telefonech a počítačových monitorech je ostrost obrázku určena výhradně rozměry v pixelech (např. 1920x1080) a hustotou zobrazení, nikoli vloženými metadaty DPI.
Alfa průhlednost: PNG vs. WebP
Tradiční JPG nemá vůbec žádnou podporu průhlednosti - průhledná pozadí se změní na plně bílá nebo černá. PNG přineslo čistou 8bitovou alfa průhlednost, ale WebP nyní poskytuje identickou kvalitu průhlednosti při až o 40 % menší velikosti souborů.
0 bajtů odesláno na externí servery. Veškeré zpracování probíhalo lokálně v sandboxu vašeho prohlížeče.