PNG ou JPG : que préfère Google ?

Les images et les types/formats d’images préférés sont un sujet courant. Dans certains documents, on pensait que le format PNG était le format préféré de Google. Alors qu’un fichier JPEG est compressé, un PNG est sans perte et supporte également la transparence. En termes de qualité et de flexibilité, le PNG est donc “supérieur”.

Toutefois, en ce qui concerne les référenceurs, un JPEG possède un algorithme de compression qui peut être utile pour accélérer l’affichage des pages et des images en raison de la taille réduite des fichiers. L’inconvénient de la compression du JPEG est qu’un JPEG surcomprimé présentera une pixellisation ainsi qu’un “pooling” lorsque trop peu de couleurs sont utilisées.

En outre, un JPEG est également assez mauvais lorsqu’il s’agit de texte dans les images et les bords nets deviennent souvent flous avec des pixels de couleur bizarres en dehors du texte dans l’image. Étant donné que Google s’efforce d’améliorer le Web grâce à un meilleur contenu, il est logique que le format PNG soit préféré au JPEG.

Google a-t-il une préférence entre PNG et JPG ? Nous avons testé cette question pour voir ce qu’il en est réellement et s’il existe un format particulier que vous devriez privilégier, pour vous aider à être mieux classé.

Configuration du test

Cinq pages ont été mises en place sans aucune image et nous avons attendu la stabilité dans les SERPs.

Une image JPEG a été créée et à partir de cette image, un PNG a été produit.

Toutes les pages ont reçu une image en même temps, la page en 3ème position ayant reçu le png. Les autres pages ont reçu l’image jpg.

Résultats

On s’attendait à ce que la page PNG monte en tête. Étonnamment, la page PNG est tombée tout en bas. Ce qu’il faut noter ici, c’est que les SERPs n’ont jamais dansé autour du tout entre les 5 premières pages indexées et les images ajoutées. La chute a été le seul changement de position dans le classement tout au long du test.

Le retour d’expérience de Clint

Dans cette vidéo, Clint discute de ce test et il parle également de WebP et d’Avif, qui sont plus pertinents et utiles à l’heure actuelle.

Test numéro 64 : PNG vs JPG : existe-t-il un meilleur fichier image ?

Aujourd’hui, WebP est en fait, tout le monde saute sur le train en marche – oh ouais, vous devriez faire webp, vous devriez faire webp, webp est le plus grand jamais. Et ils agissent tous comme si c’était relativement nouveau, alors que ça existe depuis 2010. Google a créé le format de fichier image webp et beaucoup de navigateurs ne l’ont pas implémenté pour pouvoir le lire. Nous avons donc assisté à une lente transition du JPEG vers le webp. Avant cela, c’était le PNG vers le JPEG.

La raison pour laquelle vous voulez faire cela, c’est une question de PageSpeed. Un webp ou un JPEG peut être un fichier assez volumineux et un webp est mieux optimisé. Il peut être optimisé à 33 % de mieux que le JPEG, ce qui réduit le temps de chargement de l’image.

Ce que ce test était, à l’époque où le test a été effectué, je crois que c’était un test de 2018. L’idée était que quelqu’un s’est mis en tête que les PNG étaient en fait préférés par Google. Ce qui est bizarre, car les PNG se chargent généralement plus lentement que les JPG.

D’après le résultat du test, vous pouvez le voir juste là, en bas. Dès que le PNG a été placé sur la page, la page de test est reléguée au bas de la liste des autres résultats. C’est une indication d’un changement significatif dans PageSpeed, qui a causé cette chute.

Ce que je veux dire par là, c’est que, disons que toutes les pages de test se chargeaient en 1,5 seconde, nous avons mis le JPEG sur la page, et cette page était en deux secondes, puis nous avons mis le PNG sur la page, et elle était en 3,54 secondes. Cette différence significative entre toutes ces pages signifie que celle-ci est la plus lente et que nous n’allons pas la réduire dans le classement.

Si vous changez cela, et que le PNG se charge, probablement de la même manière que le JPEG, je doute que nous ayons vu une baisse aussi significative. Mais c’est le temps de chargement qui l’a tué dans ce test.

Là encore, la nouvelle mode dans le monde du marketing Internet et du référencement, par exemple, est le webP. Ce phénomène existe depuis 2010, comme je l’ai dit. Il y a des services – Meshpro, WPRocket et d’autres choses qui vous permettent de le mettre en œuvre, mais la raison pour laquelle il n’a pas sauté sur l’occasion est que Google l’a fait mais n’a pas mis à jour Chrome et les différentes instances de Chrome, comme leur dernière version l’aurait, mais pas les plus anciennes et vous ne pouviez pas voir webp était sur les navigateurs.

Firefox était tout aussi lent, c’était un truc de Google, c’est Google et nous essayons de l’implémenter dans Firefox aussi, nous ne nous soucions pas de vous Google dans ce truc particulier de webp jusqu’à ce que beaucoup de gens l’utilisent.

Au fur et à mesure que les développeurs et les concepteurs de sites web, etc., ont compris que webp était plus fascinant que JPEG, ils se sont mis à l’utiliser de plus en plus et finalement, Firefox et Safari sont maintenant autorisés ou peuvent lire webp. Donc typiquement, par défaut, en tant que webmaster, vous pouvez maintenant passer directement à webp et tout ira bien. Vous n’avez pas besoin d’avoir un service pour le pousser.

