Comment optimiser les images pour le Web : un guide étape par étape pour de meilleures performances du site

Il ne fait aucun doute que les images sont un atout inestimable pour le World Wide Web. Qu'il s'agisse de visualiser des données, de diviser des paragraphes de texte ou de montrer votre travail de portfolio, les photos et les graphiques sont une partie importante de la plupart des conceptions de sites Web et aident les utilisateurs à vivre de superbes expériences en ligne.

Cependant, avoir de superbes visuels peut nuire à votre site Web. Avec des résolutions plus élevées, des fichiers de plus grande taille, ce qui signifie également des temps de chargement plus lents. AKA, les images sont souvent la cause de mauvaises performances du site. Et n'oubliez pas que l'ajout d'images à votre site Web a pour but de créer une meilleure expérience pour vos utilisateurs (ou peut-être même d'augmenter les ventes et les conversions !), ce qui est difficile à faire avec un site lent.

Alors, comment équilibrez-vous les performances du site avec la conception visuelle ?

En optimisant vos images.

Il y a beaucoup de petites choses que vous pouvez faire tout au long du processus de création d'image pour optimiser la taille des fichiers, en particulier en pensant à votre site Web.

Dans ce guide étape par étape sur l'optimisation d'image, je couvrirai :

• Qu'est-ce que l'optimisation d'image ?
• Pourquoi l'optimisation des images est-elle importante ?
• 7 façons d'optimiser les images pour le web

Qu'est-ce que l'optimisation d'image ?

De manière générale, l'optimisation d'image consiste à réduire la taille du fichier sans perdre en qualité. Vous pouvez optimiser vos images en phase de création (en utilisant les bonnes options "Exporter" dans Photoshop) ou directement sur votre site web (en utilisant le lazy load pour afficher les médias sur votre site). L'objectif est de réduire la quantité de données qu'un utilisateur doit télécharger, afin qu'il puisse obtenir le contenu qu'il recherche plus rapidement sans sacrifier la qualité.

Pourquoi l'optimisation des images est-elle importante ?

Les gens ont une courte durée d'attention lorsqu'il s'agit du Web, c'est pourquoi il est important que votre site Web se charge en deux secondes ou moins. Et l'un des facteurs les plus courants qui ralentissent votre site est vos images. (Même si votre site Web fonctionne sur les meilleurs serveurs, comme vous le ferez avec un hébergeur WordPress géré, les images peuvent nuire aux performances.)

En tirant parti des meilleures pratiques d'optimisation des images, vous garderez la taille de votre fichier petite et votre temps de chargement rapide, créant ainsi une meilleure expérience pour les visiteurs de votre site.

Cependant, il existe une autre raison pour laquelle l'optimisation des images est importante, directement liée aux résultats de votre entreprise. En plus de ralentir votre site Web, les images occupent de l'espace disque sur le serveur qui alimente votre site. La plupart des hébergeurs imposent une limite de bande passante par plan, ce qui signifie que vous ne disposez pas de ressources illimitées et que vos images occuperont rapidement cet espace.

Bien que ce ne soit pas la fin du monde si vous dépassez cette limite, des frais de dépassement peuvent vous être facturés, ou pire, la fermeture de votre site Web.

En optimisant vos images, vous pourrez tirer le meilleur parti du stockage de votre site et éviter cette limite de bande passante.

Maintenant que vous savez à quel point l'optimisation des images est importante, parlons de la façon de le faire ! Ce guide étape par étape couvrira tout, des conseils Photoshop aux pratiques de développement.

Comment optimiser les images pour le Web

Ce guide étape par étape couvrira tout ce que vous pouvez faire pour optimiser les images, en commençant par Photoshop et en terminant sur votre site.

Suivez ces étapes pour optimiser vos images afin d'améliorer les performances de votre site :

1. Comparez la vitesse de votre site actuel.
2. Sachez choisir le meilleur type de fichier image.
3. Redimensionnez vos images avant de les exporter.
4. Compressez les images pour réduire la taille du fichier.
5. Automatisez l'optimisation des images avec un plugin WordPress.
6. Utilisez la technique du « flou » pour charger d'abord une image de qualité inférieure.
7. Utilisez le chargement différé.

