Il est évident que les photos font partie intégrante de nos vies. Par conséquent, nous pouvons difficilement imaginer un site Web sans images. Les images attirent le regard des visiteurs et aident à organiser le contenu du site. Les images rendent une page intéressante, riche en informations et améliorent l’expérience utilisateur.
Les images surdimensionnées ont un effet négatif sur les performances d’un site Web et les images doivent être mises à l’échelle en fonction du thème actif. Ce sont des éléments importants sur un site Web et ils méritent d’être présentés de la meilleure façon possible. Il est très important de servir des images à l’échelle sur un site WordPress.
Les tailles des images mises à l’échelle s’ajustent à la bonne taille en fonction de celles définies en HTML et CSS. Pourtant, peu de webmasters prêtent attention à ce détail de conception important. Prenons l’exemple d’une image de 500 x 500 pixels pour une vignette de 50 x 50. Le navigateur Web doit télécharger l’image et la réduire afin qu’elle puisse être affichée au visiteur. De toute évidence, cela est inefficace et ralentira le site Web.
La différence de résolution n’est pas visible et donc le poids que les grandes images apportent avec elles passe souvent inaperçu. La plupart des gens ne savent même pas que cette résolution excessive cause des problèmes et que le problème n’est pas résolu. Ils laissent le problème au navigateur.
Pourquoi servir des images à l’échelle sur un site WordPress
La principale raison de diffuser des images à l’échelle est que les images haute résolution complètes ralentissent un site Web et augmentent les temps de chargement. Une page lente conduit à une mauvaise expérience utilisateur et au lieu de rester et de revenir, ils partiront et resteront à l’écart. Les statistiques de Kissmetrics montrent que les pages qui mettent plus de trois secondes à se charger auront un taux de rebond plus élevé.
Avec les tailles d’image optimisées sur un site web, les temps de chargement seront plus courts. Les gens sont plus susceptibles de rester plus longtemps sur le site Web et de revenir plus tard. Cela améliore le référencement et le classement du site Web augmentera.
Les grandes images causent différents problèmes
- Cela augmente le stress sur les performances du navigateur. Le navigateur devra effectuer des requêtes serveur supplémentaires. Il ne peut pas afficher l’image rapidement, mais il faudra du temps et des ressources pour redimensionner l’image. Les sites Web avec des images lourdes prennent plus de temps à charger.
- Si de grandes images haute résolution sont affichées en petit sur un site Web, elles font perdre du temps et des données à télécharger. C’est le cas, par exemple, lorsqu’un selfie d’un téléphone portable est utilisé à l’état brut pour un minuscule Gravatar.
Comment mettre à l’échelle des images sur des sites Web WordPress
Manuellement
Pour commencer par le début, analysez les images sur le site Web à l’aide d’un outil comme GTMetrix. GTMetrix est un outil d’analyse des performances, conçu par GT.net. Cette société est célèbre pour la surveillance et l’optimisation de la vitesse, et Pingdom. Une fois que GTMetrics a analysé le site Web, il génère un rapport. Cela montre quels problèmes ont été trouvés et quelles améliorations il recommande.
Lors de l’examen du rapport, portez une attention particulière à l’ onglet Structure. Dans cet onglet, cliquez sur Images correctement dimensionnées. Il affichera une liste d’images qui ne sont pas correctement dimensionnées.
WordPress ne réduit pas automatiquement les images lorsque cela est possible, mais les ajoute au site sans traitement. Pour résoudre ce problème, il existe deux options.
Même si l’utilisation de plugins n’est pas la voie souhaitée, il existe d’autres options. La première façon de redimensionner les images consiste à ajuster manuellement la taille de chacune à l’aide d’un éditeur de photos, comme Photoshop. Il peut sembler que cette méthode est inefficace mais en réalité, elle ne l’est pas.
Dans Photoshop, il existe d’autres options que le réglage de la hauteur et de la largeur de l’image. Une autre chose à vérifier ici est la résolution de l’image. La plupart du temps, pour les applications web, 72 PPI suffisent pour une bonne expérience de visionnage.
La seconde consiste à utiliser un plugin pour redimensionner les images. Cette option est simple et rapide. WordPress a sa propre fonctionnalité pour ce faire, srcset. Cet outil peut convertir des graphiques, tels que des images, en fichiers réactifs. Les images réactives sont automatiquement ajustées aux différents appareils et tailles d’écran. Vous trouverez ci-dessous quelques autres plugins qui font un excellent travail pour réduire la taille des images.
Optimole
Un excellent outil pour servir des images à l’échelle est Optimole. Il s’agit d’un plugin WordPress capable de redimensionner les images pour différents appareils. Il redimensionne automatiquement à la taille optimale pour une image, en fonction des différents types d’appareils. Les résultats sont des images à l’échelle de haute qualité.
Voici quelques-unes des caractéristiques qui font d’Optimole un choix intéressant :
- Les images traitées sont plus petites mais conservent leur qualité.
- Il est complètement automatisé. Il ne s’agit que de charger les images.
- Optimole supporte tous les formats d’images.
- Il prend en charge différents types d’images, y compris Retina et WebP
- Il prend en charge les bibliothèques d’images cloud.
- Optimole fournit gratuitement des images CDN mondiales.
- Il n’est pas nécessaire de deviner ou d’estimer la taille souhaitée. Optimole utilise les spécifications de l’appareil du visiteur.
- Il existe un support complet pour les créateurs de sites Web, comme Elementor.
La fonction de traitement d’image automatisé est un avantage considérable de cette option de plug-in. Il n’est pas nécessaire de passer par une longue liste de paramètres ; Optimole le fait tout seul.
Sous Média > Optimole, le plugin affiche l’ état des services, ainsi que l’ utilisation et l’ optimisation réalisée.
La section Options se trouve sous l’ onglet Paramètres . Ici, il y a deux fonctionnalités qui méritent une mention spéciale :
- Activer le remplacement d’image. Assurez-vous que cette option est activée pour profiter de la fonctionnalité avancée d’optimisation d’image.
- Mise à l’échelle des images et chargement paresseux. C’est l’option qui permet la mise à l’échelle des images en fonction de la taille de l’écran du visiteur. Le chargement différé affiche ces images.
Optimisation d’image Smush
Smush Image Optimization, Compression et Lazy Load est le nom complet de cette liste de plugins. Lorsque vous réduisez la taille des images, assurez-vous que la qualité de l’image est préservée.
Pour utiliser WP Smush, il est nécessaire de l’installer et de l’activer d’abord. Ensuite, l’icône Smush apparaîtra dans le tableau de bord WordPress. Dans le tableau de bord apparaissent les statistiques que Smush accumule et l’état actuel des différentes fonctionnalités.
À côté de Total Savings Data, une icône apparaîtra, signalant toutes les images de la médiathèque qui nécessitent un traitement. S’il y a des images qui doivent être traitées, la chose la plus simple à faire est d’aller dans le module Bulk Smush. Cela réduira la taille de toutes les images qu’il marque.
Pour traiter les images individuellement, accédez à la médiathèque et cliquez sur Revérifier les images. Cela produit une mise à jour en temps réel des images qui doivent être traitées.
Smush a des fonctionnalités qui permettent le filtrage des images par statut Smush et la mise à l’échelle sélective des images.
Le plugin Smush ne traite pas les vidéos et les fichiers GIF. Les fichiers image qui ne sont pas mis à l’échelle indiquent que la puissance de Smush n’est pas pleinement utilisée.
Optimiseur d’image EWWW
L’ EWWW Image Optimizer est également un plugin WordPress qui optimise la taille et le format des images. Il fonctionne avec les nouveaux téléchargements et les images existantes. Il comporte une option qui analyse toutes les images d’un site Web et les optimise.
Pour commencer à l’utiliser, téléchargez -le et installez -le et activez -le depuis la zone d’administration du site WordPress. Dans l’environnement du tableau de bord, cliquez sur Paramètres, puis sur Optimiseur d’image EWWW. Sous Paramètres de base, diverses options sont disponibles, comme la suppression des métadonnées des images. Le niveau d’optimisation pour GIF, JPG et PNG doit être défini sur Pixel Perfect. Seule la version payante permet également l’optimisation des fichiers PDF.
L’ onglet Redimensionner contient une option de détection de redimensionnement. Dans Redimensionner les images, définissez la hauteur et la largeur maximales autorisées des images sur le site Web. Activez également les options Redimensionner les autres images et Redimensionner les images existantes . N’oubliez pas de sauvegarder les modifications.
CourtPixel
La recommandation finale pour servir des images à l’échelle est le plugin ShortPixel. C’est la bonne option pour ceux qui ont besoin de diffuser des images à l’échelle mais qui ont un budget limité. La version gratuite propose 100 mises à l’échelle d’images par mois.
ShortPixel est simple et facile à utiliser. Il traite automatiquement les images aux dimensions que l’utilisateur spécifie lors du téléchargement sur le site Web. Outre l’option automatique, il existe également une option pour traiter les images manuellement.
Le plugin réduit la taille de l’image sans perte ou avec perte de résolution. Il est capable de traiter les images GIF, JPEG et PNG et peut même optimiser les fichiers PDF.
Réflexions finales sur la manière de diffuser des images à l’échelle
De toute évidence, il existe de nombreuses façons de diffuser des images à l’échelle sur un site WordPress, et cela ne doit pas être difficile ou coûteux. Le problème est lorsque le site Web est en ligne depuis longtemps et qu’il y a beaucoup d’images à traiter.
La mise à l’échelle des images est une compétence importante pour quiconque crée ou gère un site Web. Cela aide à rendre les sites Web lents plus rapides et offre d’autres avantages en termes de performances. La bonne spécification d’image améliorera la vitesse de n’importe quel site Web.
Si vous avez aimé lire cet article sur la façon de servir des images à l’échelle dans WordPress, vous devriez consulter celui-ci sur la façon de rendre un numéro de téléphone cliquable dans WordPress.
Nous avons également écrit sur quelques sujets connexes comme comment intégrer une vidéo Facebook dans WordPress, comment supprimer des thèmes WordPress, comment analyser la base de données WordPress à la recherche de logiciels malveillants, comment télécharger un fichier HTML dans WordPress, comment faire un nettoyage de base de données WordPress, comment trouver et remplacer une URL dans une base de données WordPress et comment masquer l’auteur dans WordPress