Mais il y en a un encore meilleur, il s’appelle Avif. Si vous ne savez pas ce qu’est Avif, il s’agit essentiellement d’un format vidéo pour Avif et d’un format d’image construit à partir de ce format vidéo pour améliorer les images. Dans ce cas, elles sont en fait 50% plus petites qu’un JPEG et vous ne pouvez pas vraiment faire la différence entre l’image qui est en JPEG et les images en Avif. La compression n’altère pas l’image, ne la rend pas encore plus granuleuse, etc.

Si vous êtes photographe, vous avez probablement remarqué le grain. Soyons honnêtes, si vous êtes photographe, et que vous regardez votre image, et que vous la mettez sur le webp, vous avez probablement remarqué le grain entre les deux. Mais pour l’utilisateur moyen, il n’est même pas capable de faire la différence entre les deux et la vitesse de votre page serait bien meilleure.

Il est toujours possible de mettre en œuvre ce genre de choses – avif, webp, et jpeg aujourd’hui, et il y a un outil appelé Squoosh. C’est une application Google. Vous déposez votre image ici, et vous pouvez choisir le format que vous voulez, puis la télécharger sur votre site Web, et vous pouvez vous épargner l’abonnement aux plugins d’optimisation d’image ou autre, si vous le souhaitez. Il suffit d’ajouter cette petite étape à votre flux de travail que ceux-ci font pour vous automatiquement.

Si vous passez à avif et voyez si ça marche pour vous, et c’est le cas, ça rend vos sites encore meilleurs, vous avez pratiquement éliminé le Squoosh. J’ai essayé de vérifier dans Photoshop, mais je suis sur un Mac et Photoshop vient de se mettre à jour et ils étaient bloqués dans la vérification et ça prend trop de temps, et je suis un peu impatient. Mais vous pouvez vérifier dans Photoshop et voir si vous pouvez enregistrer sur avif. Si ce n’est pas le cas, il suffit de l’amener ici, d’amener vos JPEGs que vous avez édités et modifiés, puis de les transférer et de les compresser dans Squoosh. Et boom, Bob est votre oncle, vous avez une très bonne page ou image optimisée qui est compressée, et beaucoup moins de pression sur vos serveurs sur Internet, et toute cette folie.

Donc gardez ça en tête. Je veux dire, vous devez utiliser l’avif, c’est vraiment bon à savoir, si vous avez tous les webps là-dessus et que vous avez un plugin qui s’occupe des trucs web, est-ce qu’ils vont voir la différence entre les deux ? Parce que ce n’est pas significatif, non ? Laissez-moi vous montrer les chiffres ici – c’est comme 33% contre 30%.

Un utilisateur moyen va-t-il vraiment le remarquer ? Probablement pas, sauf si vous avez beaucoup d’images et qu’elles s’additionnent toutes. Mais si vous avez un plugin qui convertit déjà tous vos JPEG en webp pour vous, alors avif probablement, ajouter cette étape n’est probablement pas nécessaire. A moins que vous ne vouliez éliminer complètement ce plugin de votre boîte à outils. Et dans certains cas, certains de ces plugins d’optimisation d’image deviennent un peu trop contre-productifs par rapport à d’autres choses. Par exemple, j’ai Smush Pro, et j’ai un chargeur paresseux, et des CDN et tous ces autres trucs, mais tout ce que je veux vraiment, c’est optimiser mes images. Je n’ai pas besoin de toutes ces autres conneries. Je peux utiliser WP Rocket, et WP offload pour mettre en place des CDN et tous ces trucs, je n’ai pas besoin que vous ajoutiez toutes ces autres fonctionnalités, il suffit d’optimiser mes images pour moi, non ? Donc si c’est le cas, vous allez être fatigué de faire ça, vous pouvez juste passer à avif entièrement pour les futures pages, fermer les plugins d’optimisation, et puis juste faire des téléchargements directs avif, et vous serez bien.

L’un des facteurs si vous faites cela, gardez à l’esprit, si vous faites cela, disons que cette image est 1200 par 780 et c’est l’exigence, mais quand je le minimise, il va changer la taille de l’image à l’intérieur de ce qui se charge et cela peut être moins, non ? L’oxygène des constructeurs modernes, par exemple, aura des tailles définies pour ces images, puis ces plugins créeront des tailles définies pour ces différentes vues. Ainsi, il ne s’agit pas de charger une image de 1200 par 80, mais de charger une image de 500 par n’importe quelle taille, et de réduire le temps de chargement de la page pour un utilisateur mobile. Gardez cela à l’esprit aussi, vous devez en tenir compte, surtout si vous utilisez des images de plus grande taille, de plus grande dimension. Si vous devez emprunter la voie manuelle, je mélangerais les deux, personnellement. Peut-être mettre avif et utiliser un plugin pour créer ces images. Mais vous devez voir si votre plugin est compatible avec avif, pour le faire.

J’espère que cela vous aidera. Encore une fois, le PNG est plus lent que le JPEG et le JPEG est plus lent que le WebP, et le WebP est plus lent que l’Avif, et si vous êtes vraiment un fanatique de la vitesse de page, cela compte pour vous. Si vous êtes vraiment un fanatique de la vitesse des pages, c’est important pour vous. Mettez cela en œuvre dans votre entreprise, en fonction de ce qui vous concerne.