Bildformat: Jämförelse av WebP, PNG, JPG och SVG
Att välja fel bildformat kan få sidladdningstiderna att svälla eller göra din grafik oskarpa. Så här står sig moderna webbformat i jämförelse när det gäller komprimering, transparens och skärpa.
Dina filer bearbetas helt i din webbläsare med hjälp av HTML5 Canvas och WebAssembly. Ingen data lämnar någonsin din enhet.
Hoppa över köer för upp- och nedladdning. Konverteringar sker lokalt i maskinens fulla hårdvaruhastighet utan serverbegränsningar.
Kompatibel med officiella ISO-, W3C- och IETF-specifikationer för att garantera utdatakompatibilitet över moderna operativsystem.
Formatjämförelse & Tekniska specifikationer
| Utdataformat | MIME-typ | Specifikation | Typ |
|---|---|---|---|
| PNG bild | image/png | W3C-PNG | Rasterbild med stöd för genomskinlighet |
| JPG JPEG-bild | image/jpeg | ITU-T-T81-JPEG | Komprimerat fotoformat |
| WebP bild | image/webp | RFC-6386-VP8 | Modernt bildformat från Google |
| SVG vektor | image/svg+xml | W3C-SVG | Skalbar vektorgrafik |
| HEIC foto | image/heic | ISO-IEC-23008-12-HEIF | Högeffektiv bildbehållare |
| AVIF bild | image/avif | AOMEDIA-AV1-AVIF | AV1-bildfilformat |
| 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 avancerat rasterformat |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Tekniska specifikationer & codec-översikt
Den snabba beslutsregeln för format
Använd WebP eller AVIF för moderna webbplatser (30 % mindre än JPEG med stöd för transparens). Använd JPG för foton där små, omärkliga komprimeringsartefakter inte spelar någon roll. Använd PNG för skärmdumpar, gränssnittsgrafik och illustrationer som kräver skarp, pixelperfekt text. Använd SVG för logotyper och ikoner som behöver oändlig skalning.
Raster vs. Vektor: Varför SVG-filer aldrig blir oskarpa
Rasterbilder (JPG, PNG, WebP) är rutnät med fasta färgpixlar - zooma in för långt och de blir oskarpa eller pixliga. SVG är ren matematik: det lagrar matematiska linjer, kurvor och färger, vilket gör att ikoner och illustrationer kan återges knivskarpt på allt från mobila skärmar till 8K-skärmar med minimal filstorlek.
Myten: 'Högre DPI betyder bättre bildkvalitet på webben'
DPI (dots per inch, punkter per tum) är en rent fysisk utskriftsinstruktion och ignoreras helt av webbläsare. På telefoner och datorskärmar bestäms bildskärpan enbart av pixeldimensioner (t.ex. 1920x1080) och skärmdensitet, inte av den inbäddade DPI-metadata.
Alfatransparens: PNG vs. WebP
Traditionell JPG saknar helt stöd för transparens - transparenta bakgrunder blir solitt vita eller svarta. PNG banade väg för ren 8-bitars alfatransparens, men WebP levererar nu samma transparenta kvalitet med upp till 40 % mindre filstorlekar.
0 byte laddas upp till externa servrar. All bearbetning sker lokalt i webbläsarens sandlåda.