Skip to content

Allt om WordPress, webbutveckling — och mer därtill

🖼 Bildoptimering i WordPress: en komplett guide

🖼 Bildoptimering i WordPress: en komplett guide

Har laddat upp ett dussin bilder från mobilen och sajten började sega ihop. Sidan tar sex sekunder att öppna, Google sänker din ranking och webbhotellet skickar diskvarningar. Låter det bekant? Enligt data från HTTP Archive står bilder från och med 2026 för ungefär 45% av en genomsnittlig webbsidas vikt. För en sajt med ett mediebibliotek på flera gigabyte innebär det direkta förluster: avvisningar, kraschad SEO, uppsvällda säkerhetskopior. Du kan fixa det på en kväll.

💡 Snabb översikt:

  • Konvertera JPEG och PNG till WebP eller AVIF: filstorleken minskar med en fjärdedel eller mer vid samma visuella kvalitet.
  • Sätt upp automatisk storleksändring via Imsanity eller Smush: gigantiska mobiluppladdningar blir ett minne blott.
  • Aktivera lazy loading: WordPress klarar detta direkt från version 5.5 med en enda kryssruta.
  • Installera ett komprimeringsplugin (Smush, ShortPixel eller EWWW): det komprimerar ditt mediebibliotek i bulk och rensar upp gamla filer.
  • Fyll i alt-text för varje bild: sökmotorer ser bilder enbart genom den.

Förbereda bilder före uppladdning

Exempel på storleksändring av en bild före uppladdning

Att ladda upp ett foto som är 4000 pixlar brett till en blogg med ett innehållsområde på 750 pixlar är meningslöst. WordPress skapar mindre kopior, men originalet ligger kvar som dödvikt. Ändra storlek på bilden till 1200-1600 pixlars bredd före uppladdning för att lämna utrymme för retinaskärmar. Verktyg: inbyggda Paint, onlineverktyget Easy Resize eller valfri bildredigerare.

Jämförelse av bildformaten JPEG och PNG

Formatregel: fotografier får JPEG, logotyper och skärmdumpar med text får PNG. Sedan 2020-talet har WebP (25-34% lättare än JPEG, enligt data från Google) och AVIF (upp till 50% lättare) blivit webbstandarder. Du kan konvertera via Squoosh eller låta ett plugin sköta det; nästan alla plugin som listas nedan kan generera WebP-kopior automatiskt.

Kvalitet: att sänka JPEG från 12 till 8 (Photoshops skala) halverar filstorleken utan synlig skillnad. Webbstandarden är 80-85%. Gratistjänsten TinyPNG gör samma sak genom att dra en fil till din webbläsare.

Filnamn: inte IMG_4827.jpg, utan how-to-compress-wordpress-images.jpg. Inga mellanslag, inga specialtecken, inkludera ett nyckelord. Sökmotorer väger in filnamn i bildindexering.

Metadata efter uppladdning

Filen är uppladdad, men ditt jobb är inte klart. Alt-text: 4-8 ord, beskrivande, med ett nyckelord. Inte "foto1", utan "jämför WebP- och JPEG-format i WordPress". Titel och beskrivning hjälper i mediebiblioteket och bidrar till SEO. Den inbyggda WordPress-redigeraren låter dig rotera, beskära och skala direkt efter uppladdning.

Om du bytte tema eller registrerade nya storlekar via add_image_size(), återskapar pluginet Regenerate Thumbnails (en miljon installationer) alla storlekar med ett klick.

Gränssnitt för Regenerate Thumbnails-tillägget för massbearbetning

Komprimeringsplugins: jämförelse

Manuell förberedelse fungerar utmärkt för nya uppladdningar. Men gigabyte av redan uppladdade filer kräver plugins: de komprimerar, konverterar till WebP/AVIF och batchbearbetar ditt mediebibliotek.

Plugin

Gratis

WebP/AVIF

Lazy loading

CDN

Installationer

Smush

Ja, obegränsat

WebP+AVIF i Pro

Ja

Ja (Pro)

1M+

ShortPixel

100 credits/månad

Ja

Ja

Ja

300K+

EWWW

Ja, obegränsat

WebP gratis, AVIF i Pro

Ja

Ja (Pro)

Aktiv

TinyPNG

500 credits/månad

Ja

Nej

Nej

Aktiv

Imsanity

Ja

Nej (endast storleksändring)

