Bloggen

...om livet bag teknikken

Den generelle filstørrelse på billeder på internettet er stødt vokset i takt med vi har fået hurtigere forbindelser.
Det hænger jo fint sammen med trenden, som et stykke tid har stået på fullwidth slidere, store produktbilleder, og 100%'s baggrunds- og coverbilleder.

Og de ser jo godt ud (billederne). Meeen.. når båndbredden går ned, får det konsekvenser for dine brugere.

 

 

Komprimér dine billeder

I Photoshop er den typiske tilgang at sætte komprimeringen til et sted mellem 70% og 90%, når billedet skal gemmes. Men Photoshop har ikke den bedste algoritme til komprimering og man mister hurtigt de skarpe detaljer på billedet.

Ved at bruge andre metoder kan man ofte spare op til 50% af størrelsen på dé billeder, man ellers troede var komprimeret godt nok.

Og det er nødvendigt at optimere i dag. Faktisk er komprimering blevet et direkte målepunkt for Google's tekniske optimering, så der er ingen undskyldning for springe det over.

 

 

Eksempel

Et billed fylder 740 kb.
Ved at bruge hhv. Photoshop (med 70% komprimering) og Kraken.io får vi disse resultater:

Photoshop - 281 kb
Kraken.io - 144 kb
 

 

Lagde du mærke til forskellen..?

Ved at køre det gennem en frit tilgængelig tjeneste, har vi skåret 49% af størrelsen af billedet - og endda uden et synligt detaljetab.

Det giver brugerne en hurtigere side og (omregnet i tal) en besparelse på 137 mb båndbredde for hver 1.000 downloads af dette ene billed!
Hvis du tænker 1.000 downloads er meget, så gang lige op med antallet af billeder på et givent site og medregn de mange robotters downloads, og lige pludselig kan det have en stor indflydelse.

 

 

Er nettet bedre end Photoshop?

Både ja og nej. Forklaringen ligger dybt i teknikken;

Basalt set findes der flere forskellige algoritmer til komprimering af billeder, og de er blevet lettere tilgængelig end de var for blot få år siden.
Photoshop synes at være bagud på dette punkt og man kan ofte 'vinde' en del ved [også] at bruge en sekundær metode.

 

 

Eksempel #2

En sammenligning mellem flere forskellige metoder viser ligeledes en klar forskel:

Originalt billed 508 KB
Photoshop 70% 154 KB
Kraken.io (lossy) 102 KB
jpegmini.com 303 KB
mozjpeg 113 KB
imageoptim.com 80% (Mac) 102 KB
RIOT 70% (Win) 84 KB

 

Note: I modsætning til Kraken, Jpegmini og Mozjpeg, er Imageoptim (mac) og Riot (windows) to programmer man skal installere og altså derfor altid har parat til brug, offline. 

 

 

Konklusion

Photoshop og Kraken er mine personlige favoritter. Kraken er måske den ikke er den bedste til at komprimere, men jeg elsker grænsefladen og deres tekniske muligheder.

Kombineret giver de muligheden for at optimere billedstørrelserne i bund.

 

 

Læs mere i guiden til teknisk mobiloptimering:

 

Janich Rasmussen
Om forfatteren: Janich Rasmussen

Problemknuser, nørd og stifter af CGOnline.dk - Løser alt fra lavpraktisk opsætning til advanceret performance optimering.

Har tidligere arbejdet for bl.a. Eniro, Geodatastyrelsen & Dealsales.

Involveret i flere Open Source projekter, herunder Joomla som Janich har elsket at været med til at udvikle og bruge siden 2006.