Porovnanie obrazových formátov: WebP, PNG, JPG a SVG
Výber nesprávneho obrazového formátu môže spomaliť načítanie stránky alebo rozmazať vašu grafiku. Pozrite si, ako sa moderné webové formáty porovnávajú v oblasti kompresie, priehľadnosti a ostrosti.
Vaše súbory sa spracovávajú výhradne vo vašom webovom prehliadači pomocou HTML5 Canvas a WebAssembly. Žiadne dáta nikdy neopustia vaše zariadenie.
Preskočte fronty na nahratie a stiahnutie. Konverzie prebiehajú lokálne plnou hardvérovou rýchlosťou zariadenia bez serverových limitov.
V súlade s oficiálnymi špecifikáciami ISO, W3C a IETF, čo zaručuje kompatibilitu výstupov v moderných operačných systémoch.
Porovnanie formátov a technické špecifikácie
| Výstupný formát | MIME typ | Špecifikácia | Typ |
|---|---|---|---|
| PNG obrázok | image/png | W3C-PNG | Raster s podporou priehľadnosti Portable Network Graphics |
| JPG JPEG obrázok | image/jpeg | ITU-T-T81-JPEG | Komprimovaný rastrový obrázok Joint Photographic Experts Group |
| WebP obrázok | image/webp | RFC-6386-VP8 | Moderný obrazový formát Google WebP |
| SVG vektor | image/svg+xml | W3C-SVG | Škálovateľná vektorová grafika |
| HEIC fotografia | image/heic | ISO-IEC-23008-12-HEIF | Kontajner obrázkov s vysokou efektivitou |
| AVIF obrázok | 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ý raster Truevision |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Technické špecifikácie a prehľad kodekov
Pravidlo pre rýchle rozhodnutie o formáte
Používajte WebP alebo AVIF pre moderné webové stránky (sú o 30 % menšie ako JPEG a podporujú priehľadnosť). Používajte JPG pre fotografie, kde drobné nepostrehnuteľné artefakty kompresie neprekážajú. Používajte PNG pre snímky obrazovky, používateľské rozhrania a ilustrácie, ktoré vyžadujú ostrý text v rozlíšení na úrovni pixelov. Používajte SVG pre logá a ikony, ktoré potrebujú nekonečné škálovanie.
Rastrové vs. vektorové: Prečo sa SVG nikdy nerozmažú
Rastrové obrázky (JPG, PNG, WebP) sú mriežky zložené z pevných farebných pixelov - ak priblížite príliš blízko, stanú sa rozmazanými alebo pixelovanými. SVG je čistá matematika: ukladá matematické priamky, krivky a farby, čo umožňuje ikonám a ilustráciám vykresliť sa s ostrosťou britvy na všetkom od mobilných obrazoviek až po 8K displeje pri zachovaní minimálnych veľkostí súborov.
Mýtus: „Vyššie DPI znamená lepšiu kvalitu webového obrázka"
DPI (body na palec) predstavuje čisto fyzický pokyn pre tlač a webové prehliadače ho úplne ignorujú. Na telefónoch a počítačových monitoroch je ostrosť obrázka určená výhradne pixelovými rozmermi (napr. 1920x1080) a hustotou zobrazenia, nie vloženými metadátami DPI.
Alfa priehľadnosť: PNG vs. WebP
Tradičný formát JPG nemá žiadnu podporu priehľadnosti - priehľadné pozadia sa zmenia na úplne biele alebo čierne. PNG prinieslo čistú 8-bitovú alfu priehľadnosť, avšak WebP dnes poskytuje identickú kvalitu priehľadnosti pri až o 40 % menších veľkostiach súborov.
0 bajtov odovzdaných na externé servery. Všetko spracovanie prebehlo lokálne v pieskovisku vášho prehliadača.