Nej

Nej

200K+

Optimus

100 KB per fil

WebP i HQ

Nej

Nej

30K+

Smush

En miljon installationer, 4,8 i betyg. Gratisversion: komprimering utan synlig kvalitetsförlust, automatisk storleksändring, lazy loading, Directory Smush för mappar utanför mediebiblioteket. Pro ($6/månad): WebP, AVIF, CDN över 119 servrar, automatisk bredd-/höjd-fix för att eliminera CLS. Nackdel: filer över 5 MB hoppas över i gratisversionen. 🔗 Smush på WP.org

ShortPixel

ShortPixel-tilläggets gränssnitt för bildkomprimering

300K+ installationer. Tre komprimeringslägen (förlustfri, förstörande, glossy), AI-genererad alt-text på 100+ språk, bakgrundsläge utan att hålla en webbläsarflik öppen. Komprimerar JPEG, PNG, GIF, WebP, AVIF och PDF. 100 credits/månad gratis, Obegränsat för $9,99/månad. 🔗 ShortPixel på WP.org

EWWW Image Optimizer

Det enda pluginet med helt lokal komprimering (jpegtran, optipng, cwebp, din servers verktyg). Gratis: obegränsad komprimering, WebP, lazy loading med automatisk skalning, WP-CLI. Pro: AVIF, CDN, vattenstämplar, PDF. Nackdel: installationen är mer komplex än konkurrenternas. 🔗 EWWW på WP.org

TinyPNG

TinyPNG-tillägget med pandalogga för bildkomprimering

Samma panda som från tinypng.com som ett plugin. Komprimerar JPEG, PNG, WebP, konverterar till AVIF. 500 credits/månad gratis, ungefär 50-100 bilder med hänsyn till WordPress-storlekar. Gränssnittet är dödligt enkelt, komprimering utan synlig kvalitetsförlust. Nackdel: ingen CDN eller lazy loading. 🔗 TinyPNG på WP.org

Imsanity

Imsanity-tillägget för automatisk bildstorleksändring

200 000+ installationer, 4,9 i betyg. Komprimerar inte, bara ändrar storlek. Sätt en maxbredd och maxhöjd, så skalas varje uppladdad fil automatiskt. Skapare: Shane Bishop (samma utvecklare som ligger bakom EWWW). Perfekt par: Imsanity för automatisk storleksändring + EWWW för komprimering. Helt gratis. 🔗 Imsanity på WP.org

Optimus

Inställningar för Optimus-tillägget för bildoptimering

30 000+ installationer från KeyCDN-teamet. Minimal plugin-vikt (0,19 MB), servrar i Tyskland med omedelbar filradering efter bearbetning. Gratisversionen är begränsad till 100 KB per fil (i praktiken en demo). HQ tar bort begränsningar och lägger till WebP. 🔗 Optimus på WP.org

Lazy loading

Sedan version 5.5 lägger WordPress till native loading="lazy" på alla bilder med bredd och höjd. För de flesta sajter räcker detta. Om du behöver mer finns här några plugins:

Lazy Load for Videos-tillägget för uppskjuten videoladdning

Lazy Load for Videos ersätter YouTube- och Vimeo-spelare med en klickbar tumnagel. Videon laddas först efter ett klick, så att JavaScript inte saktar ner sidan.

BJ Lazy Load-tillägget för uppskjuten innehållsladdning

BJ Lazy Load är ett lättviktigt plugin för bilder, tumnaglar, gravatarer och iframes med en genomskinlig platshållare.

a3 Lazy Load-tillägget för uppskjuten bildladdning

a3 Lazy Load är mobilorienterat, med visningseffekter (toning, slide) och WooCommerce-stöd.

Rocket Lazy Load-tillägget för uppskjuten laddning

Rocket Lazy Load från WP Media (teamet bakom WP Rocket) ersätter bilder och iframes med en platshållare. Stöder inte video, bara bilder och ramar.

I praktiken räcker "native lazy load + ett komprimeringsplugin med inbyggd lazy loading (Smush eller EWWW)". Installera ett separat plugin bara om standardverktygen inte räcker till.

Avancerade verktyg

Före- och efter-effekt med skjutreglage med Twenty Twenty-tillägget

Twenty Twenty är ett gratis plugin för före/efter-reglage. Det lägger två bilder ovanpå varandra och ger läsaren ett reglage för att jämföra dem via shortcoden [twentytwenty]. Perfekt för optimeringscase. 🔗 Twenty Twenty på WP.org

