Geoptimaliseerde afbeeldingen op je site: beter, sneller, duidelijker

09 nov 2016, door
Average

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

Over de auteur

Barry Kampstra is oprichter, mede-eigenaar en CTO van Daisycon. Hij heeft de dagelijkse leiding over het technische team van Daisycon en is eindverantwoordelijk voor de techniek.

Artikelen van deze medewerker

11 jul 2017 API verder uitgebreid: makkelijk producten zoeken
09 nov 2016 Geoptimaliseerde afbeeldingen op je site: beter, sneller, duidelijker
04 nov 2016 Steeds meer verkeer secure
26 okt 2016 Altijd de juiste productselectie met de EAN-checker
05 okt 2016 Nieuw filter Productfeedmanager

Reacties:

Barry Kampstra http://https://www.daisycon.com/
14 jul 2017

Michal, bedankt voor de melding over de PHP-error, er was inderdaad een foutje ingeslopen bij foutieve aanroepen. Die andere suggestie ga ik eens onderzoeken, bedankt.

Michal Skrzypecki
13 jul 2017

Doe even de php meldingen weg: https://daisycon.io/images/?pid=daisycon_unique_id&width=XXXX&height=YYYY&color=color Bezoek de link maar zonder iets in te vullen. Additioneel. Misschien dat dit een technisch betere oplossing is dan met php te werken. Voor jullie servers zal het sowieso fijner zijn: https://gist.github.com/rahit/ea1b3a740bd20bc4ba64

Francis
28 nov 2016

Ik zie dat je zowel de hoogte als breedte in moet vullen... maar is er ook een afbeelding naar ratio mogelijk?

Gustavo Woltmann
22 nov 2016

Meerdere plaatjes per product lijkt mij ook erg interessant.

Gustavo Woltmann
15 nov 2016

erg handig!

Barry Kampstra http://https://www.daisycon.com
13 nov 2016

Frank: Zekers, de plaatjes uit de vergelijkers gaan we ook optimaliseren! Francis: Er is gekozen om op productID te werken omdat dat het enige is dat écht uniek is bij een product. De namen willen soms nog wel een gelijk zijn, terwijl het een ander product betreft.

Francis
10 nov 2016

Waarom is er gekozen voor het ProductID i.p.v. de naam van de jpg? Ik neem aan dat de meeste sowieso al de jpg-naam in hun database plaatsen. Nu moet je ook ProductID in de database plaatsen (in mijn geval al bijna 5gb groot), die je eigenlijk niet nodig hebt om een product op je pagina te laten zien.

Frank
10 nov 2016

Zeker! Wellicht dat jullie de paatjes in de vergelijkers ook kunnen optimaliseren?

Barry Kampstra http://https://www.daisycon.com
10 nov 2016

Marc, goed punt. Momenteel ondersteunen we één plaatje per product, maar dit staat zeker op de roadmap!

Marc van der Meulen
10 nov 2016

Goed nieuws dit, maar hoe zit het met meerdere plaatjes voor hetzelfde product/deal? Sommige feeds hebben meerdere foto's voor bijvoorbeeld voorkant en achterkant van een product.

Reageren:

captcha refresh

 

Zoek een campagne!

Blijf op de hoogte:
Op deze website is een disclaimer en ons algemene privacybeleid van toepassing.