• #responsive

Nieuw element maakt afbeeldingen responsive

Goed nieuws voor de mobiele gebruikers: er wordt had gewerkt aan een mogelijkheid om afbeeldingen responsive te maken, zodat deze altijd correct worden weergegeven. Daarnaast zorgt deze nieuwe manier ervoor dat de databundel ook nog eens extra gespaard wordt.

Het probleem bij responsive designs, is dat de afbeeldingen wel kleiner worden weergegeven, maar dit maakt voor het dataverbruik niks uit. De gehele afbeelding wordt nog steeds ingeladen en dit is negatief voor zowel de databundel als de snelheid waarmee een website laadt. Daarnaast bleek het ook lastig om via CSS afbeeldingen altijd juist weer te geven. Een andere oplossing leek prefetching waar javascript gebruikt wordt om afbeeldingen in te laden. Deze werkwijze houdt echter geen rekening met de posities en de groottes van afbeeldingen.

Nieuw HTML-element <picture>

Het nieuwe HTML-element <picture> gaat aan deze ellende een oplossing bieden. Met dit nieuwe element is het namelijk voor de browser (Firefox en Chrome, nog dit jaar) mogelijk om zelf de juiste afbeelding te kiezen. Voorwaarde is wel dat er meerdere afbeeldingen beschikbaar zijn. Zo kan de browser er voor kiezen om bij een trage verbinding geen afbeeldingen in te laden en bij een hoge verbinding op een retina scherm er voor kiezen om de hoogste resolutie te tonen.

Naast Firefox en Chrome volgen IE, Opera en Safari op gepaste afstand.

Meer weten over het nieuwe HTML-element <picture>? Lees hier de uitgebreide documentatie.