Killian Santos > WordPress > Performance Web > Comment optimiser ses images pour le web afin d'améliorer les performances ?

Comment optimiser ses images pour le web afin d’améliorer les performances ?

Vous avez un site web ou un blog et vous ne savez jamais comment optimiser vos images ?

Dans cet article, je vous présente les optimisations de base à mettre en place, ainsi qu’un outil gratuit pour vous aider à passer à l’action ! Un guide pratique qui vous permettra de faire les bons choix, sans vous reposer sur un outil sans en comprendre les mécanismes.

Je vous dévoile ma méthode personnelle, que j’applique sur tous les sites que je gère. Cet article est régulièrement mis à jour, c’est pourquoi vous pourriez encore voir des formats comme le WEBP sur certains sites, alors que je recommande désormais l’AVIF. Les technologies évoluent, et je m’adapte !

Ma méthode est manuelle. Il existe d’autres approches, comme l’utilisation de plugins clés en main pour WordPress. Toutefois, l’objectif ici est de limiter l’utilisation d’extensions supplémentaires (bien que certaines soient utiles dans certains cas) et de traiter les images avant de les téléverser sur le serveur. C’est aussi un geste pour la planète !

Choisir les bonnes dimensions pour ses images

Avant d’envisager diverses optimisations pour vos images ou d’utiliser des outils spécifiques, il est essentiel de bien comprendre les facteurs qui influencent leur poids.

Pour illustrer cela, je vous invite à consulter la galerie photo de votre téléphone. C’est bon, vous y êtes ? Parfait ! Choisissez maintenant une photo et regardez ses informations, notamment ses dimensions et son poids. Voici un exemple :

photo du port de trentemoult à rezé

La photo que j’ai sélectionnée mesure 4096 x 3072 pixels et pèse 5,45 Mo. C’est un poids considérable, surtout si vous envisagez de l’utiliser sur un site web. En général, il est recommandé de limiter le poids des images à un maximum de 250 Ko pour le web. Une solution simple pour alléger une image consiste à adapter ses dimensions à vos besoins réels.

Mais comment choisir les bonnes dimensions ? Partons du principe qu’un site web doit être optimisé pour différents supports : smartphones, tablettes et ordinateurs. L’écran le plus grand est celui de l’ordinateur. Une des résolutions les plus courantes pour un écran d’ordinateur est 1920 x 1080 pixels. C’est aussi généralement l’une des plus grandes résolutions pour lesquelles votre site doit être compatible.

En tenant compte de ces éléments, si un écran d’ordinateur a une largeur d’environ 2000 pixels, nous pouvons ajuster les dimensions des images en fonction de leur emplacement sur la page. Par exemple :

  • Pour une image en pleine largeur : 2000 pixels.
  • Pour une image occupant la moitié de l’écran : 1000 pixels.
  • Pour une image occupant un quart de l’écran : 500 pixels.
Dimensions des images sur une page web

À partir de ces principes, réfléchissez à l’usage que vous souhaitez faire de vos images et à leur emplacement sur la page, puis redimensionnez-les en conséquence. Vous constaterez déjà une réduction significative du poids de vos images. Pour tester, supposez que vous souhaitiez insérer votre image sur une demi-page (1000 pixels de large). Poursuivez la lecture de cet article, où je vous explique en détail comment mettre cela en pratique !

Adieu JPG et PNG : vive l’AVIF !

Après avoir vu comment le dimensionnement d’une image impacte son poids, penchons-nous sur les formats d’images les plus courants et découvrons l’AVIF, un format que vos performances web vont adorer. Il offre des résultats supérieurs au WEBP !

JPG

Le format JPG est l’un des plus populaires, surtout pour les photos. Si vous ouvrez la galerie de votre téléphone, la majorité de vos images sont probablement en JPG (sauf si vous utilisez certains appareils, comme ceux d’Apple, qui peuvent utiliser d’autres formats).

