Conseils pour optimiser les images de votre site : améliorer les performances et l'expérience utilisateur

Vous ne voulez pas que Google méprise votre site Web, croyez-nous. Heureusement, vous pouvez optimiser vos images et ainsi améliorer l'efficacité de votre site. Un problème avec leur formatage est que les changements peuvent affecter leur qualité (ce qui à son tour pourrait amener le visiteur à détester votre site Web).

Ce n'est pas une chose terrible si vous ne les faites pas paraître horribles. Il existe quelques astuces et techniques qui vous permettront de réduire la taille de fichier de vos images tout en les gardant suffisamment attrayantes pour être fièrement affichées sur votre site Web.

Voyons donc comment formater vos photos sans les rendre mauvaises, ainsi que comment les optimiser pour le Web et les performances.

Que signifie optimiser les images ?

Les images volumineuses ralentissent le chargement de vos pages Web, ce qui entraîne une mauvaise expérience utilisateur. En utilisant l'optimisation d'image, c'est-à-dire en réduisant la taille du fichier à l'aide d'un plugin ou d'un script, vous conservez non seulement leur qualité, mais vous améliorez également le temps de chargement. Deux méthodes de compression couramment utilisées sont la compression avec perte et sans perte.

Les avantages du formatage d'image

Pourquoi avez-vous besoin de formater vos photos en premier lieu ? Quels sont les avantages? L'optimisation des performances de vos photos présente divers avantages. Selon HTTP Archive, les images représentaient 21 % du poids total d'une page Web en novembre 2018.

Cela en fait la deuxième partie la plus importante de votre site que vous devez optimiser, précédée uniquement par la vidéo.

Il a priorité sur les scripts et les polices. Malgré le fait qu'une procédure d'optimisation d'image appropriée soit l'une des choses les plus simples à établir, de nombreux propriétaires de sites Web la manquent.

Voici quelques-uns des avantages les plus importants :

• Cela améliorera considérablement le chargement des scripts. Si votre page prend trop de temps à se charger, vos visiteurs peuvent devenir frustrés et passer à un autre site Web.
• Lorsqu'il est utilisé en conjonction avec un bon plugin WordPress, il peut avoir un grand effet sur le référencement. Dans les résultats des moteurs de recherche, votre site Web sera mieux classé.
• Il sera plus facile de créer des sauvegardes.
• Les fichiers plus petits utilisent moins de bande passante. Cela sera apprécié à la fois par les réseaux et les navigateurs.
• Réduit la quantité d'espace de stockage requise sur votre serveur (cela dépend du nombre de vignettes que vous optimisez)

Comment améliorer la qualité et les performances des images pour le Web

Le but principal du formatage d'image est de trouver un équilibre entre la qualité et la taille du fichier. Presque toutes ces optimisations peuvent être effectuées de plusieurs manières. Les compresser avant de les télécharger sur votre site WordPress est l'une des méthodes les plus utilisées. Cela se fait généralement dans un programme comme Adobe Photoshop ou Affinity Photo.

Le format de fichier et le type de compression sont les deux facteurs que vous devez toujours prendre en compte. Pour déterminer ce qui fonctionne le mieux avec chaque image ou type de fichier, vous devrez explorer.

Choisissez le bon format de fichier

Assurez-vous d'avoir choisi le meilleur type de fichier pour vos photos avant de commencer à les éditer. Vous pouvez utiliser une variété de fichiers, notamment :

• PNG — la taille du fichier est plus grande, mais la qualité reste plus ou moins la même. Bien qu'il ait été conçu pour être un format d'image sans perte, il peut également être avec perte.
• L'optimisation avec et sans perte est utilisée dans JPEG. Pour un équilibre sain entre qualité et taille de fichier, vous pouvez définir le niveau de qualité.
• Seules 256 couleurs sont utilisées dans les GIF. Pour les graphiques animés, c'est l'option idéale. Seule la compression sans perte est utilisée.

