Enligt HTTP Archive i december 2018 utgör bilder över 40% av en genomsnittlig webbplats sidvikt på både stationära och mobila enheter. Det är enormt!  😮  När det gäller det nya mobile-first indexet och prestanda, spelar bildoptimering en avgörande roll för hur snabbt din WordPress-sajt kommer att kunna laddas. Bildkomprimering är en av de enklaste optimeringarna du kan genomföra som också i sin tur kommer att ha störst inverkan. I princip innebär detta att minska filstorleken på dina bilder med hjälp av två populära former av komprimering: destruktiv och icke-destruktiv. WEBP stöder båda komprimeringsmetoderna!

Idag kommer vi att gå in på båda dessa typer av bildkomprimering och diskutera vilken vi rekommenderar att du använder. Detta kan variera beroende på vilken typ av verksamhet du driver.

Destruktiv komprimering

Den första formen av komprimering är destruktiv. Destruktiv komprimering innebär att eliminera lite data i din bild. Det betyder att du kan se en viss nedbrytning (minskning av kvalitet eller vad vissa kallar pixelering). Så du måste vara försiktig med hur mycket du reducerar din bild. Inte bara på grund av kvalitet, men också för att du inte kan ångra processen. Naturligtvis är en av de stora fördelarna med destruktiv komprimering, och anledningen till att det är en av de mest populära komprimeringsmetoderna, att du kan minska filstorleken ganska rejält.

  • JPEG och GIF är båda destruktiva bildformat.
  • JPEG är bra för webbplatser som behöver snabba laddningstider eftersom du kan justera kvalitetsnivån för en bra balans mellan kvalitet och filstorlek.

(Lästips: JPG vs JPEG: att förstå det vanligaste bildfilsformatet)

WordPress komprimerar bilder automatiskt

Visste du att WordPress automatiskt komprimerar dina JPEG-filer när du laddar upp dem till mediebiblioteket? Som standard har WordPress komprimerat bilder automatiskt upp till 90% av dess ursprungliga storlek. Men från och med WordPress 4.5 ökade de detta till 82% för att ytterligare öka total prestanda. Om du undrar varför dina bilder ser lite pixelerade ut på en ny WordPress-installation, är det därför.

Medan automatisk komprimering är bra har vi i allmänhet sett att 82% ingalunda räcker till när det gäller att verkligen göra en inverkan på webbplatsens prestanda. Därför kan du inaktivera det här alternativet om du vill genom att lägga till följande filter till temats functions.php-fil. Kom ihåg att alltid ta en säkerhetskopia innan du redigerar din webbplats.

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Om du vill öka det automatiska komprimeringsförhållandet för WordPress kan du lägga till filtret och minska procenten av den ursprungliga filen, till exempel 70% i exemplet nedan.

add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );

Kom ihåg att dessa inte kommer att påverka redan uppladdade bilder. Du skulle behöva gå igenom dem med ett plugin som Regenerate Thumbnails för att tillämpa det på ditt befintliga mediebibliotek. Eller ännu bättre rekommenderar vi helt enkelt att lämna ditt tema ifred och helt enkelt använda ett bildoptimeringsplugin för WordPress (som vi kommer att gå in på lite längre ner) eller ytterligare komprimera dina bilder innan du laddar upp dem.

Komprimera bilder med Spara för webben (programvara)

Du kan använda verktyg som Adobe Photoshop, Affinity Photo, Affinity Designer eller andra bildredigerare för att justera kvalitetsinställningarna för en bild (se nedan). I en majoritet av verktygen finns detta under ”Spara till webben” eller ”Exportinställningar”.

Ändra kvaliteten på fotot
Ändra kvaliteten på fotot

Om vi gör en liten jämförelse för destruktiv komprimering kan vi se att 50% ser bra ut. 33% börjar bli lite suddigt för några av bakgrundsdetaljerna (men är ganska omärkbart), och 5% är självklart inte acceptabelt. Detta är bara ett exempel på varför de automatiska 82% i WordPress inte räcker. Du kan och bör komprimera mycket mer för att ytterligare minska filstorlekar.

  • original.JPG 2.82 MB (2000px : 1463px)
  • lossy-compressed-1.JPG: 227 KB (2000px : 1463px) 91,95% reducering
  • lossy-compressed-2.JPG: 185 KB (2000px : 1463px) 93,44% reducering
  • lossy-compressed-3.JPG: 5 KB (2000px :  1463px) 99,82% reducering
