Mio misslyckas katastrofalt med bilder på webben

Jag satt igår kväll med tanken att göra en instruktionsvideo om hur man komprimerar sina bilder för att ladda snabbare på webben. Döm om min förvåning när jag snubblar över möbelföretaget Mio och inser hur de misslyckats katastrofalt med hanteringen av sina produktbilder på webben. Någon har gjort ett riktigt dåligt jobb.

Se videon men mina nyvunna insikter. Tillhörande material finns nedanför. Kommentera gärna om det är något uppenbart jag missat! =)

Här kan du själv jämföra bilderna

• Originalbilderna i PNG-format: bild 1 (339 KB) | bild 2 (550 KB) | bild 3 (721 KB)
• Komprimerade i PNG-format: bild 1 (248 KB) | bild 2 (429 KB) | bild 3 (566 KB)
• Komprimerade i JPG-format (80%): bild 1 (29 KB) | bild 2 (55 KB) | bild 3 (63 KB)
• Uppdatering 23 sep – för att visa att det går att åstadkomma färgkvaliteten även i JPG-formatKomprimerade i JPG-format (90%): bild 1 (55 KB) | bild 2 (95 KB) | bild 3 (111 KB)

Jämförelse av bilder på Mio.se

I filmen minskar jag snabbt filstorleken på bilderna med 90%. Det är snabbt gjort med ett bra bildhanteringsprogram. Så ska det självklart inte vara.

När jag tittar på bilderna så här i efterhand efter att ha gjort videon kan jag villigt erkänna att jag ser några nyansskillnader (se nedan) som förmodligen beror på att det är olika bildformat (PNG vs JPG). Säkert går det att förbättra med lite större storlek på JPG-bilden. Men det finns inget som motiverar att bildens filstorlek ska vara mer än 900 % större. Dessutom kan jag skylla på att jag gjorde min optimering på 2 minuter 😉 – säkerligen kan en grafiker göra det aningen bättre. Uppdatering: Jag har nu lagt till JPEG-bilder med 90%-kvalitet; de bibehåller färgkvaliteten men är ändå 83% mindre i filstorlek.

Mio – bild på säng i originalformat som på mio.se (550 KB)

Mio – samma bild på säng i JPEG-format (55 KB)

Mio – bild på säng i originalformat som på mio.se (95 KB)

Uppdatering 23 sep 2011:

Jag håller med om att det är nyansskillnader i fotona när de är i olika format. Jag visar här samma bild i JPEG format med 90%-kvalitet. Den är på 95 KB och originalbilden ovan är alltså på 550KB. Här är skillnaderna betydligt mindre och bilden är fortfarande 83% mindre. Jag känner att mina argument håller även om vi kan dividera om de exakta procentsatserna.

Diagram från videon med optimering av bilder från Mio

Diagram som visar hur mycket Mio potentiellt skulle kunna spara i filstorlek (i princip över hela sajten) om de optimerar sina bilder. Förbättringspotentialen ligger på ungefär 76%.