Intelligent bildoptimering med ShimmerCat

Komprimerade bilder – snabbare webshop Stora bilder är den vanligaste anledningen till att hemsidor laddar långsamt. Inte bara skapar detta irritation hos besökarna – det påverkar din rankning i sökresultaten negativt. I många fall kan sidans storlek och laddningstid halveras bara genom att komprimera bilderna. Bilder tar mycket utrymme på webbplatser och de kan ta en lång tid att ladda ner om en besökare exempelvis har en långsam mobilanslutning. Därför är det viktigt att du komprimerar dina bilder så att de tar så lite plats som möjligt. Du kan ofta komprimera format som .jpg och png mer än 70 % utan att bildkvaliteten blir sämre. Om du till exempel har en bild på 1 MB kan den komprimeras så att den bara tar 0,1 MB. Eftersom du säkert har tio produktbilder eller fler på dina produktsidor kan därför bildoptimering ha en betydande effekt på laddningstiden. Samtidigt handlar komprimering av bilder också om kvalitet. Det är alltid möjligt att komprimera bilder så att de nästan inte tar någon plats alls, men då är det å andra sidan kanske omöjligt att se vad bilden föreställer. Den stora utmaningen med effektiv bildoptimering handlar om att hitta en harmoni mellan kvalitet och komprimering – och det är just detta som ShimmerCat fokuserar på. Med en automatiserad lösning baserad på AI som utvecklats av forskare så kan du få marknadens mest intelligenta bildoptimering som helt sköter sig själv!

Bildoptimering är inte bara komprimering utan även kvalitet

Det primära målet med bildoptimering är att hitta en balans mellan lägsta filstorlek och en acceptabel kvalitet på bilden.

För att minska filstorleken används komprimering med dataförlust (så kallad lossy compression) där information i bilden tas bort. Om detta kan göras på ett intelligent sätt, genom att exempelvis använda regelbundenheter i bilden som det mänskliga ögat inte kan upptäcka så är det möjligt att också hitta resultat med acceptabel kvalitet på bilden. 

De två primära sakerna att tänka på vid bildoptimering är filformatet och typen av komprimering som används. Genom att välja rätt kombination av filformat och komprimeringstyp kan bildoptimering ge stora effekter.

Om du vill läsa mer om bildkomprimering kan du exempelvis kika in blogginlägget Image compression and next-gen image formats. 

Optimerade bilder och Google PageSpeed Insight

En vanlig rekommendation i Google PageSpeed Insights är "Serve images in next-gen formats". Med ShimmerCats bildoptimering kommer du börja uppfylla detta, och effekten på webbsidans ranking är oftast väldigt positiv. 

Vad är next-gen format?

Next-gen bildformat är moderna filformat såsom WebP och AVIF som erbjuder bättre och effektivare komprimering för bilder jämfört med de traditionella formaten JPEG och PNG.

WebP är ett bildformat som Google utvecklat med riktigt bra komprimeringsmöjligheter. De lovar 25-35% mindre bildfiler än JPEG och 26% mindre än PNG. Här finns dessutom både stöd för komprimering, transparenta bakgrunder och för animering. Därför kan det ses som ett bra alternativ till både JPEG, PNG och GIF.

AVIF (AV1 Image File) är ett nytt bildformat som utvecklats Alliance for Open Media. AVIF är en konkurrent till inte bara JPEG utan även next-gen format som JPEG 2000 och JPEG XL, samt Googles WebP. Målet är att erbjuda AVIF som ett bättre alternativ med högre bildkvalitet samtidigt som komprimeringen (vilket minskar filstorleken) är bättre.

Finns det några nackdelar med de nya next-gen formaten?

Egentligen inte, men en liten nackdel med att använda WebP idag är att Safari fortfarande inte stödjer formatet.

Dock har Apple officiellt annonserat att stöd har lagts till i Safari 14 på macOS Big Sur samt iOS och iPadOS, läs mer här.

Hur optimerar ShimmerCat till next-gen format?

