Geoptimaliseerde afbeeldingen op je site: beter, sneller, duidelijker

Datum van publicatie: november 9, 2016

Vandaag is er weer een fraaie update live gegaan voor onze publishers, namelijk de “Daisycon productfeed images“. In de productfeeds die onze adverteerders ons aanleveren, staan (bijna) altijd URL’s naar plaatjes van de producten. Deze URL’s zetten wij door in de feeds naar de publishers. Nadeel is dat iedere adverteerder zijn eigen formaten hanteert van de plaatjes, zowel in grootte als bestandsformaat.

Daarom hebben wij het nu zo gemaakt dat een publisher een plaatje van het product op kan vragen in iedere gewenste grootte, wij maken dit plaatje dan in die grootte en leveren het uit in het beste bestandsformaat: PNG voor transparante plaatjes en JPG voor overige plaatjes. Nu hoeft een publisher dus nooit meer plaatjes te resizen, plaatjes op te rekken of te verkleinen of te grote plaatjes in zijn website in te laden.

Hoe werkt het?

Een publisher moet “de daisycon_unique_id” uit de productfeed nemen en het formaat en achtergrond kleur bepalen. Aan de hand daarvan bouw je dan zelf een image-URL op, zoals bijvoorbeeld:

https://daisycon.io/images?pid=daisycon_unique_id&width=XXXX&height=YYYY&color=color

Waarin de variabelen staan voor:

daisycon_unique_id: Het ID van het product uit de feed.
width: Gewenste breedte.
height: Gewenste hoogte.
color: De(hexadecimale) achtergrondkleur. Leeg laten voor transparantie (niet aangeraden).

Een voorbeeld van zo’n URL wordt dan dit: https://daisycon.io/images?pid=123456&width=300&height=200&color=000000.

Voor verdere documentatie over de productfeed zie onze developer pagina’s.

Image optimalisatie

We maken het voor een publisher niet alleen eenvoudig om in iedere gewenste grootte een plaatje te krijgen, we optimaliseren ook nog eens de plaatjes van de adverteerders. Zo verwijderen we alle overbodige data uit de image files, zoals de headers en metadata. Daarnaast passen we een algoritme toe waarmee we het plaatje comprimeren en dus kleiner te maken.

Gemiddeld halen we met deze compressie een vermindering van data van 48%! Natuurlijk mag dit niet ten koste gaan van de kwaliteit van het plaatje. Hoewel ik zeker van ben dat sommige mensen in de wereld een verschil kunnen zien in onderstaand plaatje, moet ik toegeven dat ik geen verschil zie:

kangaroos

Naast het optimaliseren van het plaatje hebben we ook een slimme manier gevonden om het plaatje aan de bezoeker te serveren. We analyseren de verbinding en device dat een bezoeker gebruikt en optimaliseren dan met deze gegevens de laadtijd. Zo heeft het geen zin om een plaatje te serveren van 2.000 pixels breed aan een iPhone gebruiker die een scherm heeft van 960 bij 640 pixels. We downsizen automatisch het plaatje zodat we nooit meer pixels uitleveren dan het device aan kan.

Daarnaast krijgt een gebruiker met een tragere verbinding ook een kleiner (lagere resolutie) plaatje te zien dan iemand met een hoge bandbreedte (hoge resolutie).