Après cela, un fichier nommé modernizr-custom.jssera téléchargé – déplacez ce fichier dans le répertoire de votre site Web (disons votre dossier racine). Pour appeler et déclencher Modernizr, placez ceci au bas de la page HTML où vous affichez vos fichiers WebP:

HTML:

// First, refer to the location of your downloaded Modernizr script. I have just left mine in the root folder.
<script src="modernizr-custom.js"></script>
// Second, trigger Modernizr to detect WebP compatibility.
<script>
Modernizr.on('webp', function (result) {
if (result) {
// supported
} else {
// not-supported
}
});
</script>

Modernizr appliquera désormais automatiquement une classe webpou no-webpà l’élément HTML (dans mon exemple, le conteneur contenant l’image), selon qu’il détecte ou non la prise en charge du navigateur pour WebP. Cela signifie que vous pouvez spécifier les images que vous voulez dans votre classe CSS, en ciblant l’une de ces classes comme ceci:

CSS:

.no-webp .container { background-image: url("mypicture.jpg"); } 
.webp .container { background-image: url("mypicture.webp"); }
Que se passe-t-il si l’utilisateur n’a pas activé Javascript?

Pouah! Pourquoi feraient ils cela? (Je vous regarde, Internet Explorer!)

Modernizr s’appuie sur l’activation de Javascript sur le navigateur de votre utilisateur, donc pour contourner ce problème, vous devrez ajouter une classe HTML en haut de la page, par exemple <html class=”no-js ”>.

Ensuite, ajoutez du code Javascript qui supprimera avec succès cette classe si Javascript est activé:

HTML:

<script>     document.documentElement.classList.remove("no-js"); </script>

Si Javascript n’est pas activé, la classe sera automatiquement appliquée à tous les éléments HTML de votre page – et vous pouvez créer une no-jsclasse avec l’image JPG comme image de fond:

CSS:

.no-js .container {     background-image: url("mypicture.jpg"); }

Conclusion

Les images WebP sont relativement faciles à implémenter lorsque vous affichez simplement des images dans votre code HTML (vous n’aurez pas besoin de Modernizr ou de la no-jsclasse), mais prennent un peu plus de temps lorsque vous utilisez des images dans votre CSS (par exemple, comme images d’arrière-plan) .

Gardez à l’esprit que le temps de chargement de votre site Web a un impact direct sur le temps que vos visiteurs passeront sur votre site – et par conséquent, sur votre taux de conversion de prospects – le temps que vous passez à passer aux images WebP est donc ça vaut le coup, car le temps supplémentaire que vos utilisateurs resteront sur votre site Web.

Si vous implémentez des images WebP, faites-le moi savoir dans les commentaires – j’aimerais savoir à quel point votre site Web est plus rapide!