À partir d'aujourd'hui, nous adoptons pleinement le format WEBP pour la sortie des images

Source de l'image : @shmuelr

Il reste deux mois avant 2025. Bien que ProcessWire ait ajouté cette fonctionnalité dès 2019, nous n'avons pas encore pleinement adopté le format d'image WebP pour assurer une compatibilité complète avec tous les navigateurs.

WEBP est un format de sortie

Tout comme les flux vidéo BLOB, WEBP est purement un format de sortie, et non un format d'entrée. Par conséquent, vous ne pouvez pas télécharger de fichiers avec l'extension .webp dans le back-office. Vous devez toujours fournir une image de secours au format JPG ou PNG pour toute image WebP, car tous les navigateurs ne sont pas capables de les afficher.

De plus, les images WEBP utilisent un type de compression qui les rend inappropriées pour toute opération ou conversion ultérieure. Ainsi, les images PNG et/ou JPG devraient toujours être les formats standard pour les images téléchargées sur le site web. Les images WEBP fournies par ProcessWire sont automatiquement générées à partir des images PNG ou JPG d'origine.

L'utilisation du format d'image WebP présente de nombreux avantages, ce qui en fait un choix populaire, notamment dans le développement et l'optimisation des sites web.

Voici quelques raisons clés d'utiliser WebP

1. Une meilleure efficacité de compression

• WebP offre des fichiers de taille plus réduite : Comparé aux formats JPEG et PNG, WebP peut réduire considérablement la taille du fichier tout en préservant la qualité de l'image. Plus précisément, les fichiers WebP sont généralement de 25 % à 34 % plus petits que les JPEG et de 26 % à 45 % plus petits que les PNG. Cela aide à réduire l'utilisation de la bande passante et à accélérer le chargement des pages.
• Prise en charge de la compression avec et sans perte : WebP prend en charge les deux types de compression, permettant ainsi de trouver un équilibre entre la qualité de l'image et la taille du fichier.

2. Prise en charge de la transparence (canal alpha)

• Tout comme le format PNG, WebP prend également en charge la transparence (canal alpha), mais avec des fichiers de taille plus réduite. Il peut donc remplacer le format PNG pour réduire le temps de chargement des images et améliorer les performances de la page.

3. Prise en charge des animations

• WebP permet également de créer des images animées, similaires aux fichiers GIF. Comparées aux GIF, les animations WebP sont généralement de taille plus réduite et prennent en charge les couleurs 24 bits et une transparence de 8 bits, offrant des animations plus fluides et une meilleure qualité des couleurs.

4. Réduction du temps de chargement des pages

• Étant donné que les fichiers WebP sont plus petits, les navigateurs peuvent charger les images plus rapidement, ce qui réduit le temps de chargement des pages. Cela est particulièrement utile pour les utilisateurs sur appareils mobiles, car cela permet de réduire la consommation de données et d'améliorer la réactivité du site.

5. Avantages SEO

• Un chargement plus rapide des pages contribue à améliorer le classement dans les moteurs de recherche. Les moteurs de recherche tels que Google considèrent la vitesse de la page comme un facteur de classement, et l'utilisation de WebP peut améliorer la vitesse de la page, optimisant ainsi le SEO.

6. Une meilleure expérience utilisateur

• Les pages qui se chargent rapidement réduisent le temps d'attente des utilisateurs, augmentant ainsi le taux de rétention et la satisfaction des utilisateurs. Cela est particulièrement important pour les sites de commerce électronique, les portails d'actualités et d'autres contextes qui nécessitent une forte implication des utilisateurs.

Limites d'utilisation

Bien que WebP présente de nombreux avantages, il peut être plus approprié d'utiliser d'autres formats d'image dans certains cas :

• Si vous devez garantir la compatibilité avec les navigateurs qui ne prennent pas en charge WebP (ce qui peut être résolu en fournissant un format d'image alternatif).
• Dans certaines situations spécifiques, les formats PNG ou JPEG peuvent offrir une meilleure qualité d'image à des taux de compression extrêmement élevés.

En général, WebP est un format d'image efficace, idéal pour l'optimisation des sites web afin d'améliorer la vitesse de chargement et l'expérience utilisateur.

Quels navigateurs ne prennent pas en charge les fichiers WebP

Actuellement, la plupart des navigateurs modernes prennent en charge le format d'image WebP, mais certaines versions plus anciennes peuvent ne pas le supporter. Voici un aperçu de la compatibilité avec les navigateurs :

Navigateurs ne prenant pas en charge le format WebP :

1. Internet Explorer (IE) : Toutes les versions d'Internet Explorer ne prennent pas en charge le format WebP, y compris IE 11 et les versions antérieures.
2. Safari (anciennes versions) : Le navigateur Safari ne prend pas en charge WebP avant la version 14. Sur macOS et iOS, la prise en charge de WebP a été ajoutée à partir de Safari 14.
3. Anciennes versions d'Opera Mini : Bien que la plupart des navigateurs modernes prennent en charge WebP, certaines anciennes versions d'Opera Mini ne le prennent pas en charge.

Navigateurs prenant en charge WebP :

• Google Chrome : Prend en charge WebP depuis la version 17, sortie en 2011.
• Firefox : Prend en charge WebP depuis la version 65, sortie en 2019.
• Microsoft Edge : Les versions basées sur le moteur Chromium prennent en charge WebP.
• Opera : Prend en charge WebP depuis la version 11.10.
• Safari : Prend en charge WebP à partir de Safari 14.

En somme, à l'exception des versions plus anciennes d'Internet Explorer et de Safari, la plupart des navigateurs modernes prennent en charge le format WebP. Pour garantir la compatibilité avec les navigateurs qui ne prennent pas en charge WebP, vous pouvez utiliser la balise <picture> pour fournir un format d'image alternatif (comme JPEG ou PNG).

<picture>
  <source srcset="<?= $image->webp->url ?>" type="image/webp">
  <img src="<?= $image->url ?>" alt="<?= $image->description ?>">
</picture>