J'ai déjà des JPG optimisés, passer au WEBP apporte-t-il quand même un gain ?

Il apporte généralement un gain supplémentaire, mais la différence obtenue en passant d'un JPG bien optimisé au WEBP est plus faible que celle obtenue en partant d'un JPG jamais optimisé. C'est qu'une partie du gain a déjà été récoltée par l'optimisation. Comme l'ampleur du gain additionnel dépend du contenu de l'image, la méthode la plus juste consiste à tester avec quelques fichiers représentatifs et à mesurer le résultat.

Redimensionner les images ou changer de format : qu'est-ce qui est le plus efficace ?

Sur la plupart des sites, le redimensionnement est de loin le plus efficace et c'est généralement l'étape qu'on saute. Si vous servez en 4000 pixels de large une image affichée à 600 pixels à l'écran, quoi que vous fassiez du format, vous envoyez des données inutiles. Réduisez d'abord les images à la taille réellement utilisée, puis occupez-vous du format et du réglage de qualité. Inverser cet ordre rapporte beaucoup moins.

Est-il pertinent de proposer à la fois une version WEBP et une version JPG ?

C'est pertinent si vous voulez garantir la compatibilité ascendante, et cela se fait facilement avec la balise picture du HTML ; le navigateur choisit lui-même le format qu'il prend en charge. Le coût, c'est de produire et de stocker deux versions de chaque image. Comme tous les navigateurs modernes prennent en charge le WEBP, beaucoup de sites préfèrent désormais ne servir qu'un seul format ; la décision dépend de la diversité des navigateurs utilisés par votre audience.

Baisser le réglage de qualité est-il plus simple que passer au WEBP ?

C'est incontestablement plus simple et souvent étonnamment efficace. Sur beaucoup de sites, les images ont été enregistrées avec un réglage de qualité inutilement élevé, et le ramener à un niveau raisonnable procure un gain de poids sérieux sans dégradation visible. Un changement de format, lui, ajoute une nouvelle étape au flux de travail. La voie la plus efficace consiste généralement à faire les deux ensemble : la bonne taille, un réglage de qualité raisonnable et un format efficace.

Pour la vitesse de page : WEBP ou JPG bien optimisé ?

Un dilemme mal posé

La phrase « mon site est lent, je vais convertir les images en WEBP » revient très souvent. Or un problème de vitesse de page ne vient généralement pas du seul choix de format, et passer au WEBP n'est pas toujours l'action qui rapporte le plus.

Dans cet article, nous comparons deux approches : optimiser correctement les JPG existants et migrer le format vers le WEBP. Nous examinons ce que chacune apporte, où elle bute et dans quel ordre les mener.

Les trois facteurs qui déterminent le poids d'une image

Trois éléments déterminent le nombre d'octets qu'occupe une image, et le format n'en est qu'un.

Les dimensions en pixels. La largeur et la hauteur de l'image. Réduire une image de moitié divise par quatre le nombre de pixels. C'est le levier le plus puissant sur le poids du fichier.

Le réglage de qualité. La quantité d'information écartée par la compression avec perte. Un réglage inutilement élevé dépense beaucoup d'octets pour des détails que l'œil ne perçoit pas.

L'efficacité du format. Le nombre d'octets nécessaires pour représenter la même image. C'est là que le WEBP surpasse le JPG.

Sur la plupart des sites, le plus grand gaspillage se situe dans les deux premiers facteurs. Servir en résolution gigantesque des images affichées en petit à l'écran et pousser le réglage de qualité au maximum à l'aveugle sont des pratiques très répandues. Changer de format tant que ces deux problèmes subsistent revient à vouloir remplir plus vite un seau percé.

Jusqu'où peut aller un JPG optimisé ?

Un JPG bien optimisé ne doit pas être sous-estimé. Réduit à la bonne taille, enregistré avec un réglage de qualité raisonnable et débarrassé de ses métadonnées superflues, un JPG est bien plus léger que sa version non optimisée.

L'avantage du JPG à ce stade est l'absence de friction : tous les outils le produisent, tous les navigateurs l'ouvrent, il s'intègre à tous les flux de travail et ne soulève aucune question de compatibilité. C'est une amélioration que vous pouvez appliquer sans rien changer à votre système existant.

Sa limite, en revanche, c'est le format lui-même. La structure de blocs fixes du JPG et son incapacité à prédire à partir des blocs voisins plafonnent l'efficacité au-delà d'un certain point. L'optimisation a un plafond.

Qu'apporte le WEBP ?

Le WEBP relève ce plafond hérité de la conception du JPG. Grâce à sa capacité à prédire à partir des blocs voisins, à faire varier la taille des blocs selon le contenu et à utiliser une phase de codage final plus efficace, il consomme moins d'octets à qualité visuelle égale.

Il ajoute par-dessus deux capacités supplémentaires : la prise en charge de la transparence et le mode sans perte. Autrement dit, vous pouvez utiliser un seul format aussi bien pour vos logos transparents que pour vos photos.

Son coût, c'est l'étape ajoutée au flux de travail. Une phase de conversion s'insère dans votre processus de production, de stockage et de publication des images. Si cette étape n'est pas automatisée, elle finit par être négligée avec le temps et le système devient incohérent.

Dans quel ordre procéder

L'ordre le plus efficace en pratique est le suivant, et il est le plus souvent tenté à l'envers :

D'abord la taille. Réduisez les images à la taille réellement utilisée dans la page. Préparer une résolution double pour les écrans à haute densité est raisonnable, mais une résolution quintuple est inutile. Sur la plupart des sites, cette seule étape apporte le plus gros gain.

Ensuite le réglage de qualité. Enregistrez quelques images représentatives avec différents réglages et comparez-les à taille réelle. Adoptez le réglage le plus agressif dont vous ne percevez pas la différence à l'œil. Ce point se situe généralement plus bas qu'on ne le croit.

Ensuite le format. Une fois les deux étapes ci-dessus effectuées, passer au WEBP récupère la marge restante. Vous pouvez convertir votre archive avec l'outil de conversion de JPG en WEBP.

Et enfin la diffusion. Des techniques comme ne charger les images qu'au moment où elles deviennent visibles ou servir les bonnes dimensions selon les écrans améliorent la vitesse perçue, indépendamment du format.

Tableau de décision

Si vos images ne sont pas optimisées du tout : occupez-vous d'abord de la taille et du réglage de qualité. Vous obtiendrez un gain important même sans changer de format.

Si vos images sont optimisées mais que la page reste lourde : le passage au WEBP apporte un gain supplémentaire significatif. À ce stade, la différence de format se ressent vraiment.

Si vos images transparentes sont encore en PNG : les migrer vers du WEBP sans perte apporte généralement un bon gain tout en préservant la transparence.

Si votre flux de travail est manuel et désordonné : organisez le processus avant de changer de format. Une étape de conversion non automatisée ne sera pas appliquée sur la durée.

Si vous avez très peu d'images et que la page est déjà rapide : ne faites rien de tout cela. Optimiser en l'absence de problème mesurable, c'est chercher à résoudre un problème qui n'existe pas.

En résumé

Ce n'est pas un choix « soit l'un, soit l'autre » mais une question d'ordre. Réduire les images à la bonne taille et ramener le réglage de qualité à un niveau raisonnable apporte le plus gros gain sur la plupart des sites, sans changement de format. Le WEBP, lui, récupère la marge restante une fois ces travaux de base effectués et ajoute par-dessus la souplesse de la transparence. Le meilleur résultat vient de l'application des deux, dans l'ordre et conjointement.