Présentation du format WebP
WebP est un nouveau format d’image développé par Google. Il prend en charge la compression avec perte, la compression sans perte et la transparence, et ses fichiers compressés sont plus petits que ceux aux formats JPEG, PNG, etc. Il permet donc d’économiser de la bande passante, de réduire le temps de chargement des pages et de diminuer la consommation de données des utilisateurs.
Les applications Android et iOS peuvent très facilement prendre en charge le format WebP en intégrant la bibliothèque de décodage fournie par Google. Toutefois, sur le Web, la prise en charge de WebP n’est pas encore très répandue, selon Les données de Can I Use，à l’heure actuelle, seuls les navigateurs Chrome et Opera, ainsi que WebView sur Android, prennent en charge WebP. Mais puisque les images WebP présentent tant d’avantages, pouvons-nous les utiliser dans les pages web ? Oui. Cet article examine cette question.
Convertir les images existantes au format WebP
Pour utiliser le format WebP, vous devez créer une version WebP de toutes les images de votre site. Si vous faites appel à un fournisseur de CDN, celui-ci propose généralement une option de conversion au format WebP. Par exemple, Upyun :
Après avoir ajouté cette configuration, nous pouvons utiliser la version WebP des ressources en ajoutant le suffixe correspondant à l’URL des images.
Vous pouvez aussi utiliser des plugins webpack ou gulp pour convertir les formats d’image par lots. Nous ne développerons pas ce point ici.
Utiliser le format WebP dans le navigateur
Comme tous les navigateurs ne prennent pas en charge le format WebP, deux approches s’offrent à nous : utiliser WebP uniquement dans les navigateurs compatibles ; ou permettre aux navigateurs incompatibles de le prendre en charge.
Première approche : <picture>Étiquettes
<picture>est une nouvelle balise de HTML5, semblable à<video>Il peut également spécifier des ressources dans plusieurs formats, le navigateur choisissant un format qu’il prend en charge pour le charger.
<picture class="picture"> <source type="image/webp" srcset="image.webp"> <img class="image" src="image.jpg"> </picture>
Si le navigateur prend en charge le format WebP, il chargera image.webp，sinon, chargera image.jpg。
Même si le navigateur ne prend pas en charge <picture>balise, l’image s’affichera toujours normalement, mais le CSS risque de ne pas pouvoir la sélectionner correctement picture éléments. Par exemple, dans IE8, le CSS suivant n’aura aucun effet :
.picture img { width: 100px; height: 100px;
}Mais vous pouvez définir le style des images de cette manière :
.image { width: 100px; height: 100px;
}Même si le navigateur utilise une image au format WebP, il appliquera tout de même img le style de l’élément.
Toutefois, dès lors que l’on utilise html5shiv，afin que les anciens navigateurs prennent en charge cette balise et que les sélecteurs CSS puissent fonctionner normalement.
Cette méthode est la plus simple, mais elle ne fonctionne pas pour les images définies dans le CSS（comme les arrière-plans）.
Deuxième approche : remplacer l’URL de l’image avec JS.
Beaucoup de nos pages utilisent le « chargement différé » des images — en général, cela consiste à placer l’URL de l’image dans img dans un attribut personnalisé de l’élément, puis utiliser JS au moment opportun pour affecter l’URL à src l’attribut. Selon un principe similaire, nous pouvons, en fonction de la prise en charge du format WebP par le navigateur, attribuer à img attribuer des valeurs différentes aux éléments src valeur.
Nous devons d’abord utiliser JS pour déterminer si le navigateur prend en charge le format WebP : il suffit de lui fournir une image WebP et de vérifier s’il l’affiche correctement. Cette méthode est asynchrone ; les opérations suivantes doivent donc être placées dans la fonction de rappel. Nous pouvons stocker le résultat dans localStorage dans celui-ci, ce qui évitera de refaire la vérification par la suite.
function checkWebp(callback) { var img = new Image();
img.onload = function () { var result = (img.width > 0) && (img.height > 0);
callback(result);
};
img.onerror = function () {
callback(false);
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}Utilisez ensuite le code ci-dessous pour remplacer le src correspondant selon que WebP est pris en charge ou non.
function showImage(useWebp){ var imgs = Array.from(document.querySelectorAll('img'));
imgs.forEach(function(i){ var src = i.attributes['data-src'].value; if (useWebp){
src = src.replace(/\.jpg$/, '.webp');
}
i.src = src;
});
}
checkWebp(showImage);Cette approche a l’avantage de pouvoir être combinée aux fonctions existantes de chargement différé. De plus, avec JS, nous pouvons aussi traiter les images définies dans le CSS（comme les images d’arrière-plan）.
Méthode trois : décoder les images WebP avec JS
Puisque le décodeur de WebP est open source, peut-on l’implémenter en JS ? Bien sûr,Quelqu’un a ainsi écrit un décodeur WebP en JS。L’intégration de cette bibliothèque JS consiste à décoder toutes les images WebP avec JS, puis à les convertir en base64，puis remplacer l’URL d’origine, ce qui permet aux navigateurs qui ne prenaient pas en charge WebP d’afficher correctement ces images. Cette bibliothèque est très simple à utiliser : il suffit de consulter les instructions sur sa page web.
Cette méthode présente un inconvénient : pour décoder l’image WebP, JS doit effectuer ici une requête asynchrone vers l’URL contenue dans src (mais, comme l’image a déjà été téléchargée une fois, le cache est directement utilisé) ; de plus, le décodage en JS est assez lent et affecte les performances, de sorte que l’image peut mettre un certain temps à s’afficher.
Voilà les différentes façons d’utiliser des images WebP dans un navigateur ; vous pouvez choisir celle qui convient à votre situation. Dans notre pratique, l’adoption du format WebP a généralement réduit la taille des images de plus de 1/3, accélérant leur chargement tout en économisant les données mobiles des utilisateurs. Nous recommandons vivement de commencer à utiliser ce format dès maintenant.
