{"id":227249,"date":"2022-09-14T11:14:00","date_gmt":"2022-09-14T08:14:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=227249"},"modified":"2022-11-08T19:35:53","modified_gmt":"2022-11-08T16:35:53","slug":"comment-servir-des-images-mises-a-lechelle-dans-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-servir-des-images-mises-a-lechelle-dans-wordpress\/","title":{"rendered":"Comment servir des images mises \u00e0 l’\u00e9chelle dans WordPress"},"content":{"rendered":"\n

Il est \u00e9vident que les photos font partie int\u00e9grante de nos vies. Par cons\u00e9quent, nous pouvons difficilement imaginer un site Web sans images. Les images attirent<\/strong> le regard des visiteurs et aident \u00e0 organiser le contenu du site. Les images rendent une page int\u00e9ressante, riche en informations et am\u00e9liorent l’exp\u00e9rience utilisateur.<\/p>\n

Les images surdimensionn\u00e9es ont un effet n\u00e9gatif sur les performances d’un site Web<\/strong> et les images doivent \u00eatre mises \u00e0 l’\u00e9chelle en fonction du th\u00e8me actif. Ce sont des \u00e9l\u00e9ments importants sur un site Web et ils m\u00e9ritent d’\u00eatre pr\u00e9sent\u00e9s de la meilleure fa\u00e7on possible. Il est tr\u00e8s important de servir des images \u00e0 l’\u00e9chelle sur un site WordPress.<\/p>\n

Les tailles des images mises \u00e0 l’\u00e9chelle s’ajustent \u00e0 la bonne taille en fonction de celles d\u00e9finies en HTML et CSS. Pourtant, peu de webmasters pr\u00eatent attention \u00e0 ce d\u00e9tail 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\u00e9l\u00e9charger l’image et la r\u00e9duire afin qu’elle puisse \u00eatre affich\u00e9e au visiteur. De toute \u00e9vidence, cela est inefficace et ralentira<\/strong> le site Web.<\/p>\n

La diff\u00e9rence de r\u00e9solution n’est pas visible et donc le poids que les grandes images apportent avec elles passe souvent inaper\u00e7u. La plupart des gens ne savent m\u00eame pas que cette r\u00e9solution excessive cause des probl\u00e8mes et que le probl\u00e8me n’est pas r\u00e9solu. Ils laissent le probl\u00e8me au navigateur.<\/p>\n

Pourquoi servir des images \u00e0 l’\u00e9chelle sur un site WordPress<\/h2>\n

\"Comment<\/a><\/p>\n

La principale raison de diffuser des images \u00e0 l’\u00e9chelle est que les images haute r\u00e9solution compl\u00e8tes ralentissent<\/strong> un site Web et augmentent les temps de chargement<\/strong>. Une page lente conduit \u00e0 une mauvaise exp\u00e9rience utilisateur<\/strong> et au lieu de rester et de revenir, ils partiront et resteront \u00e0 l’\u00e9cart. Les statistiques de Kissmetrics montrent que les pages qui mettent plus de trois secondes \u00e0 se charger auront un taux de rebond plus \u00e9lev\u00e9<\/strong>.<\/p>\n

Avec les tailles d’image optimis\u00e9es sur un site web, les temps de chargement seront plus courts<\/strong>. Les gens sont plus susceptibles de rester plus longtemps<\/strong> sur le site Web et de revenir<\/strong> plus tard. Cela am\u00e9liore le r\u00e9f\u00e9rencement<\/strong> et le classement du site Web augmentera<\/strong>.<\/p>\n

Les grandes images causent diff\u00e9rents probl\u00e8mes<\/h3>\n
    \n
  1. Cela augmente le stress sur les performances du navigateur<\/strong>. Le navigateur devra effectuer des requ\u00eates serveur suppl\u00e9mentaires. 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 \u00e0 charger.<\/li>\n
  2. Si de grandes images haute r\u00e9solution sont affich\u00e9es en petit sur un site Web, elles font perdre du temps et des donn\u00e9es \u00e0 t\u00e9l\u00e9charger<\/strong>. C’est le cas, par exemple, lorsqu’un selfie d’un t\u00e9l\u00e9phone portable est utilis\u00e9 \u00e0 l’\u00e9tat brut pour un minuscule Gravatar.<\/li>\n<\/ol>\n

    Comment mettre \u00e0 l’\u00e9chelle des images sur des sites Web WordPress<\/h2>\n

    Manuellement<\/h3>\n

    \"Comment<\/a><\/p>\n

    Pour commencer par le d\u00e9but, analysez les images<\/strong> sur le site Web \u00e0 l’aide d’un outil comme GTMetrix. GTMetrix est un outil d’analyse des performances, con\u00e7u par GT.net. Cette soci\u00e9t\u00e9 est c\u00e9l\u00e8bre pour la surveillance et l’optimisation de la vitesse, et Pingdom. Une fois que GTMetrics a analys\u00e9 le site Web, il g\u00e9n\u00e8re un rapport. Cela montre quels probl\u00e8mes<\/strong> ont \u00e9t\u00e9 trouv\u00e9s et quelles am\u00e9liorations<\/strong> il recommande.<\/p>\n

    Lors de l’examen du rapport, portez une attention particuli\u00e8re \u00e0 l’ onglet Structure<\/strong>. Dans cet onglet, cliquez sur Images correctement dimensionn\u00e9es. Il affichera une liste d’images qui ne sont pas correctement dimensionn\u00e9es.<\/p>\n

    WordPress ne r\u00e9duit pas automatiquement les images lorsque cela est possible, mais les ajoute au site sans traitement. Pour r\u00e9soudre ce probl\u00e8me, il existe deux options.<\/p>\n

    M\u00eame si l’utilisation de plugins n’est pas la voie souhait\u00e9e, il existe d’autres options. La premi\u00e8re fa\u00e7on de redimensionner les images consiste \u00e0 ajuster manuellement la taille de chacune \u00e0 l’aide d’un \u00e9diteur de photos, comme Photoshop<\/strong>. Il peut sembler que cette m\u00e9thode est inefficace mais en r\u00e9alit\u00e9, elle ne l’est pas.<\/p>\n

    \"Comment<\/a><\/p>\n

    Dans Photoshop, il existe d’autres options que le r\u00e9glage de la hauteur et de la largeur<\/strong> de l’image. Une autre chose \u00e0 v\u00e9rifier ici est la r\u00e9solution<\/strong> de l’image. La plupart du temps, pour les applications web, 72 PPI suffisent pour une bonne exp\u00e9rience de visionnage.<\/p>\n

    La seconde consiste \u00e0 utiliser un plugin<\/strong> pour redimensionner les images. Cette option est simple et rapide. WordPress a sa propre fonctionnalit\u00e9 pour ce faire, srcset<\/strong>. Cet outil peut convertir des graphiques, tels que des images, en fichiers r\u00e9actifs<\/strong>. Les images r\u00e9actives sont automatiquement ajust\u00e9es aux diff\u00e9rents appareils et tailles d’\u00e9cran. Vous trouverez ci-dessous quelques autres plugins qui font un excellent travail pour r\u00e9duire la taille des images.<\/p>\n

    Optimole<\/h3>\n

    \"Comment<\/a><\/p>\n

    Un excellent outil pour servir des images \u00e0 l’\u00e9chelle est Optimole<\/strong>. Il s’agit d’un plugin WordPress capable de redimensionner les images pour diff\u00e9rents appareils. Il redimensionne automatiquement \u00e0 la taille optimale pour une image, en fonction des diff\u00e9rents types d’appareils. Les r\u00e9sultats sont des images \u00e0 l’\u00e9chelle de haute qualit\u00e9<\/strong>.<\/p>\n

    Voici quelques-unes des caract\u00e9ristiques qui font d’Optimole un choix int\u00e9ressant :<\/p>\n