Képformátumok: WebP, PNG, JPG és SVG összehasonlítás
A nem megfelelő képformátum kiválasztása megnövelheti az oldalak betöltési idejét, vagy elhomályosíthatja a grafikákat. Így viszonyulnak egymáshoz a modern webes formátumok a tömörítés, az átlátszóság és az élesség terén.
A fájlokat a webböngésződben, az HTML5 Canvas és a WebAssembly segítségével dolgozzuk fel. Egyetlen bájt sem hagyja el az eszközödet.
Kerüld el a feltöltési és letöltési sorokat. Az átalakítások helyben, a teljes hardveres sebességgel futnak, szerverkorlátok nélkül.
Megfelel a hivatalos ISO, W3C és IETF specifikációknak a modern operációs rendszerek közötti kimeneti kompatibilitás biztosítása érdekében.
Formátum-összehasonlítás és műszaki specifikációk
| Kimeneti formátum | MIME-típus | Specifikáció | Típus |
|---|---|---|---|
| PNG kép | image/png | W3C-PNG | Hordozható hálózati grafika |
| JPG JPEG kép | image/jpeg | ITU-T-T81-JPEG | Fényképészeti szakértők egyesülete által készített formátum |
| WebP kép | image/webp | RFC-6386-VP8 | Google WebP modern képformátum |
| SVG vektor | image/svg+xml | W3C-SVG | Méretezhető vektorgrafika |
| HEIC fénykép | image/heic | ISO-IEC-23008-12-HEIF | Nagy hatékonyságú képtároló |
| AVIF kép | image/avif | AOMEDIA-AV1-AVIF | AV1 képfájlformátum |
| 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 | Truevision fejlett raszterkép |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Műszaki specifikációk és kodek áttekintés
A gyors formátumválasztási szabály
Használjon WebP-t vagy AVIF-et a modern webhelyekhez (30%-kal kisebb méretűek, mint a JPEG, és támogatják az átlátszóságot). Használjon JPG-t olyan fényképekhez, amelyeknél a apró, észrevehetetlen tömörítési hibák nem számítanak. Használjon PNG-t képernyőképekhez, UI-grafikákhoz és olyan illusztrációkhoz, amelyek éles, pixelenként pontos szöveget igényelnek. Használjon SVG-t olyan logókhoz és ikonokhoz, amelyek végtelen méretezést igényelnek.
Raszter kontra vektor: Miért nem homályosodnak el az SVG-k?
A raszteres képek (JPG, PNG, WebP) rögzített színű pixelek rácsai - ha túl közel zoomol, elhomályosulnak vagy pixelessé válnak. Az SVG tiszta matematika: matematikai vonalakat, görbéket és színeket tárol, így az ikonok és illusztrációk borotvaélesek maradnak a mobilképernyőktől a 8K-s kijelzőkig, miközben a fájlméretük apró.
Mítosz: „A magasabb DPI jobb webes képminőséget jelent"
A DPI (dots per inch - hüvelykenkénti képpontszám) tisztán fizikai nyomtatási utasítás, amelyet a webböngészők teljesen figyelmen kívül hagynak. Telefonokon és számítógép-monitorokon a kép élességét kizárólag a pixelméretek (pl. 1920x1080) és a kijelző sűrűsége határozza meg, nem pedig a beágyazott DPI metaadat.
Alfa átlátszóság: PNG kontra WebP
A hagyományos JPG egyáltalán nem támogatja az átlátszóságot - az átlátszó háttér tiszta fehérre vagy feketére vált. A PNG úttörő szerepet játszott a tiszta 8 bites alfa átlátszóságban, de a WebP mára azonos átlátszósági minőséget biztosít akár 40%-kal kisebb fájlméret mellett is.
0 bájt lett feltöltve külső szerverekre. Minden feldolgozás helyben, az Ön böngészőjének homokozójában történt.