Ben's Hobbyhoekje -- Responsive afbeeldingen

Responsive afbeeldingen

Dit verhaal gaat over responsive afbeeldingen. Dat zijn afbeeldingen waarvan de grootte zich aanpast aan de grootte van het window waar de afbeelding in wordt getoond.
Bij deze techniek wordt een aantal versies van dezelfde afbeelding gebruikt. Ze verschillen alleen van elkaar in de afmetingen (breedte × hoogte, in pixels)

De inspiratie voor deze pagina is gekomen door Webdesigner Magazine nr. 83, pag. 78 t.m. 81.
Dit blad heeft opgehouden te bestaan.
De code op deze bladzijde is een bewerking daarvan. Je kunt de code downloaden om zelf te gebruiken, echter zonder de foto's.

We beginnen met een voorbeeld. Als je op de link hieronder klikt wordt er een nieuw tabblad geopend, met daarin alleen een foto. In de foto staat aangegeven welke afmetingen die heeft (breedte, in px).

Toon het voorbeeld

Er worden twee items besproken:
1. De werking van het script.
2. Inbouwen in je eigen site.
De werking van het script
De code bestaat uit HTML in combinatie met CSS. Er komt geen JavaScript aan te pas.
De HTML in het voorbeeld gebruikt het <picture>-element voor het weergeven van de afbeeldingen.
Binnen de <picture>-tag staan drie <source>-tags en een <img>-tag.
De drie <source>-tags verzorgen het weergeven van de figuur, voor drie verschillende mogelijkheden:
  — Window-breedte groter dan 800px,
  — Window-breedte groter dan 500px en maximaal 800px,
  — Window-breedte maximaal 500px.
Als de browser het <picture>-element niet kent, of als er anders wat fout gaat, wordt een vierde versie van de foto getoond, de zg. 'fallback'.
Inbouwen in je eigen site
Om te beginnen heb je een afbeelding nodig, met een groot formaat. Die wordt ingezet als fallback, zodat bezoekers met een wat oudere browser wel iets te zien krijgen. Op deze pagina is een foto van 1600 × 1200 px gebruikt. Noem deze fallback.jpg.
- Maak een kopie van fallback.jpg en noem die breed1200.jpg. Verklein de afmetingen met behulp van een fotobewerkingsprogramma tot 1200 × 900 px. Maak een uitsnede, zodat het uiteindelijke formaat 1200 × 800 px wordt.
- Maak een kopie van fallback.jpg en noem die breed800.jpg. Verklein de afmetingen met behulp van een fotobewerkingsprogramma tot 800 × 600 px. Maak een uitsnede, zodat het uiteindelijke formaat 800 × 533 px wordt.
- Maak een kopie van fallback.jpg en noem die vierkant500.jpg. Maak met behulp van een fotobewerkingsprogramma een uitsnede van 1200 × 1200 px. Verklein de uitsnede tot 500 × 500 px.
Download de .zip-file en pak hem uit. Hernoem de file html506a.htm naar bijvoorbeeld index.html.
Neem de naam van de foto-bestanden op in html506a.htm, zoals hier onder is aangegeven. Je hebt nu een werkend template voor je site.
Verander desgewenst de kleur van de achtergrond en de opmaak van de tekst.
Tenslotte...
Dit werkt prima op grote schermen, zoals bij een desktop of een laptop. Bij mobiele apparaten zul je zien dat altijd de foto van 1200px wordt gebruikt. Op sommige tablets wordt de foto van 800px gebrukit als je het scherm in split-screen mode zet. Dit heeft te maken met de manier waarop browsers omgaan met de afmetingen van het scherm en het browser-window. Bij mobiele apparaten worden die veelal aan elkaar gelijk genomen.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:

(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">

(Zet dit in de <BODY>).

<h2>Vergroot / verklein de breedte van het window om het
effect te zien werken.</h2>
<picture class="album">

<source media="(min-width: 801px)"
srcset="breed1200.jpg 1200w">

<source media="(max-width: 800px) and (min-width:501px)"
srcset="breed800.jpg 800w">

<source media="(max-width: 500px)"
srcset="vierkant500.jpg 500w">

<img src="fallback.jpg">
</picture>

Downloaden:

Druk op de knop: File: voorb506.zip, 1281 bytes.