Afbeeldingen zijn alleen nuttig als deze bekeken kunnen worden door een gebruiker. Niemand heeft zin om te wachten totdat bestanden zijn ingeladen. Tegenwoordig kunnen wij op meerdere manieren dit mooi oplossen.

 

Konijn uit de hoed

Voordat we verder de technische diepte ingaan is het belangrijk om in ons geval een specifieke case te belichten. Namelijk Directus zijn built in image transformations. Deze feature zorgt er namelijk voor dat je als developer heel gemakkelijk de juiste extensie, resolutie en formaat kan ophalen zodat je dit vervolgens kan weergeven in een UI.

 

Door Directus al het zware werk te laten doen hoef je ook geen rekening te houden met het kleine percentage gebruikers wat bijvoorbeeld nog geen AVIF ondersteund. 

 

Als een gebruiker toegang heeft tot de bestanden kan je gebruik maken van deze feature door de een parameter aan het einde van je request mee te sturen.

 

Wil je bijvoorbeeld het modernste formaat inclusief fallback hebben dan verander je de url van:

https://parrott.nl/afbeelding

 

Naar:

https://parrott.nl/afbeelding?format=auto

 

In Directus houden ze zelfs rekening met SEO bestandsnamen, je kan heel eenvoudig de bestandsnaam veranderen door de gewenste naam als extra subdirectory toe te voegen:

https://parrott.nl/afbeelding/seo-vriendelijke-naam

 

 

En dan zonder CMS?

Als je geen gebruik maakt van een cms wat dit voor je doet, ben je zelf verantwoordelijk voor het juist instellen van bestandsformaten, dit is niet heel complex, maar wel enorm belangrijk om goed te doen.

 

De browser zelf laten bepalen met srcset

In het kort; gebruik een modern formaat zoals AV1 (AVIF) of WebP. Maar zorg wel altijd dat er een fallback is voor gebruikers op een oudere browsers.

 

Er is wel een klein probleem wat om de hoek komt kijken, namelijk de <img> tag. Voorheen kon een image tag alleen maar een enkele source hebben. Dit maakte fallback onmogelijk. Gelukkig kwam er in 2013 een voorstel om het mogelijk te maken om meerdere sources in te stellen en de browser te laten kiezen wat het beste uitkomt. Dit is inmiddels volledig uitgewerkt en is deel geworden van de standaard HTML attributen.

 

Om meerder sources mogelijk te maken moet je een picture element gebruiken, hierin kan je meerdere bronnen toevoegen met tot slot een fallback img tag. Dit komt er dan zo uit te doen:

 

<picture>
    <source srcset="afbeelding.avif">
    <img src="fallback_afbeelding.jpg">
</picture>

Let op, in dit voorbeeld is de alt attribute weggelaten, in de praktijk is het beter deze wel in te vullen.

Conclusie

Zoals je kunt zien is het zetten van meerder sources vrij eenvoudig. Heb je een cms die dit voor je regelt dan hoef je bijna niks te doen. Moet je het toch zelf regelen is het van belang dat je overstapt naar een picture element en er altijd voor zorgt een fallback image element aan te houden voor verouderde browsers.

 

Op deze manier hoef jij je geen zorgen te maken om fallback. De browser van de bezoeker kiest namelijk zelf voor het beste formaat, zolang jij deze aanlevert in je sources natuurlijk.