Képformátumok összehasonlítása: WebP, PNG, JPG és SVG
A nem megfelelő képformátum megnövelheti az oldalak betöltési idejét, vagy elmosódottá teheti a grafikákat. Íme, hogyan viszonyulnak egymáshoz a modern webes formátumok tömörítés, átlátszóság és élesség szempontjából.
A fájlokat helyben, a böngészőben dolgozzuk fel WebAssembly és HTML5 API-k segítségével. Az eszközén maradnak, nem kerülnek fel szerverre, és harmadik fél sem tárolja őket.
Kezdje el az átalakítást azonnal az eszközén, feltöltésre való várakozás, letöltési sor és távoli szerver általi sebességkorlátozás nélkül.
Használjon minden elérhető eszközt fiók létrehozása, fizetős csomag megvásárlása vagy mesterséges fájlméret-korlát nélkül. Konvertáljon olyan gyakran, ahányszor a böngészője és az eszköze bírja.
Formátum-összehasonlítás és műszaki specifikációk
| Kimeneti formátum | MIME-típus | Specifikáció | Típus |
|---|---|---|---|
| PNG dokumentum | image/png | W3C-PNG | Nagy felbontású, szkennelt PNG-kép |
| JPG dokumentum | image/jpeg | ITU-T-T81-JPEG | Szkennelt dokumentum JPEG-formátumban |
| WebP Animált WebP-kép | image/webp | RFC-6386-VP8 | Nagy hatékonyságú animáció |
| SVG CAD-rajz SVG-exportja | image/svg+xml | W3C-SVG | Vektoros CAD-renderelés |
| 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-dokumentum | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop-dokumentum |
| PSB Photoshop nagy dokumentum | image/vnd.adobe.photoshop | ADOBE-PSD-SPEC | Adobe Photoshop nagy dokumentum |
| WMF Windows metafájl | image/x-wmf | MS-WMF-SPEC | Windows metafájl-vektorformátum |
| EMF Továbbfejlesztett metafájl | image/x-emf | MS-EMF-SPEC | Továbbfejlesztett metafájl-vektorformátum |
| JFIF kép | image/jpeg | ITU-T-T81-JPEG | JPEG fájlcsereformátum |
| TGA Truevision | image/x-tga | TGA-SPEC | Truevision Targa raszterkép |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX-bitkép |
| PDF dokumentum | application/pdf | ISO-32000-2 | Hordozható dokumentumformátum |
Műszaki specifikációk és kodekáttekintés
A gyors formátumválasztási szabály
A WebP és az AVIF sok webes kép esetén csökkentheti a fájlméretet, és mindkettő támogatja az átlátszóságot, de az eredmény a képtől és a kódolási beállításoktól függ. Fényképekhez használjon JPG-t, ha elfogadhatók az apró tömörítési hibák; éles képernyőképekhez és grafikákhoz PNG-t, méretezhető logókhoz és ikonokhoz pedig SVG-t.
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 nagyra nagyítjuk őket, 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) kizárólag a fizikai nyomtatásra vonatkozó beállí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 JPEG-ben nincs átlátszósági csatorna, ezért a mentéskor az átlátszó képpontok egyszínű háttérré válnak. A PNG megőrzi az alfa-átlátszóságot, a WebP pedig szintén képes átlátszóság tárolására, és kisebb fájlt eredményezhet; a képméretet érdemes összehasonlítani, mert az a tartalomtól és a kódolási beállításoktól függ.
0 bájt került fel külső szerverekre. Minden feldolgozás helyben, a böngésző elkülönített környezetében történt.