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

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)

Bild 3 - PNG-format

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

Bild 3 - JPG-format

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.

Bild 3 - JPG-format

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%.

Optimizing images on the mio.se website (1/2)

Optimizing images on the mio.se website (2/2)

0 0 vote
Article Rating
Per Axbom

Per Axbom

@axbom

Per Axbom är kommunikationsvetaren som föddes i Liberia. I 20 år har han utbildat den digitala yrkeskåren och hjälpt organisationer med digital användbarhet och tillgänglighet. Per gör teknik trygg och omtänksam genom reflektivt resonerande, hänsynstagande design, coaching och utbildning. Du kan höra hans röst på UX Podcast.

Digital omtanke bokomslag Pers nya handbok om etik i teknikbranschen, Digital omtanke, finns att köpa hos Bokus. Den engelska upplagan finns även i Kindle-format hos Amazon.

Anlita Per för föreläsning, workshop eller coachning.

Leave a Reply

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.

12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kalle
8 years ago

Varför måste du köra med kvällstidningsrubrik. Testa en vänligare rubrik och mer konstruktiv: Mio kan förbättra bildkomprimeringen utan att tappa kvalitet… eller?

[…] Mio misslyckas katastrofalt med bilder på webben […]

Niklas
8 years ago

Inte för att vara sån men, i filmen när du använder smush tool så säger du att bilder går från x KB (result) till y KB (savings). Det som egentligen ges är att resultatet (result) är storleken som den komprimerade bilden fick (result) och att ”savings” är hur mycket KB man kan komprimera bort. Jag tror i och för sig att alla fattar det då den procentuella uträkningen inte stämmer om det skulle fungera på det sättet som du säger i filmen. Hur som helst så är det fantastiskt att se hur sidor likt dessa använder sig av fel format… Read more »

En annan Niklas
8 years ago

Väldigt intressant inlägg, dock får jag nog säga att färgskillnaderna mellan bilderna 1 och bilderna 3 är tillräckligt stor för att ändå kunna se det som medvetet. Färgerna skiljer sig ganska nämnvärt, speciellt vad det gäller känslan av träet på sängen. Den komprimerade ser definitivt lite tröttare och gulare ut, inte alls lika levande och djupt röd som bild 1.

Kosttillskott
8 years ago

Verkligen förvånande att ett så stort företag som Mio faktiskt är inte har någon som har koll på det här.
Hur märkte att det var som så?

8 years ago

Hej Per! Intressant inlägg, och klart något som jag kan lära av. Har varit förtjust i PNG dels för att den är ”lossless” under processen innan publicering, dels för att den tillåter genomskinlighet på webben. Inget av detta spelar ju förstås nån roll i det sammanhang du visar – man kan ju alltid spara om till komprimerad JPG det sista man gör, eller ha ett publiceringsverktyg som gör det automatiskt. Jag tror att många blivit slappa med såna här frågor när bredbandet slog igenom – men med mobila platformar på 3G är det plötsligt väldigt aktuellt igen! Det kan vara… Read more »

6 years ago

air max bw…
entra?nant deux heures air max bw retard pour quelque 900 voyageurs en provenance de Paris, Le comité central dentreprise CCE et le comité détablissement des sites touchés par le plan social essentiellement Aulnay et Rennes? ont maillot de foot overblo…

6 years ago

maillot de foot…
もフォースクエア、Booyah、Yelp のような適用する機能…

サマンサタバサ バッグ 激安…
The center grand opened to great fanfare last November, causing traffic on I-580 to slow with a crawl for hours in both directions….

12
0
Would love your thoughts, please comment.x
()
x