L’avantage principal du JPG est qu’il permet une compression efficace tout en conservant une qualité d’image acceptable. Cela en fait un excellent choix pour les photos à partager ou à stocker en ligne, mais il peut perdre en qualité lors de compressions répétées.

PNG

Le format PNG est préféré lorsqu’il s’agit de conserver une qualité d’image élevée, notamment pour les graphiques, logos, ou images avec des éléments transparents. L’un de ses atouts majeurs est justement la gestion de la transparence, ce qui le rend indispensable dans de nombreuses situations, notamment en webdesign. Toutefois, le PNG ne compresse pas autant que le JPG, ce qui peut engendrer des fichiers plus volumineux.

WEBP

Le format WEBP, développé par Google et introduit dans les années 2010, a été conçu pour offrir un meilleur équilibre entre compression et qualité. Il permet une réduction de la taille des fichiers tout en préservant la transparence des images, ce qui en fait un excellent choix pour le web. De plus en plus de navigateurs supportent ce format, mais il commence à montrer ses limites avec l’émergence de nouvelles technologies.

AVIF

L’AVIF est un format d’image très récent, lancé au début de l’année 2024. Depuis septembre 2024, son adoption a accéléré, notamment après que Google a annoncé son support pour ce format.

L’AVIF se distingue par son taux de compression extrêmement performant. Il offre une réduction de la taille des fichiers d’environ 50 % par rapport au JPG, tout en maintenant une qualité similaire. Cela en fait une véritable aubaine pour les webmasters, car il permet de réduire drastiquement le temps de chargement des pages, un facteur essentiel pour l’optimisation des performances web (webperf). De plus, comme le WEBP, l’AVIF supporte la transparence, et il est compatible avec les animations, rendant son champ d’application très large.

Redimensionner et convertir vos photos avec un outil gratuit en ligne

Le combo idéal pour optimiser vos images : redimensionnement et conversion en AVIF = ❤️. Voyons comment procéder simplement pour redimensionner et convertir vos photos en AVIF.

  1. Accédez à l’outil en ligne Squoosh
    Rendez-vous sur squoosh.app, un outil gratuit développé par Google.
  2. Importez votre image
    Glissez votre image au centre de l’écran ou cliquez sur l’icône pour parcourir vos fichiers et sélectionner la photo à traiter.
  3. Redimensionnez votre image
    Une fois l’image chargée, vous verrez une comparaison avant/après. Sur la partie droite de l’écran, cliquez sur « Resize » et saisissez la largeur souhaitée (la hauteur se mettra à jour automatiquement).
  4. Convertissez en AVIF
    Toujours dans le menu de droite, dans la section « Compress », sélectionnez le format AVIF dans la liste déroulante.
  5. Téléchargez votre photo optimisée
    Cliquez sur le bouton bleu pour télécharger votre image convertie.

L’outil Squoosh vous affiche également le gain de poids pour votre image, et propose des options d’optimisation avancées pour les utilisateurs expérimentés.

Avez-vous testé avec l’une de vos photos en la redimensionnant à 1000px de large et en la convertissant en AVIF ? Quel gain avez-vous obtenu ? Satisfait du résultat ? Faites-le moi savoir dans les commentaires ! Vous avez une astuce ou un complément d’information ? N’hésitez pas à le partager également en commentaire.

Note : cet article a pour but de proposer des optimisations simples et accessibles pour les images sur le web. Si vous êtes un professionnel de la photographie, vous constaterez peut-être que le niveau technique est limité. C’est pourquoi, dans la mesure du possible, je recommande de collaborer avec un spécialiste de la photo pour des optimisations plus avancées : gestion des calques, des couleurs, etc. Amis photographes, je suis animé des meilleures intentions et cherche simplement à initier un processus d’optimisation !

Ma veille WordPress & SEO chaque vendredi dans votre boîte mail, cela vous tente ? Abonnez-vous !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *