-

Eindelijk: ook plaatjes worden responsive

Het mobiele web rukt op, maar de plaatjes die worden weergegeven zijn vaak nog bedoeld voor desktopweergave. Daar komt verandering in, via een nieuw HTML-element dat nog dit jaar door Chrome en Firefox wordt ondersteund.

Toegegeven: het laden van plaatjes op een smartphone hoeft tegenwoordig niet echt meer een probleem te zijn. Met 4G-snelheden is de verbinding snel genoeg. Maar plaatjes van 1 tot 1,7 MB zorgen er wel voor dat de datalimiet sneller bereikt zal zijn. En niet overal zijn snelle mobiele verbindingen.

De eerste oplossing was niet ideaal: een aparte mobiele site met ‘zuinige plaatjes’. Die pagina’s waren wel snel, maar arm in mogelijkheden, en dus niet bevredigend. De tweede oplossing was responsive design, waarbij de webpagina zich aanpast aan de grootte van het scherm of het gebruikte apparaat. Dat veranderde echter niks aan de grootte van de plaatjes. Die bleven even zwaar, ook al werden ze klein weergegeven. Plaatjes schalen met behulp van Cascading Style Sheets blijft problematisch.

Daarop besloten ontwikkelaars van de Boston Globe, onder wie Mat Marquis, aan een alternatief te werken: een nieuw HTML-element. Zij kregen al ondersteuning van andere ontwikkelaars, onder wie Googles Paul Irish en Opera’s Bruce Lawson. Om een lang verhaal kort te maken: het Picture element is klaar.

Als een server een pagina stuurt naar de browser, wordt alleen HTML ingeladen, maar tegenwoordige webbrowsers beginnen vaak al met de plaatjes, zonder te weten waar die komen. Dat heet prefetching en gebeurt met JavaScript. Voordeel is dat plaatjes zo sneller laden, maar deze toepassing houdt geen rekening met de schermgrootte.

In de nieuwe opzet kijkt de browser naar wat de webontwikkelaar bedoeld heeft, maar laat er vervolgens zijn eigen criteria op los om het beste plaatje te kiezen, vooropgesteld dat die beschikbaar zijn. De browser kan ook besluiten om via een trage 3G-verbinding geen zware plaatjes te laden. Het omgekeerde is ook denkbaar: De eerste responsive webontwerpen die rekening houden met scherpe retinaschermen (iPad, iPhone, MacBooks) bestaan al. Juist daar wil je hogere resolutie kunnen bieden.

Tot voor kort was er geen enkele browser die het Picture element ondersteunt. Freelance ontwikkelaar Yoav Weiss begon daarom in zijn vrije tijd te sleutelen aan Blink, de kern van de (open source) Chrome browser en andere ontwikkelaars ondersteunden hem bij de ontwikkeling van andere browsers. Dat heeft ertoe geleid dat Chrome en Firefox nog voor het einde van het jaar Picture gaan gebruiken. Het zit zelfs al in vroege versies. Opera wordt de derde browsermaker die Picture gaat ondersteunen. Apple doet er langer over. Safari 8 zal het nog niet ondersteunen. Microsoft overweegt implementatie in een ‘eerstvolgende versie’ van Internet Explorer.

Meer weten? Uitgebreide technische details in niettemin klare taal vind je hier.

Deel dit bericht

Plaats een reactie

Uw e-mailadres wordt niet op de site getoond