Il en existe quelques autres, tels que JPEG XR et WebP, bien qu'ils ne soient pas pris en charge par tous les navigateurs. Pour les photos avec beaucoup de couleurs, vous devez utiliser JPEG ou JPG, et pour les images simples, PNG.

Optimisation avec perte ou sans perte

Il existe deux styles de compression d'image acceptables, appelés avec perte et sans perte.

Le terme « avec perte » fait référence à un filtre qui supprime certaines données. Comme cela altèrera l'image, vous devrez être prudent quant à la façon dont vous la minimisez. Pour effectuer ce type d'optimisation, vous pouvez utiliser des logiciels comme Adobe Photoshop, Affinity Photo, etc. La compression avec perte est utilisée dans l'exemple ci-dessus.

Le terme « sans perte » fait référence à un filtre de compression de données. Cela a un effet minime sur la qualité de l'image. Sur votre PC, vous pouvez utiliser des applications telles que Photoshop, FileOptimizer ou ImageOptim pour effectuer une compression sans perte.

Il est préférable d'essayer plusieurs stratégies de compression pour trouver celles qui fonctionnent le mieux pour chaque image ou format.

Outils et programmes d'optimisation d'image

Il existe plusieurs outils et applications disponibles, payants et gratuits, pour vous aider à optimiser vos photos. Certaines entreprises vous fournissent les outils pour effectuer vos propres optimisations, tandis que d'autres le font pour vous.

Nous sommes de grands partisans d'Affinity Photo car il est peu coûteux et a des capacités presque identiques à Adobe Photoshop.

Voici quelques autres ressources et initiatives à explorer :

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG mini
• OptiPNG

Redimensionner les images à l'échelle

Auparavant, il était crucial de soumettre les photos à l'échelle plutôt que de laisser le CSS les redimensionner. Étant donné que WordPress 4.4 prend désormais en charge les images réactives, ce n'est plus un problème. Chaque image ajoutée à la médiathèque est automatiquement redimensionnée par WordPress. En spécifiant toutes les tailles potentielles d'une image, les navigateurs peuvent désormais choisir la taille la plus adaptée et ignorer les autres.

Nettoyez votre bibliothèque multimédia

Si vous souhaitez économiser de l'espace tout en nettoyant simultanément votre bibliothèque multimédia, vous pouvez utiliser Media Cleaner pour rechercher les fichiers multimédias indésirables. Le plug-in analysera tous vos fichiers multimédias et affichera ceux qui ne sont pas utilisés sur le tableau de bord Media Cleaner pour que vous puissiez les afficher et les supprimer.

Plugins d'optimisation d'image que vous pouvez utiliser

Heureusement, vous n'avez pas à gérer tout le formatage ou la compression à la main avec WordPress. Vous pouvez utiliser des plugins pour automatiser au moins une partie du travail pour vous. Il existe un certain nombre de plugins disponibles qui optimiseront vos fichiers image lorsque vous les soumettez. Ils amélioreront même la qualité des photos que vous avez déjà publiées.

• Optimiseur d'image Imagify
• Optimiseur d'image ShortPixel
• Optimole
• Nuage d'optimiseur d'image EWWW
• Optimus Image Optimizer
• WP Smush
• TinyPNG
• ImageRecycle

Conclusion

Votre site sera plus apprécié par les moteurs de recherche, les navigateurs et les réseaux, et se chargera plus rapidement pour vos lecteurs, une fois que vous aurez préparé vos photos pour de meilleures performances et en suivant les meilleures pratiques.

Avez-vous préparé vos photographies pour les faire courir plus vite ? Le faites-vous manuellement, avec un plugin ou en utilisant les deux ? Y a-t-il un programme ou un plugin que vous suggéreriez ? Y a-t-il quelque chose de plus que vous voudriez dire ?

Parlez-nous de vos stratégies et meilleures pratiques dans la section des commentaires.