ShimmerCat använder bildkvalitet som utgångspunkt när originalbilder ska optimeras till next-gen format. När ShimmerCat optimerar en bild så testas flera olika inställningar för varje bildformat och så används ett oberoende kvalitetsmått för välja den kopia av bilden som ska levereras.

Detta innebär att ShimmerCat kan avgöra för varje enskild bild om den ska levereras som WebP, AVIF eller optimerad JPEG. Eftersom alla format har genomgått kvalitetskontroller så kan ShimmerCat välja det bildformat som webbläsaren kan acceptera som har minsta filstorleken.

Funktionen som inkluderar kvalitetsmåttet och bestämmer om en bild är “tillräckligt bra” är ett neuralt nätverk som tränats specifikt på produktbilder från e-handlare, så den är väldigt väl anpassad till att hitta optimala förutsättningar till att bibehålla kvalitet och samtidigt komprimera filstorlek.

Leverans av den minsta bilden bland flera bildformat

Notera att ShimmerCat levererar den minsta bilden bland flera bildformat som webbläsaren har stöd för och som aktiverats för domänen. Exempel:
Om en bild optimerats med ShimmerCat så att Webp-versionen blir 48 kilobytes, AVIF-versionen blir 22.3 kilobytes, och den optimerade JPEG-versionen blir 30 kilobytes.

Då kommer den optimerade JPEG-versionen av bilden levereras till alla webbläsare som ännu inte stöder AVIF. 

Eftersom ShimmerCats bildoptimering är unik genom att den inkluderar en skräddarsydd webbserver så har den anpassats för  att nyttja innehållet i HTTP-headern "Accept:" för att maximera hanteringen vid leveransen av bilder. Alla webbläsare använder den headern och logiken i ShimmerCat fungerar enligt:

• ShimmerCat analyserar "Accept"-headern och adderar bildformat som stöds universellt av samtliga webbläsare, såsom PNG, GIF, JPEG och BMP.
• Från de format som stöds för den specifika HTTP-klienten (webbläsaren), väljs den minsta bilden ut bland de som produceras, och den skickas till besökaren

Så oavsett webbläsare så levereras en giltig bild som webbläsaren kan visa. Utan att man behöver javascript eller query parameters.

Bild-CDN för snabbare leverans av bilder

CDN står för Content Delivery Network och kan förklaras som ett nätverk av servrar för att möjliggöra snabbare leverans av innehåll. Dessa servrar ligger som ett extra lager ovanpå ursprungsservern och både avlastar och hjälper till att leverera innehåll från webbsidan till besökare. 

Eftersom servrarna ligger nära besökarna (“på kanten”) så kallas de ofta edge-servrar. ShimmerCats bildoptimerng inkluderar ett CDN med edge-servrar för att cacha optimerade bilder för att kunna leverera bilderna snabbare till besökarna. 

Undvik att ladda upp en hårt komprimerad bild

Vid optimering så använder ShimmerCat ett kvalitetsmått som jämför den optimerade och komprimerade bilden med originalbilden för att hitta den minsta bilden som samtidigt ger högst kvalitet. 

Om originalbilden redan är komprimerad så innebär det att värdefull information i bilden redan “skalats av”. Det innebär också att det är svårt att komprimera bilden ytterligare. I sådana fall är det bättre att undvika att ladda upp en komprimerad bild och istället låta ShimmerCat genomföra en kvalitets-anpassad optimering på det icke-komprimerade originalet.

För bästa effekt vid användningen av ShimmerCat är det därför rekommenderat att inte ladda upp en hårt komprimerad bild som originalbild . 

Se effekten av bildoptimeringen med Abicart Chrome Extension

För att visa optimeringseffekterna är det möjligt att använda ett dedikerat Chrome-tillägg som visar statistik på webbsidan om bildoptimeringen.

Mer specifikt gör det att användaren kan se vilka bilder som har optimerats, i vilka format och hur mycket de har komprimerats. Du hittar tillägget här.

Bildexempel 
Som ett exempel så tog vi en bild från Abicarts hemsida abicart.se och gjorde en enkel optimering, se nedan. Utan att kvaliteten försämras så reduceras bildens storlek med över 40%. Resultatet  går att se här.