Destruktiv komprimering jämförelse
Destruktiv komprimering jämförelse

Låt oss säga att du väljer 50% komprimering. Filstorleken är 227 KB, vilket definitivt är mycket mindre än den ursprungliga 2MB-filen. Det är dock fortfarande inte bra om det här bara är en av 15+ andra bilder på en sida. Generellt är det bäst att hålla alla dina bilder under 100 KB om möjligt. I mina fall borde du kunna gå mycket mindre. Här är det också viktigt att ändra storlek på dina bilder. 50%-bilden skalas först ner till 1251px : 916px och är bara 95 KB.

Men kom ihåg, du kanske inte vill ändra dina bilders storlek så mycket eftersom WordPress från och med version 4.4 har stöd för responsiva bilder (som inte skalas ned av CSS). WordPress skapar automatiskt flera storlekar av varje bild som laddas upp till mediebiblioteket. Genom att inkludera de tillgängliga storlekarna på en bild i ett srcset-attribut kan webbläsare nu välja att ladda ner den lämpligaste storleken och ignorera de andra. Se exempel på hur din kod faktiskt ser ut nedan.

srcset responsiva bilder exempel i kod
srcset responsiva bilder exempel i kod

Så i och med fler och fler HiDPI-skärmar nuförtiden kan det vara bra att hitta den gyllene medelvägen. Säg ungefär 2x eller 3x din webbplatskolumn eller ”div size”, men fortfarande mindre än den ursprungliga storleken. Webbläsaren visar den rätta baserat på enhetens upplösning.

Google rekommenderar destruktiv komprimering

Använder du Google PageSpeed Insights? Om så är fallet är du förmodligen bekant med varningen som säger att du ska ”optimera bilder”. Redan 2017 uppdaterade Google faktiskt sin dokumentation för att nu rekommendera att använda destruktiv komprimering som ett sätt att ytterligare snabba upp din webbplats.

Google PageSpeed Insights varning optimera bilder
Google PageSpeed Insights varning optimera bilder

Om du vill bli av med dessa varningar är ett av de enklaste sätten att använda destruktiv komprimering för att blidka Google.

Icke-destruktiv komprimering

Nu är det dags att gå in på den andra formen av komprimering, icke-destruktiv. Icke-destruktiv komprimering, till skillnad från destruktiv, minskar inte kvaliteten på bilden. Hur är det möjligt? Det görs oftast genom att ta bort onödiga metadata (automatiskt genererade data som produceras av enheten som fångar bilden). Men den största nackdelen med denna metod är att du inte kommer se en betydande minskning av filstorleken. Med andra ord kommer de att ta upp mycket diskutrymme med tiden.

  • RAW, BMP, GIF och PNG är icke-destruktiva bildformat.
  • Du kan utföra en icke-destruktiv komprimering på datorn med hjälp av verktyg som Photoshop, FileOptimizer, eller ImageOptim.
  • Vissa plugins kommer att använda Gzip-komprimering till bilder (att minifiera dem).

Kinsta-användare kan dra nytta av kodminifierings-funktionen som är inbyggd direkt i MyKinsta-instrumentpanelen. Detta gör det möjligt för våra kunder att enkelt aktivera automatisk CSS- och JavaScript-minifiering med ett enkelt klick. Detta kan hjälpa till att snabba upp en webbplats utan manuell ansträngning.

Om vi gör en liten jämförelse av destruktiva komprimeringsnivåer kan vi se att när du använder icke-destruktiv komprimering förlorar du inte någon kvalitet som helst. Filstorleken på bilden minskades dock endast med 10,84%. Detta jämförs med över 90% vid användning av destruktiv komprimering.

  • original.JPG: 227 KB (2000px : 1463px)
  • lossless-compressed.JPG: 203 KB (2,000px : 1463px)
