responsiveafbeelding

Hoe maak je afbeeldingen responsive?

Tekst in een responsive website is eenvoudig te schalen en vloeit mooi in ieder schermformaat. Maar hoe zit dat met afbeeldingen? Zijn de afbeeldingen die je toevoegt voor de desktopversie ook direct geschikt voor je tablet of smartphone? Kort gezegd: Nee, zo simpel is het niet. Afbeeldingen in een responsive website vragen meer aandacht. Lees met welke factoren je rekening moet houden en hoe je afbeeldingen responsive maakt.

Afbeeldingen responsive maken is op zich een relatief simpel proces. Met een code in de stylesheet van de website stel je een variabele breedte van de afbeelding in bijvoorbeeld: img { width: 100%; height: auto; } Bekijk in onderstaand voorbeeld hoe dat werkt bij verschillende formaten.
responsive oplossing

Klinkt inderdaad simpel. Helaas is deze benadering te kort door de bocht. Vraag je af hoe snel deze afbeelding laadt op een smartphone of iPad mini. En bekijk hoe de afbeelding overkomt op een kleiner scherm. Heb je een website met veel afbeeldingen en wil je dat de afbeeldingen jouw boodschap versterken? Dan is een andere benadering een beter plan.

Bij het responsive maken van je afbeelding spelen twee factoren een grote rol: laadtijd mobiele netwerk en de vertaling van een afbeelding naar kleinere schermen.

1. Laadtijd mobiele datanetwerk

Een van de grote uitdagingen bij het schalen van afbeeldingen voor kleinere schermen is de laadtijd van websites via mobiele datanetwerken. In de oplossing hierboven verschijnt de fullscreen afbeelding heel snel op je desktopversie met bekabelde glasvezel aansluiting, maar heeft veel langer nodig op je smartphone met 3G – waar toch nog veel mensen onderweg op hun mobiel op surfen. De bestandsgrootte van de afbeelding is namelijk nog steeds gebaseerd op de desktopversie en erg groot om te laden via 3G. Zorg daarom voor kleinere afbeeldingen bij kleinere schermen.

2. Vertaling afbeelding naar kleinere schermen

Op een groot en breed scherm zien de fullscreen afbeeldingen er prachtig uit. Maar hoe vertaal je deze afbeeldingen naar kleinere en smallere mobiele schermen?
vertaling responsiveafbeelding mobiel

Bij websites die veel gebruik maken van grote, brede afbeeldingen of visual storytelling is het belangrijk dat de boodschap ook overkomt op een kleiner scherm. Het automatisch verkleinen van de afbeelding dekt dan niet de lading. De afbeelding op het voorbeeld hierboven is op mobiel nauwelijks te zien. Het focussen op het belangrijkste deel van de afbeelding of het aanbieden van een andere afbeelding die beter overkomt op een klein en smal scherm is dan een betere oplossing

Oplossingen responsive afbeeldingen

Een techniek voor deze twee uitdagingen is om meerdere varianten van de afbeelding aan te bieden die geschikt zijn voor desktop, tablet en mobiel gebruik.
responsive image

De desktopvariant blijft met een ultieme fullscreen ervaring 150kb, maar je verkleint de mobiele versie tot wel 15kb. Dat betekent een snelle laadtijd op je smartphone. Maar hoe krijg je dat voor elkaar?
Drie mogelijke oplossingen vanuit verschillende invalshoeken.

1. Meerdere varianten van de afbeelding gebruiken in het CMS

Is er bij de bouw of keuze van het CMS rekening gehouden om aparte afbeeldingen te gebruiken voor mobiel of tablet? Dan ligt deze oplossing voor de hand. Je hebt totale controle over welke afbeelding je voor welk device gebruikt en hebt direct invloed op de laadtijd van een afbeelding.

Nadelen:

  • extra tijd voor creatie van verschillende varianten afbeeldingen
  • extra investering bouw CMS

2. Media queries in stylesheets

In veel CMS’en heb je geen mogelijkheid om aparte afbeeldingen voor mobiel te gebruiken. Of is het te kostbaar om te bouwen. Een media querie is dan een veel gebruikte mogelijkheid. In de stylesheets (CSS3) van de website neemt de developer condities op en geeft specifieke stijlen mee voor verschillende schermformaten. In de praktijk voeg je dan één grote afbeelding toe en geef je “classes” mee voor mobiel gebruik. Picturefill is een voorbeeld van zo’n techniek. Bekijk hoe het bestand kleiner wordt als je het scherm kleiner maakt. Met Focal Point CSS kun je zelfs een focuspunt in een afbeelding aangeven, zodat je inzoomt op het belangrijkste deel van de afbeelding.

Nadelen:

  • geen invloed op afbeelding
  • extra kosten developer

3. Adaptive images

Geen budget voor? Eén van de beste gratis tools, Adaptive Images, maakt het automatisch voor je mogelijk met slechts een paar PHP-bestanden en een beetje JavaScript. Een server-side PHP-bestand beoordeelt welke variant van de afbeelding geladen wordt afhankelijk van de grootte van het scherm. Bij grote schermen laden de grote bestanden en bij kleine schermen de kleinere. Installeer de tool op de je website en je kunt direct aan de slag.

Nadelen:

  • niet op elke server of website draait PHP en .ht-access
  • geen invloed op afbeelding

The holy grail van responsive afbeeldingen is nog niet gevonden: de juiste afbeelding laden met de juiste grootte, de juiste uitsnede op het juiste device. Tot die tijd zijn bovenstaande oplossingen een stap in de goede richting.

Welke oplossing het meest geschikt is voor jouw situatie hangt af van de techniek van je website, je CMS, je budget, hoeveel afbeeldingen je gebruikt en hoe relevant de vertaalslag is naar kleinere schermen. Vraag je bij de ontwikkeling van een responsive website af welke factoren het meest belangrijk voor je zijn.

In mijn volgende blog vertel ik meer over het responsive maken van video’s.

Tags: Responsive, responsive website, responsive afbeeldingen



0 reacties op dit artikel
  • Zjos best zegt:

    Prima “verhaal” heb ik wel iets aan, maar als je nu tekst toevoegt in een logo-afbeelding , bijv.over de hele breedte, hoe kun je dan de tekst eveneens responsive maken.

  • bram zegt:

    Handig artikel, erg bruikbaar voor mij