Skip to content

Allt om WordPress, webbutveckling — och mer därtill

💡 Vilket bildformat ska man använda för WordPress: guide för 2026

💡 Vilket bildformat ska man använda för WordPress: guide för 2026

Webbplatsens hastighet handlar inte bara om hosting och kod. Bilderna du laddar upp blir ofta den största flaskhalsen: ett enda "tungt" foto från en kamera kan väga 5-8 MB och lägga till en sekund på sidladdningstiden. Tänk om du har tio sådana foton?

Bildformatet avgör hur det komprimeras, hur det återger färger och hur webbläsare visar det. Att välja fel innebär suddiga skärmdumpar, gigantiska PNG-filer istället för kompakta WebP-filer och sämre ranking: Google väger in Core Web Vitals i rankingen.

Här är specifika rekommendationer för varje uppgift: foton, skärmdumpar, logotyper, animationer. Och hur du lägger till format som WordPress inte accepterar som standard.

💡 Snabb översikt:

  • Identifiera vad du laddar upp: foto, skärmdump, logotyp eller animation, eftersom detta avgör formatvalet.
  • För fotografier, använd AVIF eller WebP (komprimeringen är betydligt bättre än JPEG vid samma kvalitet).
  • För skärmdumpar och logotyper, PNG (förlustfri) eller AVIF (destruktiv men drastiskt mindre filstorlek).
  • För animationer, WebP istället för GIF (flera gånger mindre filstorlek).
  • Om WordPress inte accepterar formatet du behöver, lägg till stöd via functions.php eller ett tillägg.
  • Fyll alltid i alt-text och komprimera bilder före uppladdning eller automatiskt via ett optimeringstillägg.

Varför bildfilformat är avgörande för WordPress

Format är inte bara en filändelse. Det är en kodningsalgoritm som avgör tre saker: bildkvalitet, filstorlek och webbläsarkompatibilitet. Alla tre påverkar direkt din webbplats affärsmått.

Närbild av en datorskärm som visar WordPress-kod

Laddningshastighet och Core Web Vitals. Ett JPEG-foto på 2 MB och samma foto i AVIF på 400 KB ser identiska ut men laddar 5 gånger olika. Google utvärderar Largest Contentful Paint (LCP), och bilder är ofta det tyngsta elementet på en sida. Tillägg som Smush konverterar filer till WebP eller AVIF automatiskt, men att välja rätt källformat sparar serverresurser.

SEO-konsekvenser. Sidhastighet är en direkt rankningssignal för Google. Tunga bilder sänker ditt Core Web Vitals-resultat, och sidan tappar positioner även om texten är perfekt optimerad. En studie från Portent (2024) visade att en minskning av LCP från 4 till 2 sekunder ökar konverteringen på landningssidor med i genomsnitt 15-20% inom B2B-nischer.

Visuell kvalitet. Olika format hanterar gradienter, text och fina detaljer olika. JPEG skapar artefakter runt kontrastrika kanter, vilket ser rörigt ut på skärmdumpar. PNG bevarar skärpan men väger flera gånger mer. AVIF löser båda problemen: komprimeringen är betydligt effektivare än JPEG vid jämförbar visuell kvalitet.

Anpassningsförmåga. Användare besöker från mobiler, surfplattor och datorer med olika webbläsare. AVIF stöds av Chrome, Firefox och Opera (sedan 2021-2022), och Safari sedan version 16 (hösten 2022). WebP har fungerat överallt sedan 2020. JPEG och PNG är den universella reservplanen som alla webbläsare från de senaste 20 åren förstår.

Vilka bildformat WordPress stöder 2026

WordPress har förändrats radikalt. Medan tidigare endast JPEG, PNG, GIF och ICO fungerade "out of the box", lade WordPress 5.8 (2021) till inbyggt WebP-stöd, och WordPress 6.5 (april 2024) lade till fullt AVIF-stöd.

Fullständig lista över format tillgängliga som standard (WordPress ≥6.5):

Format

Komprimeringstyp

Transparens

Animation

Färger

Idealisk för

JPEG/JPG

Destruktiv

16,7 miljoner

Foton, bakgrunder

PNG

Förlustfri

❌ (APNG - ja)

16,7 miljoner

Skärmdumpar, logotyper, infografik

GIF

Förlustfri

✅ (1 bit)

256

Enkla animationer, memes

WebP

Båda lägena

16,7 miljoner

Universell: foton och grafik

AVIF

Båda lägena

16,7 miljoner + HDR

Foton och skärmdumpar - prioritet

