Optimerade bilder


Analys:
Jag kan sätta en exakt storlek på mina bilder, jag kan komprimera dem i ett format såsom webp och självklart minska pixeldensiteten av bilderna via komprimering. Orelaterat till bild optimisation så kan jag också lägga till “<meta name=”viewport” content=”width=device-width, initial-scale=1″>” till mitt head element då användarens session fryses i 300ms om jag inte tillägger det.

Provade precis att lägga till det som de ville men märkte att det sänkte min performance score från 80 till ungefär 40 så jag tror deras rekommendation är fel.

Jag började med imageresizer.com men mina bilder blev väldigt suddiga när jag gjorde det, tänker prova att dubbla upplösningen för att se ifall det fortfarande händer.

Nu ser bilderna nästan identiska ut och de är ungefär 10x mindre än orginal storleken men de första var ungefär 40x mindre så jag provar att komprimera dem på annat sätt nu.

Jag provade tinypng men den komprimerade bilderna betydligt sämre och minskade bara storleken med 25% jag gissar att det är för den inte har tillåttelse att minska upplösningen därför provar jag nu att köra mina redan komprimerade bilder i den.

Denna gången så minskade bildernas storlek med 30% och det är fortfarande visuellt identiska, detta är så mycket som jag orkar göra just nu och jag tvivlar på att jag kan förbättra dem mycket mer.

Nu får jag en 97a i performance och de tror att jag kan få ner filstorleken till hälften av nuvarande ifall jag byter till avif eller webp men jag tycker att detta är bra nog men det är alltid bra att veta att det kan förbättras.

Jag är rätt så nöjd eftersom sidan laddas betydligt snabbare nu och bilderna tar upp mindre plats på oderland.


Leave a Reply

Your email address will not be published. Required fields are marked *