1. Comparez la vitesse actuelle de votre site

Avant de faire tout ce travail d'optimisation de vos images, commencez par faire un test de vitesse sur votre site ! À la fin, vous pourrez voir l'impact que vous avez eu (en plus, vous pouvez le partager avec votre équipe ou votre patron, pour des félicitations supplémentaires). Certains outils de test de vitesse populaires sont :

• Google PageSpeed Insights
• Outils Pingdom
• GTMetrix
• WebPageTest

Ces outils basés sur un navigateur fonctionnent tous de manière assez similaire : ouvrez le lien, puis entrez votre URL pour obtenir un rapport rapide sur la vitesse et les performances de votre site.

2. Savoir choisir le meilleur type de fichier image

Lorsque vous avez terminé de créer des images (que ce soit en les enregistrant depuis votre appareil photo ou en les exportant depuis un outil comme Photoshop), vous aurez la possibilité de spécifier le type de fichier. Les types de fichiers les plus courants à utiliser sur le Web sont les fichiers JPEG, PNG et GIF. Et comme vous pouvez le deviner, ils ont tous leurs propres avantages, inconvénients et meilleures pratiques lorsqu'ils sont placés sur votre site Web.

JPEG

Les images JPEG fonctionnent mieux pour afficher des photographies couleur complexes sur votre site, car elles permettent d'obtenir une image de meilleure qualité avec une taille de fichier plus petite. Ce type de fichier fonctionnera probablement pour la majorité des images que vous souhaitez utiliser sur votre site, à une exception près : les images avec un arrière-plan transparent. (Pour ceux-là, voir la section suivante sur les PNG !)

Lorsque vous utilisez une image JPEG pour votre site Web, envisagez de l'exporter en tant que "Progressif". Cela permet au navigateur de charger instantanément une version simple de l'image avant de charger entièrement la pleine résolution sur le site.

Si vous travaillez dans Photoshop, vous trouverez ce paramètre lorsque vous exportez en tant que "Enregistrer pour le Web".

PNG

Si vous n'avez pas une tonne de couleurs dans votre image (comme des illustrations plates ou des icônes), ou si vous souhaitez qu'elle ait un arrière-plan transparent, je vous recommande de l'exporter au format PNG. Assurez-vous d'avoir les bonnes dimensions d'image et recherchez l'option d'enregistrement au format PNG-24 (ou 8, s'il n'y a pas de perte de qualité).

GIF

Le troisième format d'image le plus courant pour le Web est le GIF. Ils ne prennent en charge que 256 couleurs, vous devrez donc être sélectif avec ce type de fichier !

Pour optimiser les GIF pour votre site Web, réfléchissez de manière critique à leur durée de vie, s'ils doivent être bouclés et combien vous en avez vraiment besoin sur une page ou un site donné.

3. Redimensionnez vos images avant de les télécharger

L'un des moyens les plus simples d'optimiser les images pour le Web consiste à les redimensionner avant de les télécharger sur votre site. Surtout si vous travaillez avec des images brutes d'un appareil photo reflex numérique, les dimensions sont souvent beaucoup plus grandes que ce dont vous avez réellement besoin.

Par exemple, supposons que vous ajoutez des images à un article de blog sur votre site. Si votre thème WordPress affiche des images à 500 x 500 mais que vous téléchargez des images avec une résolution de 1024 x 1024, tous ces pixels supplémentaires ne font qu'augmenter la taille du fichier et réduire la vitesse du site sans offrir un réel avantage.

En recadrant ou en redimensionnant vos images avant de les télécharger, vous réduirez la taille du fichier, ce qui aidera votre site à se charger un peu plus rapidement et à économiser de l'espace disque pour encore plus d'images.