Draw Attention skapar interaktiva hotspots över valfri bild.

Draw Attention-tillägget för att skapa interaktiva bilder

Hovra för att se en tooltip, klicka för att följa en länk. Gratisversion: en interaktiv bild. Pro (prissättning på utvecklarens webbplats): obegränsat antal bilder, lightboxar, 20 färgpaletter.

Skapa hotspots i Draw Attention-tillägget

Användningsområden: interaktiva kartor, diagram, planritningar, infografik. 🔗 Draw Attention på WP.org

Anpassade bildstorlekar via kod

För att registrera anpassade storlekar, lägg till följande i functions.php:

1function custom_image_sizes() {
2 add_image_size( 'custom-medium', 480, 360, true );
3 add_image_size( 'custom-large', 1200, 900, true );
4}
5add_action( 'after_setup_theme', 'custom_image_sizes' );
6
7function show_custom_sizes( $sizes ) {
8 return array_merge( $sizes, array(
9 'custom-medium' => __( 'Средний (кастомный)', 'textdomain' ),
10 'custom-large' => __( 'Большой (кастомный)', 'textdomain' ),
11 ));
12}
13add_filter( 'image_size_names_choose', 'show_custom_sizes' );
Gränssnitt för Regenerate Thumbnails-tillägget för massbearbetning

Efter att du lagt in koden kommer nya storlekar att visas i dropdown-menyn när du infogar en bild. För befintliga filer, kör Regenerate Thumbnails.

⁉️🤔 Vanliga frågor

Vilket komprimeringsplugin är bäst för nybörjare?

Smush: installera, aktivera, glöm. Gratisversionen komprimerar automatiskt vid uppladdning och erbjuder bulkoptimering med ett klick. WebP och AVIF finns i Pro, men grundfunktionerna räcker för att komma igång.

Vad är skillnaden mellan WebP och AVIF, och vilket ska jag välja?

WebP: besparingar jämfört med JPEG (se Googles data i formatavsnittet), stöds i alla webbläsare. AVIF: upp till 50% lättare än JPEG, Safari-stöd sedan 2023. Råd: WebP som säkert standardval, AVIF för maximal bandbreddsbesparing.

WordPress komprimerar redan JPEG-bilder vid uppladdning, varför använda ett plugin?

WordPress inbyggda komprimering använder en enkel algoritm med en fast kvalitetsnivå. Plugins (Smush, ShortPixel, EWWW) använder avancerade algoritmer och pressar ut ytterligare besparingar vid samma visuella kvalitet. Plus konvertering till WebP/AVIF, något som grundsystemet inte gör.

Behöver jag lazy loading om min sajt ligger på snabb hosting?

Lazy loading sparar inte servertid, utan besökarens bandbredd och renderingshastigheten för det första skärmfönstret. Native loading="lazy" i WordPress 5.5+ är redan aktiverat och kräver ingen konfiguration.

Hur kollar jag hur mycket bilder saktar ner min sajt?

GTmetrix visar specifika filer med komprimeringsrekommendationer. PageSpeed Insights från Google ger en nedbrytning: "Serve images in next-gen formats", "Properly size images", "Efficiently encode images". Båda är gratis.

Sammanfattning: vilket plugin ska man välja

Att hålla bilder i ordning är inte en engångsstädning utan en installation som fungerar i åratal. Lägg en kväll på installationen, så sköter pluginet allt automatiskt därefter.

  • Ny blogg, minimalt krångel: Smush Free. Komprimering vid uppladdning, bulkoptimering, lazy loading i ett plugin.
  • WooCommerce-butik: ShortPixel. AI genererar alt-texter för hundratals produkter, bakgrundsläge utan att hålla en flik öppen.
  • Egen hostad, full kontroll: EWWW. Lokal komprimering utan externa API:er, obegränsad volym.
  • Maximala besparingar: TinyPNG + Imsanity. Denna kombination hanterar både gigantiska uppladdningar och uppsvällda JPEG-bilder.
  • Fotograf/portfölj: EWWW eller ShortPixel i förlustfritt läge. Kvaliteten bevaras, metadata rensas.

Börja med gratis Smush: det visar hur mycket utrymme du redan slösar. Vilket plugin valde du? Dela i kommentarerna.