Komprimera bilder utan kvalitetsförlust: så fungerar SW3 Images

Stora bilder är fortfarande en av de vanligaste orsakerna till långsamma webbplatser. De förlänger laddtider, ökar dataöverföringen och drar mer energi vid varje sidvisning, hos besökaren, i nätverket och på servern. Ändå komprimerar många webbplatser sina bilder med samma fasta kvalitetsinställning för alla bilder, oavsett innehåll. Resultatet blir antingen onödigt stora filer eller synligt försämrad bildkvalitet.

Sustainable WWW har byggt SW3 Images för att lösa det problemet. Verktyget är gratis, kräver inget konto och finns på images.sustainablewww.org.

Ett annat sätt att komprimera bilder

De flesta komprimeringsverktyg fungerar på samma sätt. Du väljer en kvalitetsnivå, till exempel 80 procent, och verktyget komprimerar alla bilder efter samma mall. Det är enkelt att bygga, men trubbigt i praktiken. En bild med mycket detaljer och en bild med jämna färgytor tål helt olika grad av komprimering innan skillnaden syns för ögat.

SW3 Images använder en annan metod. Istället för en fast gräns analyserar verktyget varje bild för sig och söker efter den minsta filstorlek som fortfarande ser identisk ut med originalet. Varje kandidatfil mäts mot originalet med DSSIM, ett perceptuellt mått som efterliknar hur det mänskliga ögat uppfattar strukturella skillnader i bilder. Mätningen görs i Lab-färgrymden, vilket ger ett resultat som ligger närmare verklig visuell uppfattning än en enkel pixel för pixel-jämförelse.

Om ingen komprimerad version klarar tröskeln för visuellt lika, komprimerar verktyget alltså inte bilden till en sämre kvalitet i onödan. Då behålls originalfilen istället. Bilden blir aldrig sämre, bara mindre när det är möjligt.

I praktiken innebär det att en bild med stora enfärgade ytor, till exempel en produktbild mot vit bakgrund, ofta kan komprimeras betydligt mer än en bild med mycket textur, som ett fotografi av tyg eller lövverk. Ett fast kvalitetsvärde tar ingen hänsyn till den skillnaden. Den perceptuella analysen i SW3 Images gör det, bild för bild, varje gång.

Byggt i Rust för effektiv beräkning

Att analysera varje bild individuellt kräver mer beräkning än att bara applicera en fast inställning. Därför är hela komprimeringsmotorn i SW3 Images skriven i Rust, ett språk som är känt för att ge C-liknande prestanda med minneshantering utan skräpinsamling under körning. Det gör att den perceptuella analysen kan köras snabbt och med låg processorbelastning, även vid bearbetning av flera bilder i samma batch.

Beroende på filformat används olika beprövade komprimeringsbibliotek under motorhuven. JPEG-bilder komprimeras med mozjpeg, PNG-bilder med imagequant och oxipng, och WebP-bilder med libwebp inställt på maximal komprimeringsgrad. Formatet ändras aldrig. En PNG som laddas upp kommer alltid ut som PNG.

Ändra storlek samtidigt som du komprimerar

Filstorlek handlar inte bara om komprimeringsgrad, utan också om bildens faktiska dimensioner. En bild som är 4000 pixlar bred men visas i en 800 pixlar bred behållare på webbplatsen slösar bandbredd oavsett hur väl den är komprimerad.

SW3 Images låter dig därför ange en maxbredd i pixlar. Bilder som är bredare skalas ner med bevarat bildförhållande innan komprimeringen sker. Bilder skalas aldrig upp, eftersom det bara skulle öka filstorleken utan att tillföra någon faktisk bildinformation.

Så används verktyget

Du drar och släpper dina JPG-, PNG- eller WebP-bilder i webbläsaren, upp till 30 MB per bild och upp till tio bilder åt gången utan registrering. Du väljer eventuell maxbredd, klickar på komprimera och laddar sedan ner resultaten enskilt eller som en zip-fil. I samma steg tas metadata som EXIF och GPS-position bort automatiskt, vilket både minskar filstorleken ytterligare och skyddar den som fotograferat bilden från att oavsiktligt dela platsdata.

Uppladdade filer nås endast via en unik länk och raderas automatiskt efter 24 timmar. Standardgränsen är tio bilder per omgång. Den som lämnar namn och e-post får gränsen höjd till femtio bilder, praktiskt vid större omfotograferingar eller vid arbete med hela bildbibliotek inför en lansering.

Varför det spelar roll för en snabbare och grönare webb

Bildoptimering är ett av de mest konkreta stegen en webbplats kan ta för att bli snabbare och mer hållbar. Mindre filer betyder kortare laddtider, mindre dataöverföring och lägre energiförbrukning per sidvisning, vilket är kärnan i vad hållbar webbutveckling handlar om i praktiken. Det är inte bara en fråga om användarupplevelse, utan om hur mycket beräkning och energi varje sidvisning faktiskt kräver, i klientens enhet, i nätverket och i servrarna som levererar innehållet.

Genom att göra den här typen av optimering tillgänglig som ett gratis verktyg vill Sustainable WWW sänka tröskeln för alla som publicerar bilder på webben, oavsett teknisk bakgrund, att ta ett steg mot en lättare och mer tillgänglig webbplats.

Prestanda och tillgänglighet hänger dessutom ihop mer än många tror. Långsamma sidor med tunga bilder är ett vanligt hinder i WCAG-granskningar, särskilt för besökare med begränsad bandbredd, äldre enheter eller kognitiva svårigheter som gör långa väntetider extra påfrestande. Att hålla nere bildstorlekar utan att offra visuell kvalitet är därför inte bara en teknisk optimering, utan också en del av att bygga webbplatser som fungerar för fler.

SW3 Images är ett smakprov på hur Sustainable WWW arbetar med prestanda och hållbarhet i varje projekt. Vill du se samma tänk applicerat på en hel webbplats, från kod till design, går det bra att höra av sig till oss.

Michael Andersen

Medgrundare & Webbutvecklare

Michael bygger hållbara webbplatser och skriver om skärningspunkten mellan webbutveckling och miljöpåverkan.

Fler artiklar

Analys & optimering Hemsideoptimering: hur vi analyserar och förbättrar befintliga webbplatser Läs mer →

Prestanda Hur vi bygger webbplatser som laddar på under 300 millisekunder Läs mer →

Webbutveckling Varför din webbplats är långsammare än den borde vara Läs mer →