WebP-ondersteuning
Als uw browser WebP ondersteunt, geeft het label op de afbeelding dit aan en wordt een groen vinkje getoond.
Inhoudsopgave
Als op het beeldlabel WebP staat ondersteunt de browser het formaat, als op het label JPG staat ondersteunt de browser niet en valt terug op JPG. Een rood kruis verschijnt.
<picture>
<source srcset="https://webstrategieblog.nl/wp-content/uploads/2023/02/Amsterdam-WebP.webp" type="image/webp">
<source srcset="https://webstrategieblog.nl/wp-content/uploads/2023/02/Amsterdam-JPG.jpg" type="image/jpeg">
<img src="https://webstrategieblog.nl/wp-content/uploads/2023/02/Amsterdam-JPG.jpg" alt="Amsterdam" style="width:100%">
</picture>Hier is de vereenvoudigde HTML. Ik gebruik het in deze pagina. Het vraagt om een WebP afbeelding en heeft de JPG als fallback.
AVIF ondersteuning
Als de browser AVIF ondersteunt, geeft het label op de afbeelding dit aan en wordt een groen vinkje getoond.
Als het afbeeldingslabel AVIF zegt, ondersteunt de browser het formaat, als het label JPG zegt, ondersteunt de browser het niet en valt terug op JPG. Een rood kruis verschijnt.
Hier is de vereenvoudigde HTML. Ik gebruik het in deze pagina. En nogmaals, het vraagt nu om een AVIF afbeelding en heeft de JPG als fallback.
<picture>
<source srcset="=https://www.hoeijmakers.net/content/files/2022/03/Amsterdam-AVIF.avif" type="image/avif">
<source srcset="=https://webstrategieblog.nl/wp-content/uploads/2023/02/Amsterdam-JPG.jpg" type="image/jpeg">
<img src="=https://webstrategieblog.nl/wp-content/uploads/2023/02/Amsterdam-JPG.jpg" alt="Amsterdam" style="width:100%">
</picture>Files
Om dit op deze blogpagina werkend te krijgen, heb ik de verschillende formaten als bestand geüpload. Ik laat ze hier zichtbaar op de pagina staan, misschien wil je ze downloaden en ermee spelen.
Ze staan op de Engelstalige site:
https://www.hoeijmakers.net/browser-support-avif-webp/
Lees meer
Ik heb twee blogartikelen geschreven over afbeeldingsformaten. Het ene gaat wat dieper in op WebP en AVIF, het andere artikel is wat ouder en ik raad mensen aan het bij JPG en PNG te houden. Maar de tijden veranderen, niet zeker of dat artikel goed verouderd is. Ik merkte trouwens dat WordPress, waar deze site in gemaakt is, nog geen AVIF toestaat (9 Feb 2023).