Icke-destruktiv komprimering jämförelse
Icke-destruktiv komprimering jämförelse

Vilken komprimeringsmetod är bättre?

Svaret på detta är faktiskt upp till dig. För majoriteten av användare rekommenderar vi att du använder destruktiv komprimering på grund av det faktum att du enkelt kan komprimera en bild med mer än 70% (ibland över 90%!) utan någon stor kvalitetsförlust. Multiplicera detta med 15 bilder på en sida och det kommer att spela en viktig roll för att minska webbplatsens laddningstid. Inte bara det, men destruktiv komprimering kommer att se till att du använder så lite diskutrymme som möjligt – vilket i sin tur innebär att du kan spara pengar på hosting.

Icke-destruktiv komprimering är för den som inte har råd med någon kvalitetsförlust. Fotografer, matbloggare och modeller är bara några som förlitar sig på pixel-perfekta bilder för att försörja sig. I dessa fall är det viktigt att du hostar dina bilder på ett CDN. På grund av storleken kan du till och med behöva avlasta dem till en tredje parts lagringstjänst som Amazon S3 eller Googles molnlagring.

Så använder du destruktiv komprimering i WordPress

Om du fortfarande är förvirrad över destruktiv och icke-destruktiv komprimering, oroa dig inte, det finns en hel del bra bildoptimeringsplugin för WordPress som du kan välja mellan för att automatiskt tillämpa destruktiv komprimering.

Innan du använder ett tredjepartsverktyg så bör du dock tänka på att vissa hostar inkluderar verktyg eller tjänster som hjälper dig att optimera dina bilder direkt från din hosting-panel. Kinsta tillhandahåller exempelvis en kostnadsfri bildoptimeringsfunktion till alla kunder. Den skapar WebP-kopior av en webbplats bilder (lagras utan extra kostnad), och levererar sedan den minsta av de två filerna till besökaren. Detta snabbar upp laddningstider och förbättrar användarupplevelsen, särskilt eftersom den är ihopkopplad med Kinsta’s blixtsnabba CDN.

Om din host inte tillhandahåller en tjänst som denna, kan du kolla in ett bildoptimeringsverktyg från tredje part. Några av de mest använda alternativen inkluderar:

  • Imagify (destruktiv och icke-destruktiv)
  • WP Smush (destruktiv och icke-destruktiv)
  • EWWW Moln (destruktiv och icke-destruktiv)

Obs! alla ovanstående använder sina egna tredjepartsservrar för att komprimera bilder. Du bör alltid komprimera bilder offsite av prestandaskäl. 👍

Imagify är ett av de mest populära alternativen som vi har listat. De har en kostnadsfriplan, men deras betalda planer är också väldigt rimliga. Du kan optimera en hel del bilder med endast ”Lite”-planen (1 GB per månad), och de erbjuder billiga månads- eller årliga betalningsalternativ.

Imagify har tre olika optimeringsnivåer:

  • Normal: Det här läget använder icke-destruktiv komprimering, vilket innebär att dina bilder inte kommer att förlora någon kvalitet, men de kommer inte heller att reduceras så mycket i storlek.
  • Aggressivt: Detta läge använder destruktiv komprimering och ger drastiska besparingar på den ursprungliga vikten, med en liten reducering av bildkvalitet. För det mesta är det inte ens märkbart.
  • Ultra: Detta läge använder destruktiv komprimering och tillämpar alla tillgängliga optimeringar för maximal bildkomprimering. Detta kommer att ge stora besparingar för den ursprungliga vikten, men du kommer antagligen märka lite försämring på bilden.
Imagify-inställningar
Imagify-inställningar

Vi använder det aggressiva läget på Kinsta och ser vanligtvis 60-70% i besparingar beroende på bilden. Obs! vi använder faktiskt mycket oftare PNG än JPEG eftersom de flesta av våra bilder är ikoner och illustrationer, inte foton.

Bildkomprimering filbesparingar
Bildkomprimering filbesparingar

