Bildformat: Jämförelse av WebP, PNG, JPG och SVG
Om du väljer fel bildformat kan sidor ta längre tid att ladda och grafik bli suddig. Så här skiljer sig moderna webbformat åt när det gäller komprimering, transparens och skärpa.
Filer bearbetas lokalt i din webbläsare med WebAssembly och HTML5-API:er. De lämnar aldrig din enhet, vilket innebär att inga serveruppladdningar eller filagringar hos tredje part förekommer.
Börja konvertera omedelbart på din egen enhet - ingen väntan på uppladdning, ingen nedladdningskö och ingen strypt hastighet från en fjärrserver.
Använd alla tillgängliga verktyg utan att skapa ett konto, betala för en prenumeration eller stöta på godtyckliga filstorleksgränser. Konvertera så ofta som din webbläsare och enhet klarar av.
Formatjämförelse och 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 Targa-rasterbild |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
| PDF dokument | application/pdf | ISO-32000-2 | Portable Document Format för dokumentvisning |
Tekniska specifikationer och kodeköversikt
Den snabba beslutsregeln för format
WebP och AVIF kan minska filstorleken för många webbilder och båda stöder genomskinlighet, men resultatet beror på bilden och kodningsinställningarna. Använd JPG för foton där små komprimeringsartefakter är acceptabla, PNG för skarpa skärmbilder och annan grafik, och SVG för skalbara logotyper och ikoner.
Rasterbilder jämfört med vektorgrafik: Varför SVG-filer aldrig blir oskarpa
Rasterbilder (JPG, PNG, WebP) består av rutnät med pixlar i fasta färger - zoomar du in för mycket blir bilden suddig eller pixlig. SVG bygger på matematiska beskrivningar av linjer, kurvor och färger, så ikoner och illustrationer förblir knivskarpa på allt från mobilskärmar till 8K-skärmar och kan ha små filstorlekar.
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
JPEG saknar alfakanal för transparens, så genomskinliga pixlar får en enfärgad bakgrund när bilden sparas som JPEG. PNG bevarar alfatransparens, medan WebP också kan lagra transparens och ge en mindre fil. Jämför resultatet eftersom filstorleken beror på bildens innehåll och kodningsinställningar.
0 byte laddades upp till externa servrar. All bearbetning skedde lokalt i webbläsarens sandlåda.