Bildeformater: WebP, PNG, JPG og SVG sammenlignet
Å velge feil bildeformat kan øke lastetiden for nettsider eller gjøre grafikken din usarp. Slik sammenlignes moderne nettformater når det gjelder komprimering, gjennomsiktighet og skarphet.
Filene dine behandles utelukkende i nettleseren din ved hjelp av HTML5 Canvas og WebAssembly. Ingen data forlater noen gang enheten din.
Hopp over opp- og nedlastingskøer. Konverteringer skjer lokalt i full maskinvarehastighet uten serverbegrensninger.
I samsvar med offisielle ISO-, W3C- og IETF-spesifikasjoner for å garantere utdatakompatibilitet på tværs av moderne operativsystemer.
Format-sammenligning og tekniske spesifikasjoner
| Utdataformat | MIME-type | Spesifikasjon | Type |
|---|---|---|---|
| PNG bilde | image/png | W3C-PNG | Tapløst rasterbildeformat med støtte for gjennomsiktighet |
| JPG JPEG-bilde | image/jpeg | ITU-T-T81-JPEG | Komprimert rasterbildeformat for fotografier |
| WebP bilde | image/webp | RFC-6386-VP8 | Moderne bildeformat fra Google med høy kompresjon |
| SVG vektor | image/svg+xml | W3C-SVG | Skalerbart vektorgrafikkformat basert på XML |
| HEIC bilde | image/heic | ISO-IEC-23008-12-HEIF | Effektivt bilde- og containerformat |
| AVIF bilde | image/avif | AOMEDIA-AV1-AVIF | Bildeformat basert på AV1-videokodeken |
| 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 avansert rasterformat |
| PCX ZSoft | image/x-pcx | PCX-SPEC | ZSoft Paintbrush PCX Bitmap |
Tekniske spesifikasjoner og kodekoversikt
Den raske beslutningsregelen for formater
Bruk WebP eller AVIF for moderne nettsider (30 % mindre enn JPEG med støtte for gjennomsiktighet). Bruk JPG for bilder der små, umerkelige komprimeringsartefakter ikke spiller noen rolle. Bruk PNG for skjermbilder, grensesnittgrafikk og illustrasjoner som krever skarp tekst på pikselnivå. Bruk SVG for logoer og ikoner som trenger uendelig skalering.
Raster vs. vektor: Hvorfor SVG-er aldri blir uskarpe
Rasterbilder (JPG, PNG, WebP) er rutenett av faste fargepiksler - hvis du zoomer inn for langt, blir de uskarpe eller pikslerte. SVG er ren matematikk: den lagrer matematiske linjer, kurver og farger, slik at ikoner og illustrasjoner gjengis knivskarpt på alt fra mobilskjermer til 8K-skjermer med små filstørrelser.
Myte: «Høyere DPI betyr bedre bildekvalitet på nettet»
DPI (punkter per tomme) er utelukkende en fysisk utskriftsinstruksjon og blir fullstendig ignorert av nettlesere. På telefoner og dataskjermer bestemmes bildekvaliteten utelukkende av pikseldimensjoner (f.eks. 1920x1080) og skjermtetthet, ikke av den innebygde DPI-metadataen.
Alfa-gjennomsiktighet: PNG vs. WebP
Tradisjonell JPG har null støtte for gjennomsiktighet - gjennomsiktige bakgrunner blir ensfarget hvite eller svarte. PNG var pioner for ren 8-biters alfa-gjennomsiktighet, men WebP leverer nå identisk gjennomsiktig kvalitet med opptil 40 % mindre filstørrelser.
0 byte lastet opp til eksterne servere. All behandling skjedde lokalt i nettlesersandkassen din.