Du kan aktivera auto-optimera bilder vid uppladdning (vilket vi rekommenderar så att du inte glömmer) eller använda dess mass-bildoptimerare i mediabiblioteket. Du kan också låta det säkerhetskopiera originalbilden. Detta låter dig faktiskt konvertera din bild till andra optimeringsnivåer vid ett senare tillfälle eller till och med återställa din ursprungliga bild. Om du inte använder den här funktionen rekommenderar vi att du håller den avstängd för att spara på diskutrymme.

Du bör vanligtvis ändra storlek på dina bilder i förväg, men Imagify har en Ändra storlek på större bilder-funktion om du glömmer eller inte har tid. Förutom destruktiv komprimering, är detta en annan jättebra filstorleksbesparingsmetod!

Imagify ändra storlek på bilder
Imagify ändra storlek på bilder

Vi faktiskt nyligen använt mass-bildoptimering funktionen på hela vårt mediabibliotek. Som du kan se sparade det över 700 MB! Detta är enormt när det gäller front-end-prestanda.

Mass-bildoptimering besparingar
Mass-bildoptimering besparingar

Hastighetstester

Låt oss göra ett litet test! Eftersom vi ständigt ser användare ladda upp bilder i full upplösning utan komprimering ska vi göra en liten jämförelse över hur detta påverkar webbplatsens totala prestanda.

Test 1 – Original okomprimerat

Vi laddade först upp 10 okomprimerade bilder. Vi körde sedan 5 tester på Pingdom och tog genomsnittet. Vi kan se att den totala laddningstiden är 3,04 sekunder med en total sidstorlek på 28,4 MB.

  • uncompressed-1.jpg (2.82 MB)
  • uncompressed-2.jpg (2.82 MB)
  • uncompressed-3.jpg (2.82 MB)
  • uncompressed-4.jpg (2.82 MB)
  • uncompressed-5.jpg (2.82 MB)
  • uncompressed-6.jpg (2.82 MB)
  • uncompressed-7.jpg (2.82 MB)
  • uncompressed-8.jpg (2.82 MB)
  • uncompressed-9.jpg (2.82 MB)
  • uncompressed-10.jpg (2.82 MB)
Hastighetstest okomprimerade bilder
Hastighetstest okomprimerade bilder (Pingdom)

Test 2 – Komprimerat

Vi laddade sedan upp exakt samma bilder igen, men den här gången aktiverade vi ”Auto-optimera” i pluginet Imagify. Vi körde sedan 5 tester igen på Pingdom och tog genomsnittet.

  • compressed-1.jpg (69.3 KB)
  • compressed-2.jpg (69.3 KB)
  • compressed-3.jpg (69.3 KB)
  • compressed-4.jpg (69.3 KB)
  • compressed-5.jpg (69.3 KB)
  • compressed-6.jpg (69.3 KB)
  • compressed-7.jpg (69.3 KB)
  • compressed-8.jpg (69.3 KB)
  • compressed-9.jpg (69.3 KB)
  • compressed-10.jpg (69.3 KB)

Vi kan se att den totala laddningstiden nu är 522 ms med en total sidstorlek på 901,4 KB. Så våra bilder med destruktiv komprimering gav en minskad sidladdningstid med 82,83%! 😮Den totala sidstorleken reducerades också med enorma 96,83%. Och våra bilder ser fortfarande högkvalitativa ut tack vare Imagify.

Hastighetstest komprimerade bilder
Hastighetstest komprimerade bilder (Pingdom)

Sammanfattning

När du bestämmer vilken kvalitet du behöver för bilder på din webbplats kan du välja om du vill använda destruktiv eller icke-destruktiv komprimering. Återigen, för personer som är mer oroade över hastighet och mindre om kvalitet rekommenderar vi destruktiv komprimering. Kom ihåg att bilder med destruktiv komprimering kan se vackra ut om du hittar rätt balans. Om du behöver pixel-perfekta bilder bör du alltid välja icke-destruktiv komprimering.

Vad tycker du? Använder du destruktiv eller icke-destruktiv komprimering på din WordPress-sajt? Låt oss veta nedan i kommentarerna.

Brian Jackson

Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.