Het antwoord op website obesitas: HTML Responsive images

De laatste jaren zijn webbouwers nogal verwend geraakt door de toegenomen bandbreedte van gebruikers. Adsl en kabel internet is steeds sneller geworden en veel bedrijven hangen aan een glasvezel. Daardoor konden webpagina’s steeds groter en zwaarder worden. Inmiddels is een gemiddelde pagina 1,9 Mb groot en maar liefst 1,2 Mb daarvan bestaat uit afbeeldingen.

Geen probleem voor een gemiddelde privé site, maar als je geld wilt verdienen met je site is dat het wel. De snelheid van je site is belangrijk.

Grote plaatjes laden trager en dat heeft negatieve gevolgen voor je Google ranking. Maar dat niet alleen; een halve seconde vertraging betekent 20% minder traffic volgens Google en iedere 100 milliseconde vertraging kost Amazon 1% omzet.

Telefoons, Tablets, Fablets, Retina…
En dan is er nog het mobiele internet dat inmiddels meer dan de helft van al je website bezoekers gebruikt. Eenvoudig kleine plaatjes serveren naar een mobiel device is niet genoeg want soms is dat mobiele device verbonden met je breedband WiFi en sommige mobiele apparaten hebben een full HD scherm. Sommige mensen willen het liefst de hoogste kwaliteit, anderen hebben liever snelheid. Wat de meest ideale weergave is voor iedere specifieke gebruiker zou door de browser beslist moeten worden.

Bruce Lawson, een zelfbenoemd een html-coholic en medewerker van Opera, heeft meegewerkt aan een oplossing voor dit probleem en het resultaat wordt nu geïmplementeerd in de HTML5 standaard.

HTML5 Video
Het mooie is: de oplossing is afgekeken van de manier waarop videostreams worden aangepast aan de bandbreedte van gebruikers, ofwel adaptive streaming!

Hoe het precies zit legde Bruce met wat hulp van een fee en elfjes uit tijdens een goedbezochte Drupal conferentie: Drupaljam in Utrecht.

Slides: here
Camera: Katharina Pöhlmann en Eelco Romeijn
Assistentie: Jasper Laban