Si vous souhaitez offrir une excellente expérience utilisateur à votre visiteur, vous devez vous assurer que votre site Web se charge plus rapidement, afin de ne pas le frustrer. En fait, la vitesse de votre site Web peut faire ou défaire votre activité en ligne. Vous DEVEZ optimiser les images WordPress pour rendre votre site plus rapide - car les images sont généralement la partie la plus lourde de votre contenu,
Walmart a trouvé un Augmentation de 2% de leur taux de conversion chaque fois qu'ils amélioraient la vitesse de 1 seconde. Ceci est un exemple parmi tant d'autres qui indiquent qu'il est essentiel de rendre votre site Web rapide.
Un moyen simple de rendre votre site Web plus rapide consiste à optimiser toutes les images de votre site Web WordPress.
Si vous n'avez pas encore considéré la vitesse de votre site Web WordPress comme un élément essentiel de votre entreprise, vous devrez réfléchir à nouveau et commencer à prendre des mesures pour améliorer la vitesse de votre site Web WordPress.
Recommander la lecture: Comment obtenir un site Web WordPress rapide - un guide complet [25 étapes]
Il existe de nombreuses façons de rendre votre site Web plus rapide. Certains d'entre eux sont énumérés ci-dessous.
- Évitez d'utiliser trop de plugins WordPress
- Utilisez les services WordPress CDN
- Optimiser la diffusion CSS
- Optimiser les images WordPress
Les images qui n'ont pas été optimisées pour le Web sont généralement volumineuses. Ces images prendront plus de temps à charger.
Il est important que vous optimisiez vos images en les rendant aussi petites que possible.
Cependant, la plupart du temps, le processus d'optimisation des images pour WordPress et votre site Web est fastidieux ou entrave la production de contenu.
Dans cet article, nous vous expliquerons différentes manières d'optimiser vos images WordPress et ainsi accélérer le chargement de votre site.
Compressez les images ou enregistrez-les pour le Web
Il va sans dire que la taille de votre image peut influencer le temps de chargement de votre site WordPress. Plus votre navigateur doit charger, plus il mettra de temps à le faire.
Cela est particulièrement vrai sur les connexions Internet mobiles ou plus lentes.
Comme les images haute résolution auront une taille de fichier plus grande, il est toujours préférable de compresser les images avant le téléchargement.
De cette façon, le navigateur devra télécharger less les données devraient donc se charger beaucoup plus rapidement.
Maintenant, vous pourriez avoir une question: qu'est-ce que la compression d'image WordPress et comment peut-elle réduire la taille sans affecter la qualité?
La compression est le processus consistant à réduire considérablement la taille de l'image en supprimant de manière algorithmique les informations d'image qu'un œil humain ne peut pas percevoir. C'est un moyen très efficace d'optimiser les images WordPress.
Bien que la compression d'image soit une méthode infaillible pour réduire la taille de l'image, lorsqu'il s'agit de compresser des fichiers JPEG, le processus perd parfois le contenu réel des images au cours du processus.
C'est le seul inconvénient de cette approche. N'oubliez pas de vérifier attentivement les résultats de la post-compression pour vous assurer que vous êtes satisfait des résultats de la compression.
WP Smush est un plugin WordPress populaire qui vous permet de réduire facilement la taille du fichier image en analysant chaque image que vous téléchargez et en supprimant les informations de données inutiles.
La version gratuite de ce plugin vous permet de compresser des images jusqu'à 1 Mo alors qu'avec la version pro, vous pouvez compresser des images jusqu'à 32 Mo.
Vous pouvez télécharger WP Smush ici.
Veuillez également noter que ce plugin vous permet d'optimiser toutes les images nouvellement téléchargées sur votre site Web WordPress. Si vous souhaitez compresser les images existantes, vous pouvez utiliser le lien Bulk Smush.it sous l'onglet médiathèque pour optimiser les images WordPress existantes.
Nous parlerons plus en détail des plugins d'optimisation dans un instant.
Chargement paresseux : optimisez les temps de chargement des images WordPress
[MISE À JOUR: WordPress 5.4 intègre le chargement paresseux. Tant que vous maintenez WordPress à jour, vous n'avez plus à vous soucier du chargement paresseux.]
Nous savons tous que "une image vaut mille mots".
Mais utiliser trop d'images sur une seule page peut ralentir le chargement de votre site Web.
Un moyen simple d'améliorer votre temps de chargement consiste à supprimer les images inutiles et à ne conserver que ce qui est absolument nécessaire. Cependant, tout le monde ne souhaite pas réduire le nombre d'images utilisées sur une page Web, uniquement pour accélérer le chargement de la page.
Comment résoudre ce problème?
Vous l'avez peut-être déjà remarqué - les sites Web qui utilisent beaucoup d'images sur chaque page résolvent ce problème en chargeant l'image uniquement lorsqu'elle est visible pour l'utilisateur.
Cette tactique réduit non seulement le temps de chargement de la page, mais elle économise également la bande passante du serveur. C'est ce qu'on appelle le chargement paresseux. Parce que l'image est "paresseuse", elle n'apparaît que lorsque c'est nécessaire.
Si vous êtes sur WordPress, il est plus facile de faire en sorte que l'image ne se charge que lorsqu'elle est visible. Tout ce que vous avez à faire est d'installer un plugin de chargement paresseux.
Encore une fois, c'est un excellent moyen d'optimiser les images WordPress pour une vitesse améliorée.
Vous aviez besoin d'un plugin pour cela, mais maintenant il est intégré à WordPress.
Lire la suite: Divi contre Elementor
Utilisez le format d'image correct
Connaître les différences entre chaque format d'image vous permet d'utiliser le bon format sur votre site Web, ce qui vous aide même en matière d'optimisation d'image.
JPEG, PNG et GIF sont les formats d'image les plus populaires.
Quel format est le meilleur pour les images de site Web WordPress optimisées et quand devriez-vous l'utiliser ?
- GIF: Utilisez GIF lorsque votre image est trop petite et utilise un format relativement less nombre de couleurs. Par exemple, GIF est un bon choix pour les cliparts, les puces et les graphiques. D'un autre côté, les images complexes avec des améliorations telles que les ombres portées ne pouvaient pas être affichées correctement à l'aide de GIF.
- JPEG / JPG: Il convient aux images complexes avec de nombreuses variations de couleurs ou s'il contient des images photographiques.
- PNG: Le format PNG est le mieux adapté aux images transparentes.
- WebP: c'est le meilleur format de nos jours, mais la création de ces images nécessite une prise en charge du serveur sur votre site Web
Veuillez noter que ce ne sont que des recommandations générales. Comme toutes les règles, il existe des exceptions, et certaines de ces règles sont censées être enfreintes.
Utiliser efficacement le cache du navigateur
Lorsque vous téléchargez des images sur une page Web, assurez-vous de les télécharger dans un seul répertoire. Le téléchargement de vos images dans un répertoire unique sur une page Web aidera le navigateur à charger facilement ces images en utilisant le cache du navigateur lors de visites répétées.
C'est bien si vous téléchargez des images via le téléchargeur d'images WordPress par défaut. Mais par exemple, si vous créez des pages de destination HTML sur WordPress, il est probable que vous n'utiliserez pas le téléchargeur d'images WordPress par défaut.
Dans ces cas, au lieu de télécharger les images d'une page Web dans différents répertoires, assurez-vous de les télécharger toutes dans un seul répertoire.
Si vous souhaitez en savoir plus sur la mise en cache du navigateur et comment en tirer parti, consultez notre article détaillé ici: Comment tirer parti de la mise en cache du navigateur dans WordPress avec ou sans plug-in [5 façons]
Utiliser la même image plusieurs fois
Une autre façon d'utiliser la mise en cache du navigateur pour réduire la bande passante de l'image consiste à utiliser les mêmes images plusieurs fois sur le site.
Par exemple, lorsque vous utilisez des logos ou des éléments de menu à partir d'une page, assurez-vous d'appeler les mêmes images sur tout le site, afin que les utilisateurs n'aient pas besoin de les télécharger plusieurs fois mais une fois et que les navigateurs puissent afficher les images à partir du navigateur. cache.
Lorsque vous utilisez un arrière-plan texturé, assurez-vous d'utiliser des images plus petites à plusieurs reprises au lieu d'utiliser une seule grande image. Cela peut également aider à réduire le temps de chargement.
Par défaut, lorsque vous téléchargez des images à l'aide du téléchargeur multimédia sur le tableau de bord WordPress, elles vont dans le dossier en fonction du moment où vous les téléchargez. Cela signifie que toutes les images téléchargées dans un mois seront situées dans un seul répertoire.
Par exemple, si vous téléchargez une image en janvier 2021, elle se trouvera dans ce répertoire: wp-content / uploads / 2021/01.
Examinons les avantages du téléchargement via le téléchargeur multimédia, puis nous vous dirons ce que vous devez considérer lorsque vous ne téléchargez pas sur votre outil de téléchargement multimédia pour accélérer votre site Web.
L'outil de téléchargement de médias accélère le chargement de l'image: Le chargement sera plus rapide si les images sont stockées dans le même dossier lors de la navigation sur une page web.
Lorsque les images sont appelées à plusieurs reprises, le navigateur peut facilement les récupérer à partir du cache du navigateur si elles se trouvent dans un seul dossier.
Souvent, cependant, les blogueurs WordPress n'utilisent pas le téléchargeur multimédia par défaut, en particulier lorsqu'ils travaillent sur une page de destination personnalisée. Par souci de facilité, ils téléchargent des images dans un répertoire séparé.
Dans de tels cas, assurez-vous de télécharger toutes les images de cette page dans un seul répertoire au lieu de les télécharger dans plusieurs répertoires. Cette tactique peut améliorer le temps de chargement car la mise en cache des fichiers sera plus facile lors de visites répétées.
Utilisez CSS au lieu d'images
Savez-vous que vous pouvez améliorer le temps de chargement en n'utilisant aucune image du tout?
Par exemple, il est tout à fait possible de générer certaines formes en utilisant de simples CSS au lieu d'images telles que des rectangles arrondis, des dégradés, des ombres portées et des images transparentes.
Cela étant dit, assurez-vous de garder un œil sur la vérification de la compatibilité du navigateur chaque fois que vous remplacez une image par du CSS, car tous les navigateurs ne sont pas en mesure de prendre en charge ces techniques.
5 plugins d'optimisation d'image pour aider à maintenir la vitesse de la page
Nous avons mentionné le plugin d'optimisation d'image Smush plus tôt, mais ce n'est pas le seul que vous pouvez utiliser.
Si vous êtes convaincu que l'optimisation des images est la voie à suivre (et vous devriez l'être), voici 5 plugins WordPress qui offrent :
1. Optimiseur d'image ShortPixel pour WordPress
ShortPixel Image Optimizer pour WordPress est un plugin léger avec toutes les fonctionnalités de base pour vous aider à optimiser les images.
Il compresse les images, les convertit, inclut des processus d'arrière-plan pour optimiser les images et bien plus encore.
Le plugin est gratuit jusqu'à 100 crédits par mois. Ensuite, il en coûte à partir de 3.99 $ par mois pour des crédits supplémentaires. Les forfaits illimités commencent à 8.99 $ par mois.
Ce plugin fait beaucoup de choses correctement. La version gratuite vous permet d'essayer avant d'acheter, mais complique la vie avec les prix une fois que vous commencez à optimiser plus d'images. Sinon c'est une bonne option.
2. Imagify
Imagify est un plugin d'optimisation d'image populaire avec plus de 300,000 XNUMX installations. Il vous permet d'optimiser les images, de convertir des formats, y compris WebP, et de redimensionner à la volée. C'est un plugin très compétent si vous pensez pouvoir utiliser toutes les options.
Il existe une version gratuite avec jusqu'à 20 Mo d'optimisations de fichiers. Les plans Premium coûtent 4.99 $ par mois pour un maximum de 500 Mo et 9.99 $ par mois pour des optimisations illimitées.
Comme Imagify compresse sur ses propres serveurs plutôt que sur le vôtre, cette méthode de tarification fonctionne mieux.
Imagify propose des outils d'optimisation puissants et trois niveaux de compression. De plus, il utilise ses propres serveurs pour le faire. Ces 20 Mo gratuits ne sont pas beaucoup, car une image HD peut facilement dépasser 2 Mo.
3. EWWW Image Optimizer
EWWW Image Optimizer est un plugin gratuit d'optimisation d'image pour WordPress qui fait beaucoup sans rien demander en retour. Il s'installe dans WordPress et utilise à la fois la perte et la perteless compression pour réduire les images sur votre site.
Il peut gérer des images jusqu'à 150 Mo et peut réduire la plupart jusqu'à 50 %. Bien qu'il n'ait pas beaucoup de fonctionnalités plus avancées, les bases sont très certainement couvertes.
EWWW Image Optimizer est une excellente option gratuite qui est assez basique mais qui fait le travail. Quiconque a besoin d'un chargement paresseux ou d'optimisations d'image plus avancées devra payer à partir de 7 $ par mois pour des fonctionnalités premium.
4. Smush
Smush est un puissant plugin d'optimisation d'image gratuit pour WordPress. Il compte plus d'un million d'installations et fait tout ce qu'un plugin de ce type devrait faire. Il optimise, rétrécit, change de format et même charge paresseux les images.
Smush est installer et oublier. Configurez-le, laissez-le lâcher et il optimisera toutes les images existantes et fera automatiquement la même chose pour toutes les nouvelles images. La fonctionnalité Bulk Smush est particulièrement utile pour les sites Web ou les portefeuilles riches en images.
Pour être honnête, Smush est tellement capable que nous avons du mal à justifier le paiement de l'optimisation de l'image. Si vous gérez un site Web plus petit et que vous ne dépendez pas beaucoup des images, il pourrait s'agir du seul plug-in dont vous avez besoin.
5. Optimole
Optimole est plus un plugin d'optimisation d'image sans intervention. Une fois installé, il vérifiera les images existantes, les optimisera et réduira automatiquement les nouvelles images comme le fait Smush.
Optimole propose également des images basées sur le cloud à l'aide d'un serveur Optimole. Cela peut accélérer la livraison des images au détriment de davantage de requêtes HTTP. Il est gratuit jusqu'à 5,000 19.99 visiteurs par mois et XNUMX $ pour des images illimitées.
Optimole est bon dans la mesure où il gère la diffusion d'images sur vos pages Web. Ce n'est pas si bon dans la mesure où il sert des images pour vos pages Web. Vous perdez beaucoup de contrôle en échange d'un gain de performance modeste.
Foire aux questions sur l'optimisation des plugins d'images WordPress
Existe-t-il un plugin de compression d'image WordPress gratuit ?
Oui, il existe plusieurs plugins gratuits de compression d'images WordPress disponibles qui peuvent vous aider à réduire la taille de fichier de vos images sans sacrifier la qualité. Certaines options populaires incluent Smush, ShortPixel et Optimole. Ces plugins sont freemium, vous obtiendrez donc généralement un certain nombre de compressions d'images gratuites, puis plus d'options ou d'utilisation dans le cadre d'un plan premium.
Comment optimiser les images pour le Web dans Photoshop ?
Pour optimiser les images pour le Web dans Photoshop, procédez comme suit. Tout d'abord, redimensionnez l'image : accédez à Image > Taille de l'image et définissez les dimensions à la taille souhaitée pour votre page Web. Assurez-vous de cocher la case "Resample Image" et choisissez "Bicubic Sharper" pour de meilleurs résultats. Enregistrez l'image pour le Web : accédez à Fichier > Exporter > Enregistrer pour le Web (hérité) et choisissez votre format de fichier (JPEG, PNG ou WebP) et les paramètres de compression. Utilisez le panneau de prévisualisation pour comparer différents niveaux de compression et vous assurer que votre image est belle tout en conservant une petite taille de fichier. Utilisez le bon format de fichier : pour les photographies, utilisez le format JPEG et pour les graphiques ou les logos, utilisez le format PNG ou WebP, qui convient généralement à la plupart des types d'images. Cela vous aidera à vous assurer que vos images sont optimisées pour le Web et se chargent rapidement sur votre site Web.
Comment optimiser les images pour WordPress sans plugin ?
Pour optimiser les images pour WordPress sans plugin, vous pouvez suivre ces étapes. Redimensionnez l'image à l'aide d'un éditeur d'images pour redimensionner l'image aux dimensions souhaitées. Vous pouvez utiliser Photoshop, GIMP ou tout autre éditeur d'images avec lequel vous êtes à l'aise. Vous pouvez compresser l'image à l'aide d'un outil de compression d'image. Il existe de nombreux outils en ligne gratuits disponibles, tels que TinyPNG ou Kraken.io, qui peuvent compresser vos images sans perte de qualité.
Optimisation des images WordPress
L'optimisation des images est l'une des modifications les plus importantes que vous puissiez apporter pour améliorer la convivialité et la réactivité de votre site Web.
Comme la vitesse est primordiale, livrer des pages rapidement, avec un délai minimal, améliore l'engagement et aura également un effet d'entraînement sur votre référencement.
Comme c'est si simple à faire, nous pensons que chaque site Web devrait utiliser une forme d'optimisation d'image.
Qu'en penses-tu? Optimisez-vous les images ? Quelle méthode utilisez-vous?
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!
Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.
et beaucoup plus ...