Pour redimensionner votre image, ouvrez simplement le logiciel de retouche d'image de votre choix. Photoshop fonctionne bien, ou vous pouvez également utiliser des outils plus simples comme Aperçu (pour Mac), Paint (pour Windows) ou Canva (un outil de navigation).

4. Compresser les images pour réduire la taille du fichier

Une fois que vous avez votre image finale, enregistrée dans le bon format et recadrée à une taille appropriée, vous pouvez effectuer une étape supplémentaire pour l'optimiser avant de la télécharger sur votre site : la compresser.

Ce processus vous aidera à réduire la taille du fichier sans perdre en qualité d'image notable. Il existe deux principaux types de compression : avec perte et sans perte.

La compression sans perte maintiendra le même niveau de qualité avant et après la compression. La compression avec perte supprimera certains éléments de la photo, mais généralement d'une manière que l'œil humain ne remarquera pas. Pour en savoir plus sur ces types de compression, je recommande ce guide d'Imagify.

Si vous voyez une image spécifique sur votre site se charger et apparaître lentement, cela peut être un signe qu'elle a besoin d'être compressée, redimensionnée ou les deux.

Pour compresser vos images, tout ce dont vous avez besoin est un outil de compression d'image. Mes favoris incluent :

• TinyPNG : un outil gratuit basé sur un navigateur pour compresser les images PNG et JPEG.
• ImageOptim : Une application open-source gratuite pour compresser des images.
• JPEGmini : Une application de recompression de photos pour Mac et Windows.
• RIOT : une application Windows gratuite pour optimiser les images.
• Image Optimizer : un module complémentaire gratuit pour Local.

TinyPNG

Cet outil basé sur un navigateur optimise les images à l'aide d'une compression intelligente avec perte, réduisant la taille de votre fichier en diminuant le nombre de couleurs utilisées. (Mais ne vous inquiétez pas, vous ne le remarquerez même pas !) Il est gratuit et rapide à utiliser pour les fichiers PNG et JPEG.

ImageOptim

Il s'agit d'une application Mac gratuite qui compresse les images en supprimant les ballonnements inutiles, tout en préservant autant que possible la qualité d'image.

JPEG mini

JPEGmini est une puissante option payante qui vous aide à réduire la taille du fichier tout en conservant à la fois la qualité et le format. Il dispose d'un essai gratuit, vous pouvez donc le tester avant de l'acheter.

ÉMEUTE

L'outil d'optimisation d'image radicale (RIOT) est une application Windows gratuite permettant de réduire la taille des fichiers image. Il dispose d'une vue côte à côte, ce qui vous permet de comparer la qualité d'image avant et après la compression.

Image Optimizer, un module complémentaire gratuit pour Local

Si vous utilisez Local comme environnement de développement local, vous pouvez utiliser le module complémentaire Image Optimizer pour compresser automatiquement les images hors ligne. Il analyse votre site à la recherche de tous les fichiers image, vous évitant ainsi de les compresser individuellement et accélérant ainsi votre site.

5. Automatisez l'optimisation des images avec un plugin WordPress

À ce stade, vous commencez peut-être à penser que l'optimisation d'image représente beaucoup de travail, et c'est possible ! Mais il existe également un moyen simple de rationaliser certaines de ces étapes, et c'est en installant un plugin d'optimisation d'image sur votre site WordPress.

J'ai quelques recommandations, et elles ont chacune des caractéristiques uniques. Mais généralement, un plugin d'optimisation d'image compresse et redimensionne vos images lorsque vous les téléchargez sur votre site WordPress. Cela signifie que vous pouvez ignorer ces étapes au lieu de les faire manuellement, ce qui vous fait gagner beaucoup de temps.

Cette méthode est également intéressante si vous créez des sites pour des clients. L'utilisateur final et les créateurs de contenu sont soumis à une forte pression pour essayer de se souvenir de chaque étape du processus d'optimisation d'image. En installant un plugin qui fera la majeure partie du travail pour eux, vous contribuerez à garantir la vitesse et les performances du site que vous avez créé une fois que vous l'aurez remis.

