Minska bildstorleken på webben: en praktisk arbetsgång

Börja med originalet och rätt dimensioner

Spara originalbilden separat innan du ändrar något. Anteckna bildens bredd, höjd och filstorlek så att du kan jämföra resultatet efteråt. Kontrollera sedan hur stor bilden faktiskt visas på sidan, både på mobil och dator. En bild som visas i en liten kortyta behöver vanligtvis inte samma dimensioner som en stor huvudbild. Skapa kopior för de användningsområden du har och behåll proportionerna. Kontrollera också beskärningen: ansikten, produktdetaljer och eventuell text måste fortfarande synas i den mindre versionen.

Jämför format med samma bild

Prova exempelvis WebP och JPEG för fotografier. Om bilden har genomskinlig bakgrund behöver exporten stödja transparens, till exempel PNG eller WebP. Behåll samma dimensioner när du jämför format, annars vet du inte vilken förändring som gav besparingen. Lägre kvalitetsinställning kan ge mindre filer men också synliga fel. Granska därför tunna linjer, text, färgövergångar och kanter. Ett visst kvalitetsvärde ger inte samma resultat i alla verktyg. Utgå från din egen bild och välj den minsta version som klarar din visuella kontroll.

Mät besparingen och kontrollera utseendet

Anteckna varje kandidats format, dimensioner och filstorlek. Räkna besparingen som originalets storlek minus den nya storleken, dividerat med originalets storlek. Multiplicera med hundra för procent. Jämför bilderna sida vid sida i den storlek besökaren ska se dem och förstora sedan känsliga detaljer. Har bilden transparens bör du kontrollera den mot både ljus och mörk bakgrund. Mindre filer är ett mätbart resultat, men bevisar inte att hela sidan laddar en viss procent snabbare. Sidans övriga innehåll och anslutningen påverkar också.

Kontrollera sidan efter bytet

Testa den uppdaterade sidan på mobil och dator. Kontrollera att rätt bild laddas, att proportionerna stämmer och att inget viktigt beskärs. Ange bildens bredd och höjd i sidans kod där det är möjligt, så att utrymmet kan reserveras innan bilden har laddats. Bilder längre ned på sidan kan laddas först när de närmar sig visningsområdet; sidans viktiga huvudbild bör inte fördröjas på samma sätt. Jämför sidans laddning före och efter under liknande förhållanden och upprepa mätningen. Spara originalet så att du kan återställa bilden om kontrollen visar problem.