Mais comment convertir un image classique en image WebP me direz-vous ? Rien de plus simple, plusieurs solutions s’offrent à vous selon votre projet.

En PHP, lors du traitement d’une image

En PHP, vous avez la possibilité de convertir une image vers le format WebP grâce à la fonction « imagewebp« , qui va permettre d’afficher ou d’enregistrer dans un fichier une image passée en paramètre.

$file = 'image.jpg';

// Création de l'image
$image = imagecreatefromjpeg($file);

// Enregistrement au format WebP
imagewebp($image,'image.webp');

Cette fonction peut donc être utilisée pour la création d’images à la volée, ou en pré-traitement lors de l’upload par exemple.
Rien de plus simple ensuite pour l’afficher, utilisez la balise <picture> au lieu de la balise <img />. En savoir plus sur mon article « Prévoir une image alternative à une image WebP en HTML« .

A l’aide d’un convertisseur en ligne

Il existe de nombreux convertisseurs en ligne vous permettant de convertir en quelques clics toutes vos images JPG, PNG ou GIF en WebP. Mais comme on est jamais mieux servi que par soi-même (:D), je vous ai mis à disposition un convertisseur en ligne de WebP.

C’est gratuit et sans limite, donc n’hésitez pas à l’utiliser !

En utilisant un CDN (Content Delivery Network)

Dernière solution, facile à mettre en place, l’utilisation d’un service de CDN. Ceux-ci, au-delà de l’optimisation des images, auront l’avantage de vous apporter une approche globale afin de vous aider à améliorer vos performances de chargement.

Concernant les images, ils choisissent automatiquement, ou selon des critères que vous allez donner, l’ensemble des images de votre site Internet, les transforment en WebP lorsque cela permet d’optimiser leur taille, et les proposent directement dans ce format à vos visiteurs.

Quelques Content Delivery Network connus :

• StackPath (anciennement MaxCDN)
• CloudFlare
• Cache Fly
• CDN77

Mais ce format est pour le moment indisponible pour Safari. Donc sur Mac, iPad et iPhone, soit un échantillon significatif d’internautes, vos images WebP ne seront pas affichées. Il est donc nécessaire de proposer une image au format initial (jpg, png ou gif) afin qu’elle puisse s’afficher sur ce navigateur et ces supports.

Rien de plus simple, grâce à la balise html <picture>, qui offre la possibilité de lister les formats disponibles pour une seule et même image. Cette balise va venir en remplacement de la classique <img />.

<!-- MON ANCIEN AFFICHAGE d'IMAGE -->
<img src="mon_image_source.png" alt="Coucou webp" title="Coucou webp">

<!-- AVEC UNE WEBP ET UNE ALTERNATIVE PNG -->
<picture>
  <source srcset="mon_image.webp" type="image/webp">
  <source srcset="mon_image_source.png" type="image/png">
  <img src="mon_image_source.png" alt="Coucou webp" title="Coucou webp">
</picture>

Et voilà, vos images sont désormais disponibles pour tous les navigateurs, et particulièrement optimisées pour un affichage sur Google Chrome, Firefox ou Edge grâce à l’image WebP !

Pour ceux qui souhaiteraient en savoir plus sur comment créer une image WebP en PHP, j’ai détaillé la méthode dans l’article « Convertir une image au format WebP« .