Pour optimiser les images sur un site WordPress, je recommande ces plugins :

• Nuage d'optimiseur d'image EWWW
• TinyPNG
• Kracken.io
• Imaginer

Nuage d'optimiseur d'image EWWW

Ce plugin WordPress optimisera automatiquement vos images lorsque vous les téléchargez sur votre site, ou il peut également optimiser les images que vous avez téléchargées dans le passé. Cela le rend incroyablement avantageux si vous travaillez avec un site existant avec des images non optimisées.

TinyPNG

Ce plugin WordPress de l'équipe TinyPNG peut optimiser les images JPEG et PNG lors du téléchargement. Si vous êtes un fan de l'outil basé sur un navigateur, rationalisez le processus avec leur plugin gratuit !

Kracken.io

Le plugin Kracken.io peut optimiser les images nouvelles et existantes sur votre site WordPress. Il prend également en charge les modes de compression sans perte et avec perte, ce qui vous donne beaucoup de contrôle sur le résultat final.

Imaginer

Ce plugin WordPress vous aidera à optimiser vos images sans perdre en qualité. Il est également compatible avec WooCommerce et NextGen Gallery, si vous utilisez ces plugins.

Remarque : Avant de choisir un plugin, assurez-vous de regarder comment ils fonctionnent. Certains utilisent des opérations de serveur qui peuvent causer des problèmes sur votre site, tandis que d'autres utilisent des options FTP pour réduire la charge sur votre serveur Web.

6. Utilisez la technique "Blur Up" pour charger d'abord une image de qualité inférieure

Même après toutes les étapes d'optimisation précédentes, il existe des cas où vous travaillez toujours avec des fichiers volumineux ou de nombreuses images sur une page, ce qui ralentit la vitesse de votre site. Dans ces cas, il est parfois utile non seulement d'optimiser les images, mais aussi d'optimiser l'expérience de chargement afin que les visiteurs du site pensent que vos fichiers multimédias se chargent plus rapidement qu'ils ne le sont réellement.

C'est l'objet de ces deux étapes suivantes : donner l'apparence d'images à chargement plus rapide, afin que les utilisateurs ne se contentent pas de regarder une page vierge pendant le chargement de vos fichiers.

Une façon de procéder consiste à charger d'abord une image de qualité inférieure (LQI). En chargeant une version plus petite de l'image avant de charger la taille réelle, cela donne à l'utilisateur quelque chose à regarder pendant qu'il attend tous les détails. Cela donne la perception d'un temps de chargement plus rapide même si, techniquement, tout se charge au même rythme.

Une façon populaire de le faire est la technique du "flou", que vous pouvez apprendre à mettre en œuvre avec ce tutoriel sur CSS-Tricks.

7. Chargement paresseux des images de votre site

Semblable à la technique du "flou", il existe une autre astuce qui vous aidera à donner l'apparence d'images à chargement plus rapide : le chargement paresseux.

Quand quelqu'un atterrit sur votre site, il commence en haut de la page. Il leur faudra probablement un moment pour faire défiler toute la page, surtout s'ils sont engagés. Au lieu d'essayer de charger toutes les images en même temps, le chargement paresseux part du principe que les utilisateurs se soucient le plus du contenu qu'ils peuvent voir. Ainsi, les images de leur vue de navigateur se chargent entièrement en premier, tandis que les autres images chargent d'abord un espace réservé, jusqu'à ce que l'utilisateur fasse défiler jusqu'à cette section de la page.

Le chargement paresseux est une excellente technique en soi, et encore plus puissante lorsqu'elle est associée au reste de ces conseils d'optimisation d'image ! Et, c'est très facile à faire sur un site WordPress, grâce au plugin Smush.

Ceci conclut notre guide étape par étape pour améliorer les performances du site en optimisant les images ! Pour voir l'impact que cela a eu sur votre site, exécutez un autre test de vitesse. Comment avez-vous fait?

Avec les bons outils d'optimisation d'image, vous pourrez voir une meilleure vitesse et de meilleures performances du site en un rien de temps !