ICO

Förlustfri

16,7 miljoner

Webbplatsens favicon

SVG (vektorformat) accepteras inte av WordPress som standard av säkerhetsskäl, eftersom SVG-filer kan innehålla JavaScript. Om du behöver SVG för logotyper eller ikoner, aktivera det via functions.php med filtrering eller använd ett specialiserat tillägg som Safe SVG på WordPress.org.

Formatjämförelse: när du ska använda vad

JPEG (JPG)

Standarden sedan 1992 som fortfarande täcker ~77% av alla bilder på internet enligt W3Techs (2026). Destruktiv komprimering med kontroll över kvalitetsnivån; 85-92 är "sweet spot". Miljontals färger, utmärkta gradienter.

Nackdel: inget stöd för transparens. Varje JPEG är en rektangel. Inte lämplig för en logotyp på transparent bakgrund. Plus komprimeringsartefakter på skarpa kontrastrika kanter, vilket innebär att gränssnittsskärmdumpar i JPEG ser röriga ut.

När du ska använda: fotografier, stora bakgrundsbilder, blogginlägg med fotoinnehåll, om du av någon anledning inte använder WebP/AVIF.

PNG

Ett format skapat som ett fritt alternativ till GIF. Förlustfri komprimering: inte en enda pixel förlorad. Full alfatransparens (256 nivåer) möjliggör mjuka skuggor och halvtransparenta element.

Nackdel: storlek. Ett PNG-foto kan väga 5-10 gånger mer än JPEG-versionen vid visuellt identisk kvalitet. För innehållsbilder är detta omotiverat.

När du ska använda: gränssnittsskärmdumpar (textskärpa är avgörande), logotyper, infografik, diagram, ikoner, bilder med text.

GIF

Ett format med 256 färger och bildruteanimation. En legend från det tidiga internet. Förlustfri komprimering, men den begränsade paletten gör det olämpligt för fotografier, eftersom gradienter blir till "trappsteg".

Nackdel: enorma animationsstorlekar. En 5-sekunders GIF kan väga 10-15 MB, medan samma klipp i WebP-animation väger 1-2 MB.

När du ska använda: endast när du behöver en kort animation utan ljud och en WebP/AVIF-version inte är tillgänglig.

WebP

Google introducerade WebP 2010, men formatet tog verkligen fart efter 2020 när alla större webbläsare lade till stöd. Det stöder både destruktiv och förlustfri komprimering i ett format. Transparens, ja. Animation, ja. WebP-bilder är i genomsnitt 25-35% mindre än PNG och 25-34% mindre än JPEG vid motsvarande kvalitet.

Nackdel: vid tiden för skrivandet är det inte längre det mest effektiva formatet, eftersom AVIF överträffar det i komprimering. Men som reservalternativ är WebP oumbärligt.

När du ska använda: universellt format för allt. Om du är osäker, kör på WebP. Foton, skärmdumpar, animationer, grafik, det hanterar allt.

AVIF

Det mest effektiva bildformatet 2026. Baserat på AV1-videocodecen. AVIF-bilder är 30-50% mindre än WebP vid samma visuella kvalitet. Stöder HDR, brett färgomfång, destruktiv och förlustfri komprimering, transparens och animation. WordPress 6.5+ stöder AVIF inbyggt, så du kan ladda upp direkt till mediebiblioteket.

Nackdel: Safari lade till stöd först med version 16 (hösten 2022), så äldre iPhones och Mac-datorer på föråldrade versioner kommer inte att visa AVIF. Detta löses genom att lägga till en WebP/JPEG-reserv via <picture>-elementet eller ett optimeringstillägg.

När du ska använda: prioriterat format för foton och skärmdumpar. Om din webbplats kör WordPress ≥6.5 är AVIF ditt primära val, med WebP som försäkring.

Hur du lägger till stöd för ytterligare format

WordPress filtrerar uppladdade filer efter MIME-typ. Om du behöver tillåta SVG, BMP eller ett annat format, lägg till det via upload_mimes-hooken i ditt temas functions.php:

1add_filter( 'upload_mimes', 'techblog_add_mime_types' );
2function techblog_add_mime_types( $mime_types ) {
3 $mime_types['svg'] = 'image/svg+xml';
4 $mime_types['bmp'] = 'image/bmp';
5 $mime_types['webp'] = 'image/webp'; // WP 5.8+ not required
6 $mime_types['avif'] = 'image/avif'; // WP 6.5+ not required
7
8 return $mime_types;
9}

