Als grafisch vormgever of front-end ontwikkelaar weet je dat een webpagina pas echt tot leven komt met rijke media: een dynamische video achter de header, een inspirerende podcast, een interactieve Google Map of een YouTube-video.
Maar beelden en media hebben ook een schaduwzijde: ze vormen veruit het grootste gedeelte van het totale gewicht van een webpagina. Een trage website schrikt bezoekers af en scoort slecht in zoekmachines. In deze les leer je hoe je video, audio en externe inhoud insluit én hoe je afbeeldingen slim optimaliseert naar moderne formaten zoals WebP en AVIF.
<video> & <audio>)Vroeger waren er ingewikkelde plugins (zoals Flash) nodig om video en geluid af te spelen op een website. Met de komst van HTML5 spelen browsers media rechtstreeks en native af via de <video> en <audio> tags.
<video> elementHet <video> element gebruik je om eigen videobestanden (meestal .mp4 of .webm) af te spelen op je pagina.
<video controls poster="images/videothumb.jpg" width="640">
<source src="media/promovideo.webm" type="video/webm">
<source src="media/promovideo.mp4" type="video/mp4">
Je browser ondersteunt helaas geen HTML5-video.
</video>
<video>:controls: Toont de standaard bedieningsknoppen (play/pauze, volume, voortgangsbalk, volscherm).poster="pad/naar/foto.jpg": Een afbeelding die getoond wordt voordat de video wordt afgespeeld.autoplay: Laat de video automatisch starten zodra de pagina laadt.muted: Schakelt het geluid standaard uit. loop: Herhaalt de video oneindig zodra deze is afgelopen.Opgelet: Moderne browsers (zoals Chrome en Safari) blokkeren autoplay-video's met geluid om te voorkomen dat bezoekers schrikken. Wil je dat een achtergrondvideo automatisch afspeelt? Dan moet je het attribuut muted toevoegen!
<!-- Perfect voor een sfeervolle achtergrondvideo -->
<video autoplay muted loop width="100%">
<source src="media/hero-background.mp4" type="video/mp4">
</video>
<audio> elementHet <audio> element werkt op vrijwel dezelfde wijze als het video-element, maar toont enkel een geluidsspeler op de pagina.
<audio controls>
<source src="media/podcast-ep1.ogg" type="audio/ogg">
<source src="media/podcast-ep1.mp3" type="audio/mpeg">
Je browser ondersteunt dit geluidsbestand niet.
</audio>
Tip: Gebruik altijd meerdere<source>tags binnenin<video>of<audio>. De browser kiest automatisch het eerste formaat dat hij kan afspelen!
<iframe>Een <iframe> (Inline Frame) is een venster op jouw webpagina waarin een andere webpagina of externe dienst wordt getoond. Dit gebruik je voornamelijk voor het inbedden (embedden) van inhoud van platformen zoals YouTube, Vimeo, Spotify, SoundCloud of Google Maps.
Platformen zoals YouTube genereren automatisch een kant-en-klare <iframe> code die je direct in je HTML kunt plakken:
<iframe
width="560"
height="315"
src="[https://www.youtube.com/embed/dQw4w9WgXcQ](https://www.youtube.com/embed/dQw4w9WgXcQ)"
title="YouTube video player"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<iframe> attributen:src: De web-URL van de pagina of media die geladen moet worden.title: Een beschrijving van de inhoud (onmisbaar voor toegankelijkheid/schermlezers!).allowfullscreen: Geeft de bezoeker toestemming om het venster naar volledig scherm te vergroten.loading="lazy": Zorgt ervoor dat de iframe pas geladen wordt wanneer de bezoeker er naartoe scrolt (lazy loading), wat de laadsnelheid van je pagina enorm verhoogt!Als grafisch vormgever ben je gewend te werken met gigantische TIFF-, PSD- of RAW-bestanden in hoge resolutie (300 DPI) voor drukwerk. Op het web geldt de omgekeerde regel: afbeeldingen moeten zo klein mogelijk zijn qua bestandsgrootte, zonder dat het visuele kwaliteitsverlies opvalt.
Om bestanden kleiner te maken gebruiken we beeldcompressie:
Voordat je afbeeldingen op een website plaatst, haal je ze bij voorkeur door een compressietool:
Traditionele webformaten zoals JPG (voor foto's) en PNG (voor illustraties en transparantie) worden langzaam ingehaald door modernere, efficiëntere afbeeldingsformaten.
| Formaat | Transparantie? | Animatie? | Compressiekwaliteit | Web-Ondersteuning |
|---|---|---|---|---|
.jpg | Nee | Nee | Matig | 100% |
.png | Ja | Nee | Laag (grote bestanden) | 100% |
.webp | Ja | Ja | Uitstekend (~30% kleiner dan JPG) | >97% (Universeel) |
.avif | Ja | Ja | Extreem hoog (~50% kleiner dan JPG) | Uitstekend (Moderne browsers) |
<picture> elementHoewel WebP en AVIF fantastische formaten zijn, wil je er zeker van zijn dat oudere browsers (of specifieke apparaten) die deze formaten nog niet ondersteunen, toch een afbeelding te zien krijgen.
Hiervoor gebruiken we het <picture> element. Dit element werkt als een intelligente "keuzelijst" voor de browser.
<picture>
<!-- Optie 1: De browser kiest AVIF als dit ondersteund wordt (kleinste bestand) -->
<source srcset="images/banner.avif" type="image/avif">
<!-- Optie 2: Als AVIF niet werkt, probeert de browser WebP -->
<source srcset="images/banner.webp" type="image/webp">
<!-- Optie 3: Fallback naar een standaard JPG voor hele oude browsers -->
<img src="images/banner.jpg" alt="Sfeerbeeld van een grafisch ontwerper aan het werk" loading="lazy">
</picture>
<picture> element?type van de eerste <source> kan afspelen. Zo ja, dan laadt hij banner.avif en stopt hij met zoeken.banner.webp).<img> tag onderaan.Belangrijk: De uiteindelijke styling (zoals de breedte via CSS of attributen) pas je altijd toe op de<img>tag binnenin de<picture>container, want dat is het element dat uiteindelijk op het scherm getoond wordt!
<video> en <audio> voor het lokaal afspelen van eigen media. Gebruik muted wanneer je video's automatisch laat afspelen.<iframe> voor het inbedden van externe media zoals YouTube-video's of Google Maps, en voeg loading="lazy" toe voor een betere laadsnelheid.<picture> element serveer je geavanceerde formaten (AVIF/WebP) aan moderne browsers, met een veilige fallback (JPG/PNG) voor oudere systemen.