Ondersteunt mijn browser WebP en/of AVIF?

Een snelle controle om te zien of uw browser of toepassing de moderne afbeeldingsformaten WebP en AVIF ondersteunt

WebP-ondersteuning

Als uw browser WebP ondersteunt, geeft het label op de afbeelding dit aan en wordt een groen vinkje getoond.

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.

Amsterdam
<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.

Amsterdam

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).

Ontvang de nieuwste artikelen!

Aan spam doe ik niet 🙂

Over de auteur

Scroll naar boven