Koden läggs till i det aktiva temats functions.php eller via tillägget Code Snippets. Gör en säkerhetskopia innan du redigerar, eftersom ett PHP-fel kommer att krascha webbplatsen.

För SVG, en varning. SVG-filer kan innehålla JavaScript. Om du aktiverar SVG-uppladdningar, använd Safe SVG-tillägget (sanerar skript), som sanerar filer och tar bort skript innan de sparas i mediebiblioteket.

Ett alternativ är tillägget File Upload Types, som lägger till stöd för dussintals format via ett gränssnitt. För ett eller två format är upload_mimes-hooken enklare.

Bästa praxis: storlek, SEO och optimering

Optimal bildstorlek

Ladda upp bilder i exakt den storlek som behövs på sidan. Om bilden ligger i en kolumn på 800 px finns det ingen anledning att ladda upp ett original på 4000 px. WordPress skapar flera storlekar vid uppladdning (miniatyr, medium, stor), men originalfilen lagras på servern och kan levereras till webbläsaren när full anropas.

Regel: innan du laddar upp, ändra storlek på bilden till maximal visningsbredd (vanligtvis 1200-1600 px för innehållsytan). Verktyg: Photoshop, Googles kostnadsfria Squoosh, kommandoradsverktyget cwebp.

Öka uppladdningsgränsen

Som standard begränsar WordPress uppladdad filstorlek till 2 MB. För modern AVIF är detta sällan ett problem (filerna är betydligt mindre än JPEG), men när du laddar upp en stor PNG eller animerad WebP kan gränsen ställa till det.

Hos många webbhotell kan gränsen ändras via kontrollpanelen. Till exempel, i Cloudways, gå till Server Management → Settings and Packages. På GoDaddy via cPanel; på Media Temple genom att redigera php.ini; och med WP Engine behöver du kontakta supporten. Om du inte har direkt åtkomst till serverinställningar, lägg till detta i wp-config.php:

1define( 'WP_MEMORY_LIMIT', '256M' );

Detta ökar PHP-minnesgränsen och höjer indirekt uppladdningströskeln.

Bild-SEO: alt-text och filnamn

Sökmotorer "ser" inte bilder; de läser deras attribut. Alt-text är en bildbeskrivning som indexeras och läses upp av skärmläsare.

Regler för bra alt-text:

  • Beskriv vad som finns i bilden i inläggets kontext. Inte "skärmdump", utan "Cloudways kontrollpanel med fältet Upload Size markerat".
  • 4-8 ord, på svenska, med avsnittets nyckelord.
  • Börja inte med "Bild på…" eller "Foto av…"
  • För dekorativa bilder, lämna alt="".

Filnamnet spelar också roll. IMG_20241015_142302.jpg säger ingenting till sökmotorn. wordpress-image-format-comparison-chart.png gör det. Byt namn på filer innan du laddar upp.

Plugin för bildoptimering

Manuell optimering av varje fil tar tid. Plugins automatiserar processen: de komprimerar, konverterar till WebP/AVIF och serverar webbläsaren det optimala formatet. Enligt WPShouts tester (2025) är topp 4:

Plugin

Gratisgräns

WebP

AVIF

CDN

Funktion

Smush

∞ (förlustfri komprimering)

Mest populär, enkelt gränssnitt

EWWW Image Optimizer

∞ (lokal komprimering)

Lokal bearbetning - filer lämnar inte servern till en tredjepart

Imagify

20 MB/månad

Aggressiv komprimering, bra konvertering

Optimole

5 000 besök/månad

Molntjänst: komprimering + CDN + adaptiva storlekar

En mer komplett översikt över optimeringsplugins finns i vår separata artikel.

Analysbaserad strategi

Google Analytics (eller Matomo) visar vilka enheter och webbläsare besökarna använder. Det avgör vilket format som bör vara primärt. Om till exempel större delen av din publik använder de senaste versionerna av Chrome och Safari är AVIF motiverat, och du kan ställa in WebP som fallback via ett plugin för resten.

Om många besökare har iPhones med iOS 15 eller äldre fungerar inte AVIF, och då bör primärformatet vara WebP med JPEG som försäkring. Vi har en detaljerad guide med tre metoder för hur du serverar WebP-bilder i WordPress, från CDN till manuell <picture>.

Video: AVIF och WebP i WordPress i praktiken

Den här korta videon visar hur du konverterar bilder till AVIF och WebP direkt i WordPress admin och jämför storlekar före och efter:

