Saviez-vous que l’optimisation de vos images avant de les téléverser sur WordPress peut avoir un impact considérable sur la vitesse de votre site ?
Lorsqu’ils créent un nouveau blog, de nombreux débutants téléversent simplement des images sans les optimiser pour le web. Ces fichiers images volumineux ralentissent votre site.
Vous pouvez corriger ce problème en utilisant les meilleures pratiques d’optimisation des images dans le cadre de votre routine de blog.
Dans cet article, nous allons vous afficher comment optimiser vos images pour une performance web plus rapide sans perdre en qualité. Nous partagerons également des extensions d’optimisation d’images automatiques pour WordPress qui peuvent vous faciliter la vie.
Comme il s’agit d’un guide complet sur l’optimisation des images pour le web, nous avons créé une table des matières facile à suivre :
- What Is Image Optimization?
- What Are the Benefits of Image Optimization?
- How to Save and Optimize Images for Web Performance
- Best Image Optimization Tools and Programs
- Best Image Optimization Plugins for WordPress
- Final Thoughts and Best Practices for Image Optimization
- Expert Guides on Improving WordPress Performance
1. Qu’est-ce que l’optimisation des images ?
L’optimisation des images est le processus qui consiste à enregistrer et à fournir des images dans la taille de fichier la plus petite possible sans réduire la qualité globale de l’image.
Bien que le processus semble complexe, il est en fait assez facile de nos jours. Vous pouvez utiliser l’une des nombreuses extensions et outils d’optimisation d’images pour compresser automatiquement les images jusqu’à 80 % sans perte visible de qualité d’image.
Voici un exemple d’image optimisée et non optimisée :
Comme vous pouvez le constater, lorsqu’elle est optimisée correctement, la même image peut être jusqu’à 80 % plus petite que l’originale sans perte de qualité. Dans cet exemple, l’image est 52% plus petite.
Comment fonctionne l’optimisation des images ?
En termes simples, l’optimisation d’image fonctionne en utilisant la technologie de compression.
La compression peut être « avec perte » ou « sans perte ».
La compression sans perte réduit la taille globale du fichier sans aucune perte de qualité de l’image. Avec la compression avec perte, il peut y avoir une légère perte de qualité, mais dans l’idéal, elle ne sera pas notifiée à vos internautes.
Qu’est-ce que l’optimisation des images ?
Vous avez peut-être reçu une recommandation d’optimisation des images de la part du support de votre hébergeur WordPress ou d’un outil de test de vitesse et vous vous demandez ce qu’il faut faire.
Vous devrez réduire la taille des fichiers de vos images en les optimisant pour le web. Nous vous afficherons la marche à suivre étape par étape.
2. Quels sont les avantages de l’optimisation des images ?
L’optimisation de vos images présente de nombreux avantages, mais voici les principaux que vous devez connaître :
- Accélération de la vitesse du site
- Amélioration du classement des moteurs de recherche (SEO)
- un taux de conversion global plus élevé pour les ventes et les prospects
- Moins de stockage et de bande passante (ce qui peut réduire les coûts d’hébergeur et de CDN).
- Sauvegardes plus rapides du site (ce qui peut réduire le coût du stockage des sauvegardes)
Les images sont le deuxième article le plus lourd d’une page web après les vidéos. Selon les archives HTTP, les images représentent 42 % du poids total d’une page web moyenne.
Pour les moteurs de recherche (SEO) et les conversions, l’optimisation des images est une nécessité pour tous les sites d’entreprises qui veulent réussir en ligne.
Vous vous demandez peut-être quelle différence l’optimisation des images peut réellement faire.
Selon une étude de Strangeloop, un retard d’une seconde dans le temps de chargement d’un site peut vous coûter 7 % de ventes, 11 % de pages vues en moins et une baisse de 16 % de la satisfaction des clients/clients.
Si ces raisons ne suffisent pas à accélérer votre site, sachez que les moteurs de recherche comme Google accordent également un traitement préférentiel aux sites qui se chargent plus rapidement.
Cela signifie qu’en améliorant vos images pour le web, vous pouvez à la fois améliorer la vitesse du site et renforcer le classement SEO de WordPress.
Tutoriel vidéo
Si vous préférez des instructions écrites, continuez à lire.
3. Comment enregistrer et optimiser les images pour le Web
La clé d’une optimisation d’image bien réussie pour les performances web est de trouver l’équilibre parfait entre la taille de fichier la plus petite et une qualité d’image acceptable.
Les trois éléments qui jouent un rôle énorme dans l’optimisation de l’image sont les suivants :
- Format de fichier image (JPEG vs. PNG vs. GIF)
- Compression (une compression plus élevée = un fichier plus petit)
- Dimensions de l’image (hauteur et largeur)
En choisissant la bonne combinaison des trois, vous pouvez réduire la taille de votre image jusqu’à 80 %.
Examinons chacun d’entre eux plus en détail.
1. Format du fichier image
Pour la plupart des propriétaires de sites, les trois seuls formats de fichier image qui comptent vraiment sont JPEG, PNG et GIF. Choisir le bon type de fichier joue un rôle important dans l’optimisation des images.
Pour simplifier les choses, il est préférable d’utiliser les JPEG pour les photos ou les images très colorées, les PNG pour les images simples ou transparentes, et les GIF uniquement pour les images animées.
Pour ceux qui ne connaissent pas la différence entre chaque type de fichier, le format d’image PNG n’est pas compressé, ce qui signifie qu’il s’agit d’une image de meilleure qualité. L’inconvénient est que la taille des fichiers est beaucoup plus importante.
En revanche, le format JPEG est un format de fichier compressé qui réduit légèrement la qualité de l’image afin de commander un fichier de taille nettement inférieure.
Le GIF, quant à lui, utilise uniquement 256 couleurs et une compression sans perte, ce qui en fait le meilleur choix pour les images animées.
Sur WPBeginner, nous utilisons les trois formats d’image en fonction du type d’image.
2. Compression
Vient ensuite la compression des images, qui joue un rôle considérable dans l’optimisation des images.
Il existe différents types et niveaux de compression d’images. Les réglages de chacun d’entre eux varient en fonction de l’outil de compression d’image utilisé.
La plupart des outils de modification d’image tels que Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo et d’autres disposent de fonctionnalités de compression d’image avant intégrées.
Vous pouvez également enregistrer les images normalement, puis utiliser un outil web comme TinyPNG ou JPEGmini pour faciliter la compression des images.
Bien qu’elles nécessitent un certain effort manuel, ces deux méthodes vous permettent de compresser les images avant de les téléverser sur WordPress, et c’est ce que nous faisons sur WPBeginner.
Il existe également plusieurs extensions WordPress populaires comme Optimole et EWWW Image Optimizer qui peuvent compresser automatiquement les images lorsque vous les téléversez pour la première fois. C’est pratique, et de nombreux débutants et même de grandes entreprises préfèrent utiliser ces extensions d’optimisation d’images.
Nous en dirons plus sur l’utilisation des extensions WordPress ultérieurement dans cet article.
3. Dimensions de l’image
Normalement, lorsque vous importez une photo à partir de votre téléphone ou d’un appareil photo numérique, elle présente une très haute résolution et de grandes dimensions de fichier (hauteur et largeur).
En général, ces photos ont une résolution de 300 DPI et des dimensions à partir de 2000 pixels. Si les photos de haute qualité conviennent bien à l’impression ou à la publication assistée par ordinateur, leur grande taille les rend inadaptées aux sites web.
La réduction des dimensions de l’image à un niveau plus raisonnable permet de diminuer considérablement la taille du fichier. Vous pouvez simplement redimmensionner les images à l’aide d’un logiciel de modification d’image sur votre ordinateur.
Par exemple, nous avons optimisé une photo avec une résolution de 300 DPI et des dimensions de 4900×3200 pixels. La taille du fichier original était de 1,8 Mo.
Nous avons choisi le format JPEG pour une meilleure compression et modifié les dimensions en 1200×795 pixels. La taille du fichier a été réduite à seulement 103 Ko. C’est 94 % de moins que la taille du fichier original.
Maintenant que vous connaissez les trois facteurs importants de l’optimisation des images, examinons les différents outils d’optimisation des images destinés aux propriétaires de sites web.
4. Meilleurs outils et programmes d’optimisation d’images
Comme nous l’avons mentionné précédemment, la plupart des logiciels de modification d’images sont dotés de réglages d’optimisation et de compression des images.
En dehors des logiciels de modification d’images, il existe également plusieurs outils d’optimisation d’images gratuits et puissants que vous pouvez utiliser pour optimiser les images pour le web (en quelques clics).
Nous vous recommandons d’utiliser ces outils pour optimiser les images avant de les téléverser sur WordPress, surtout si vous êtes perfectionniste.
Cette méthode vous aide à enregistrer de l’espace disque sur votre compte d’hébergeur WordPress, et elle garantit l’image la plus rapide avec la meilleure qualité puisque vous examinez manuellement chaque image.
Adobe Photoshop
Adobe Photoshop est une application de modification d’image haut de gamme qui vous permet d’exporter des images avec une taille de fichier réduite pour le web.
La boîte de dialogue d’exportation vous permet de choisir le format de fichier image (JPG, PNG, GIF) qui permet d’obtenir la taille de fichier la plus petite.
Vous pouvez également réduire la qualité de l’image, les couleurs et d’autres options pour diminuer encore la taille du fichier.
GIMP
GIMP est une alternative libre et gratuite à Adobe Photoshop. Il peut être utilisé pour optimiser vos images pour le web. L’inconvénient est qu’il n’est pas aussi facile à utiliser que d’autres solutions de cette liste.
Tout d’abord, vous devez ouvrir votre image dans GIMP et sélectionner l’option Fichier » Exporter sous… « . Cela fera apparaître la boîte de dialogue Exporter l’image, dans laquelle vous pouvez donner un nouveau nom à votre fichier. Cliquez ensuite sur le bouton « Exporter ».
Les options d’exportation d’images s’affichent. Pour les fichiers JPEG, vous pouvez utiliser le Diaporama « Qualité » pour sélectionner le niveau de compression et réduire la taille du fichier.
Enfin, vous devez cliquer sur le bouton « Exporter » pour enregistrer le fichier image optimisé.
TinyPNG
TinyPNG est une application web gratuite qui utilise une technique intelligente de compression avec perte pour réduire la taille de vos fichiers PNG et JPEG. Tout ce que vous avez à faire est d’aller sur leur site et de téléverser vos images en utilisant un simple glisser-déposer.
Ils compresseront l’image et vous donneront un lien de téléchargement.
Ils ont également une extension pour Adobe Photoshop, que nous utilisons dans le cadre de notre processus de modification des images, car elle vous permet d’accéder à TinyPNG à partir de Photoshop.
Pour les développeurs/développeuses, ils ont une API pour convertir les images automatiquement. De plus, pour les débutants, ils ont une extension WordPress qui le fera pour vous. Nous en reparlerons ultérieurement.
JPEGmini
JPEGmini utilise une technologie de compression sans perte qui réduit considérablement la taille des images sans affecter leur qualité perçue. Vous pouvez également comparer la qualité de l’image originale et de l’image compressée.
Vous pouvez utiliser leur version web gratuitement ou acheter le programme pour votre ordinateur. Ils ont également une API payante pour automatiser le processus pour votre serveur.
ImageOptim
ImageOptim est un utilitaire Mac qui vous permet de compresser les images sans perte de qualité en trouvant les meilleurs paramètres de compression et en retirant les profils de couleur inutiles.
Une alternative à Windows est le Trimage.
5. Les meilleures extensions d’optimisation d’images pour WordPress
Nous pensons que la meilleure façon d’optimiser vos images est de le faire avant de les téléverser sur WordPress. Cependant, si vous gérez un site multi-auteurs ou si vous avez besoin d’une solution automatisée, alors vous pouvez essayer un plugin de compression d’images WordPress.
Voici notre liste des meilleures extensions WordPress de compression d’images :
- Optimole, une extension populaire de l’équipe de ThemeIsle
- Optimiseur d’images EWWW
- JPEG, PNG & WebP Image Compression, une extension de l’équipe TinyPNG mentionnée ci-dessus
- Imagify, une extension créée par la populaire équipe de WP Rocket
- ShortPixel Image Optimizer
- Optimiser
- reSmush.it
- Envira Gallery est une extension de galerie WordPress avec compression d’image intégrée.
Ces extensions WordPress d’optimisation d’images vous aideront à accélérer votre site.
6. Réflexions finales et meilleures pratiques pour l’optimisation des images
Si vous n’enregistrez pas d’images optimisées pour le web, vous devez le faire dès maintenant. La vitesse de votre site s’en trouvera considérablement améliorée et vos utilisateurs/utilisatrices vous en remercieront.
De plus, la rapidité des sites est un atout pour le référencement, et vous constaterez probablement une amélioration de votre classement dans les moteurs de recherche.
En dehors de l’optimisation des images, les deux choses qui vous aideront de manière significative à accélérer votre site sont l’utilisation d’une extension de mise en cache WordPress et l’utilisation d’un CDN WordPress.
Vous pouvez également faire appel à une entreprise d’hébergement WordPress infogérée, car elle propose souvent à la fois la mise en cache et le CDN dans le cadre de sa plateforme.
Guides d’experts sur l’amélioration des performances de WordPress
Maintenant que vous savez comment accélérer votre site web en optimisant vos images, vous pouvez consulter d’autres articles relatifs à l’amélioration des performances de WordPress.
- Le guide ultime pour améliorer la vitesse et les performances de WordPress
- Comment accélérer les performances de WooCommerce
- Les meilleurs plugins de mise en cache WordPress pour accélérer votre site web
- Comment optimiser Core Web Vitals pour WordPress (Guide ultime)
- Comment réduire le temps d’affichage du premier octet (TTFB) dans WordPress – Conseils d’experts
- Comment utiliser le plugin GTmetrix pour améliorer les performances d’un site WordPress
- L’hébergement WordPress le plus rapide (tests de performance)
- Les indicateurs importants à mesurer sur votre site WordPress
- Comment effectuer correctement un test de vitesse d’un site web
- Comment tester le stress d’un site web WordPress
Nous espérons que cet article vous a aidé à apprendre comment optimiser vos images sur WordPress. Vous pouvez également consulter notre guide sur la façon d’améliorer la sécurité de WordPress ou nos choix d’experts pour les meilleures extensions WordPress pour les sites professionnels.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Michelle N says
Would love to say that this has been incredibly helpful, easy to digest and implement, I appreciate all the tools provided. Thank you!
– from a beginner blogger
WPBeginner Support says
Glad our guide was helpful
Administrateur
mohadese esmaeeli says
By the way, another question I have is whether, when using image optimization plugins and optimizing previously uploaded images, the new images replace the old ones? Or do the original images remain in the WordPress media library, with the optimized images alongside them?
WPBeginner Support says
It would depend on the specific plugin you are using as some will replace the image while others have the option to keep the original.
Administrateur
Jiří Vaněk says
Many of them give you a choice whether you want to keep the original images or delete them. From personal experience, I recommend keeping the original images on the website (at least as a backup).
mohadese esmaeeli says
Hello,
Greetings to you. This article appears to be quite comprehensive. I became acquainted with your website a few days ago and started reading the articles. I have decided to implement the same process on my website as I read through these articles.
I quickly reached point 2, focusing on site speed. To be honest, I have been working on my site for just a few days, and I have only managed to achieve a 10% increase in site speed.
WPBeginner Support says
An improvement is still an improvement, we’re glad to hear our guide is helpful
Administrateur
mohadese esmaeeli says
Yes, that’s exactly right. In this vast and competitive world, those who are always improving their website and offering something more than their competitors will be the winners. Otherwise, we will be the losers.
Moinuddin Waheed says
Having optimizes images for websites or blogs is very important for the speed of the website.
Heavy image sizes takes time to load and causes the website to slow.
I have used some of the plugins for image optimisation.
But I think best option is to use caching plugins and CDN for the websites.
it lets the website speed not only fast but also helps in retaining the visitors.
WPBeginner Support says
CDNs are normally for speed instead of retention but a fast loading site does help keep your visitors and helps make them want to return
Administrateur
Lewis says
First of all, it’s important to note that not all image file types are created equal. JPEGs are generally going to be much smaller in file size than PNGs, for example, so it’s important to choose the right file type for the job.
Additionally, when it comes to resizing images, you should always resize them before you upload them to your website. This way, you can avoid having to serve oversized images to your visitors, which can slow down your site.
Finally, I wanted to point out that there are a number of plugins available that can help you automate the process of optimizing your images. WP Smush is a great option that can help you save time and ensure that your images are always properly optimized.
WPBeginner Support says
Thanks for sharing your comment
Administrateur
Rebecca Gelsi says
This is brilliant, thank you. I’m using JPEGmini after reading this article and am so relieved to have this aspect of our site sorted.
Andy says
Thanks for the normal and simple explanation. I made a few mistakes with my photo content on my site, but with the help of your explanations, I figured out exactly what I needed to do. Thank you!
WPBeginner Support says
Glad our guide was helpful
Administrateur
Tania says
So helpful!! Thank you for sharing. Quick question – If I compress my images to an optimal/acceptable KB size directly in Photoshop using the Save for web setting mentioned above, and then upload to WordPress…is there a need to also run Shortpixel or another image compression plugin? Or is that redundant?
Trying to understand if there are added benefits to using a plugin vs Photoshop. Would love to hear your thoughts. Thanks!
WPBeginner Support says
The plugins are an alternative, if you optimize your images before uploading them, you wouldn’t need to use an image optimization plugin
Administrateur
Shiv Raj Bhatt says
Great idea to optimize images for faster loading website. Thanks for the info.
WPBeginner Support says
Glad you like our content
Administrateur
Lauren says
Excellent and thorough! Thank you!
WPBeginner Support says
Glad our guide was helpful
Administrateur
Eddier Naranjo says
The optimization plugins make a copy of the « heavy » image and serve the optimized version. But that increases the storage space on the site.
Is there a way to delete the old version and leave only the optimized image?
WPBeginner Support says
We would recommend checking with the support for the plugin that you are using as they normally have an option to remove the unoptimized version.
Administrateur