AVIF-formatet ger betydligt bättre komprimering än WebP, och skillnaden märks särskilt i foton med mjuka övergångar och mycket detaljer. WordPress 6.5+ har inbyggt stöd för AVIF, utan plugin.

⁉️🤔 Vanliga frågor

Vad är skillnaden mellan destruktiv och icke-destruktiv komprimering?

Destruktiva algoritmer tar bort data som ögat inte uppfattar (JPEG, AVIF destruktiv, WebP destruktiv). Filen blir liten, men kvaliteten försämras vid varje ny sparning. Icke-destruktivt bevarar varje pixel som den är (PNG, GIF, AVIF icke-destruktiv, WebP icke-destruktiv). Filen blir större men är idealisk för grafik med text. För innehållsbilder, använd destruktivt (AVIF kvalitet 50-70 eller WebP kvalitet 75-85), så krymper storleken flera gånger om. Spara icke-destruktivt för logotyper och skärmdumpar där skärpan är viktig.

Vilket format ska jag välja för skärmdumpar 2026?

AVIF i icke-destruktivt läge eller kvalitet 90+. Skärmdumpar kräver läsbar text, och icke-destruktiv AVIF bevarar skärpan på PNG-nivå samtidigt som filen väger betydligt mindre. Om din webbplats kör WordPress äldre än 6.5, använd WebP icke-destruktivt som primärt med PNG som fallback.

Testa själv: ta en skärmdump av adminpanelen, spara den som PNG, WebP icke-destruktiv och AVIF icke-destruktiv. Visuell skillnad: noll. Men på en sida med ett dussin skärmdumpar märks megabyte-skillnaden redan för LCP.

Behöver jag ett optimeringsplugin om WordPress självt stöder WebP och AVIF?

WordPress stöder uppladdning av WebP och AVIF men konverterar inte automatiskt JPEG/PNG till moderna format. Om du laddar upp färdiga WebP/AVIF behöver du inget plugin. Om dina original är i JPEG/PNG konverterar ett plugin dem vid uppladdning och serverar webbläsaren det optimala formatet.

Dessutom löser plugins fallback-uppgiften: de genererar <picture> med flera källor för olika webbläsare. Utan plugin skulle du behöva göra detta manuellt eller hoppas att alla besökare använder webbläsare som stöder AVIF (vilket ännu inte är fallet).

WebP eller AVIF: vilket ska jag välja just nu?

AVIF som primärt, WebP som fallback. AVIF vinner i komprimering (märkbart bättre än WebP), kvalitet (HDR, brett färgomfång) och webbläsarstöd, som nu omfattar Chrome 85+, Firefox 93+, Safari 16+ och Opera 71+. Enda "men" är äldre iOS-enheter: iPhone X och äldre på iOS 15 visar inte AVIF. Men deras andel sjunker, och plugins som EWWW och Optimole serverar dem automatiskt WebP.

Om din analys visar en betydande andel iOS 15 och äldre, gör WebP till primärformat med AVIF som ett alternativ "för dem som kan". För alla andra: AVIF nu, WebP som backup.

Kan jag använda SVG för en logotyp i WordPress?

SVG är det ideala formatet för logotyper: oändlig skalbarhet och mikroskopisk storlek (2-5 KB). Men WordPress blockerar SVG på grund av risken för XSS-attacker (SVG kan innehålla inbäddad JavaScript). Använd Safe SVG-pluginet (säker uppladdning), som sanerar varje uppladdad fil och tar bort potentiellt farlig kod. Efter det kan SVG laddas upp direkt till mediebiblioteket och användas som vilket annat format som helst.

Vad du ska använda i WordPress 2026: sammanfattningen

Formatvalet kokar ner till tre regler. Foton och skärmdumpar: AVIF (prioritet) eller WebP, destruktiv komprimering kvalitet 70-85. Logotyper och ikoner: PNG eller AVIF icke-destruktivt + SVG via Safe SVG. Animationer: WebP istället för GIF, flera gånger mindre storlek.

Lägg inte alla ägg i en formatkorg. Den ideala strategin: AVIF → WebP → original JPEG/PNG, tre lager via <picture> eller ett plugin. Nästan alla besökare får AVIF/WebP, resten får det klassiska formatet, och ingen ser en trasig ikon.

Ställ in automatisk optimering en gång (via EWWW för lokal bearbetning eller Optimole för en molntjänst med CDN) och glöm manuell komprimering. Kontrollera analysen kvartalsvis: andelen gamla webbläsare sjunker, och snart är AVIF ett format utan förbehåll.