![\"Les](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2\/pingdom-image-slow-site.jpg\")
<\/p>\nL’optimisation de la vitesse d’un site peut \u00eatre une pratique complexe et technique, mais vous serez heureux d’apprendre que la solution \u00e0 l’un des plus gros probl\u00e8mes est en fait accessible \u00e0 tous.<\/p>\n
Les images sont l\u2019une des plus grosses charges sur le temps de chargement d\u2019une page. M\u00eame avec la mise en cache et un CDN, une image non optimis\u00e9e ralentira le temps de chargement d\u2019une page. En tant que propri\u00e9taire de site, les images sont sous votre contr\u00f4le. Si vous comprenez et mettez en place l\u2019optimisation images, vous pourrez constater un impact cons\u00e9quent sur la vitesse de votre site.<\/p>\n
Sur la base des sites que je visite lorsque je travaille au support des cliens de WP Rocket, j\u2019ai constat\u00e9 que les images repr\u00e9sentent en moyenne 30% du temps de chargement d\u2019une page. C\u2019est souvent le plus grand facteur sur l\u2019ensemble du temps de chargement. Dans les cas extr\u00eames, cela peut approcher 60% du temps de chargement.<\/p>\n
Voici un exemple de l\u2019impact que des images non optimis\u00e9es peuvent avoir sur votre site\u00a0:<\/p>\n
<\/p>\n
Le temps de chargement est de 12 secondes et le poids de la page de 8 Mo. Sur ces 8 Mo, les images comptent pour 6,7 Mo.<\/p>\n
Le nombre de requ\u00eates http est souvent cit\u00e9 comme d\u00e9terminant dans le temps de chargement, et m\u00eame si c\u2019est un \u00e9l\u00e9ment important, au bout du compte c\u2019est le poids de la page qui est le vrai indicateur de vitesse ou de lenteur. Vous pouvez avoir un petit nombre de requ\u00eates http, mais si ces requ\u00eates appellent des images \u00e9normes, vous aurez toujours le m\u00eame probl\u00e8me sur les bras.<\/p>\n
R\u00e9duire le poids d\u2019une page en r\u00e9duisant le poids des images est une technique simple et efficace pour am\u00e9liorer le temps de chargement.<\/p>\n
Les dimensions de l\u2019image, c’est-\u00e0-dire l\u2019espace que prend une image sur l\u2019\u00e9cran, sont mesur\u00e9es en pixels, et m\u00eame si les dimensions n\u2019influent pas \u00e0 100% sur le poids d\u2019un fichier, les deux sont li\u00e9s. Plus les dimensions de votre image sont grandes, plus le poids du fichier est \u00e9lev\u00e9.<\/p>\n
Le poids d\u2019un fichier est mesur\u00e9 en kilo-octet (Ko) et m\u00e9ga-octet (Mo)
\n1 Mo = 1000 Ko<\/p>\n
Pour vous donner un point de r\u00e9f\u00e9rence, la colonne principale de ce blog fait 796 pixels de large.<\/p>\n
Si vous prenez une photo avec votre smartphone, en fonction des r\u00e9glages, cette photo pourrait \u00eatre aux alentours de 2500 pixels de large (parfois m\u00eame plus) et un poids de fichier de 3 Mo (ou 3000 Ko). Si je prenais une photo avec mon t\u00e9l\u00e9phone et que je la t\u00e9l\u00e9chargeais sur ce blog sans aucune modification, je mettrais une photo trois fois plus grosse que la taille n\u00e9cessaire pour ce blog \u2013 une perte totale de ressources et un poids suppl\u00e9mentaire sur le chargement de la page. \u2028M\u00eame si prendre des photos rapidement avec votre t\u00e9l\u00e9phone et les mettre sur votre blog semble simple et pratique, cela pose un vrai probl\u00e8me si vous voulez un site rapide, car cela ajoute une tonne de poids inutile.<\/p>\n
Avant de mettre une photo en ligne vous devez faire deux choses : la redimensionner et la compresser.<\/p>\n
Tout d\u2019abord, vous devez redimensionner vos images \u00e0 la taille ad\u00e9quate pour votre site. Pour les images de blog, trouvez la largeur de la zone de contenu, et ne mettez jamais une image plus large que cette dimension. Si l\u2019image va \u00eatre utilis\u00e9e dans un slider, faites en sorte de conna\u00eetre les dimensions du slider en premier.<\/p>\n
Si vous savez comment utiliser les outils d\u00e9veloppeurs de Chrome ou Firefox, vous pouvez les utiliser. Mais si cela vous semble trop compliqu\u00e9, il existe des outils plus simples. \u2028Si vous \u00eates sur Mac, il y a un outil de capture d’\u00e9cran d\u00e9j\u00e0 install\u00e9.<\/p>\n
Quand vous tracez le contour d\u2019une zone de l\u2019\u00e9cran, Capture vous dira combien de pixels elle fait. Cet article l\u2019explique de mani\u00e8re plus d\u00e9taill\u00e9e.<\/p>\n
Vous pouvez aussi\u00a0\u00a0installer l\u2019addon Page Ruler pour Chrome<\/a><\/p>\n Une fois que vous avez d\u00e9termin\u00e9 les dimensions auxquelles vos images doivent \u00eatre, vous pouvez utiliser n\u2019importe lequel des outils suivant pour redimensionner vos images en cons\u00e9quence\u00a0:<\/p>\n Peu importe celui que vous utilisez, il vous suffit de trouver la fonction redimensionner. Vous pourrez entrer la largeur d\u00e9sir\u00e9e en pixels, et l\u2019application redimensionnera l\u2019image proportionnellement en ajustant la hauteur de l\u2019image automatiquement.<\/p>\n Les images sur le web doivent \u00eatre sauvegard\u00e9es en .jpg, .png ou \u00e9ventuellement .gif.<\/p>\n Le format JPEG<\/strong>\u00a0est \u00e0 utiliser pour les photos et les images en g\u00e9n\u00e9ral lorsque vous n\u2019avez pas besoin de transparence. Vous pouvez les compresser facilement et obtenir un fichier plus l\u00e9ger qui convient au format web.<\/p>\n Le format PNG<\/strong>\u00a0g\u00e9n\u00e9rera souvent un fichier plus lourd, et ne doit donc \u00eatre utilis\u00e9 que dans le cas ou la transparence de l\u2019image est requise.<\/p>\n Le format GIF<\/strong>\u00a0est moins fr\u00e9quemment utilis\u00e9. Il a un \u00e9ventail de couleurs limit\u00e9, et ne peut donc \u00eatre utilis\u00e9 que pour les images tr\u00e8s simples, mais peut produire des fichiers l\u00e9gers.<\/p>\n Maintenant que nous avons trait\u00e9 le probl\u00e8me de la dimension des images, attaquons nous au poids de l\u2019image. Le but est de compresser l\u2019image pour la rendre la plus l\u00e9g\u00e8re et rapide \u00e0 charger possible. Le but est de r\u00e9duire le poids du fichier<\/strong>. Il n\u2019y a pas de chiffre magique auquel tous les poids d\u2019images devraient \u00eatre, puisque cela d\u00e9pend de la mani\u00e8re dont les images vont \u00eatre utilis\u00e9es. Les images utilis\u00e9es dans une banni\u00e8re ou un slider seront plus grosses, mais si vous en avez plusieurs, vous devriez essayer que chacune p\u00e8se 100Ko ou moins.<\/p>\n Les petites images qui vont \u00eatre utilis\u00e9es pour les miniatures, logos etc. seront bien plus l\u00e9g\u00e8res. Par exemple, le logo en haut de ce blog p\u00e8se 3,8Ko.<\/p>\n Avec la compression, il peut y avoir une l\u00e9g\u00e8re perte de qualit\u00e9. Il faut donc trouver un compromis entre la qualit\u00e9 et le poids du fichier. Gardez toujours \u00e0 l\u2019esprit que plus le fichier sera l\u00e9ger, plus le temps de chargement sera rapide.<\/p>\n Il est pr\u00e9f\u00e9rable de redimensionner et compresser vos images avant de les mettre en ligne sur WordPress.<\/p>\n Toutefois, si votre site est d\u00e9j\u00e0 en ligne, vous devrez faire avec les images qui sont d\u00e9j\u00e0 en place.<\/p>\n Pour les images importantes comme les logos, les banni\u00e8res d’en-t\u00eate et toutes celles qui chargent sur chaque page de votre site, il sera pr\u00e9f\u00e9rable d\u2019en faire de nouvelles version comme d\u00e9crit plus haut, puis d\u2019installer l’extension Enable Media Replace<\/a>. Cela vous permettra de remplacer simplement les images dans votre biblioth\u00e8que m\u00e9dia avec les nouvelles versions optimis\u00e9es, sans casser aucun lien.<\/p>\n Pour les autres images qui se trouvent dans votre biblioth\u00e8que m\u00e9dia, o\u00f9 il serait irr\u00e9alisable de toutes les remplacer individuellement, il y a quelques extensions tr\u00e8s pratiques qui peuvent vous aider.<\/p>\n Imagify<\/strong><\/a><\/p>\n Notre extension pour WordPress permet d’exploiter toute la puissance de notre outil en ligne directement depuis votre administration. Vous avez acc\u00e8s \u00e0 plusieurs niveaux d’optimisation, ainsi qu’\u00e0 la possibilit\u00e9 de redimensionner \u00e0 la vol\u00e9e les images envoy\u00e9es pour les limiter \u00e0 une hauteur et largeur d\u00e9finies.<\/p>\n EWWW Image Optimizer\u2028<\/strong><\/a><\/p>\n Cette extension peut parcourir votre biblioth\u00e8que m\u00e9dia et tout compresser en vrac.<\/p>\n Si vous faites des sites pour des clients, ou avez un site avec plusieurs utilisateurs et que vous ne pouvez pas garantir que tout le monde utilise les meilleurs m\u00e9thodes pour l\u2019optimisation des images, les extensions ci-dessous peuvent vous aider \u00e0 att\u00e9nuer cela.<\/p>\n Imsanity\u2028<\/strong><\/a><\/p>\n Vous pouvez d\u00e9cider des r\u00e9glages pour faire en sorte que si quelqu\u2019un t\u00e9l\u00e9charge une \u00e9norme image, l’extension la r\u00e9duira automatiquement \u00e0 la taille maximum que vous aurez choisie. Plus d\u2019images de 4000 pixels qui encombrent la biblioth\u00e8que m\u00e9dia\u00a0!<\/p>\nApplications de redimensionnement<\/h3>\n
\n
Outils de redimensionnement en ligne<\/h3>\n
\n
\nPixlr.com (existe aussi en version app)
\nFotor.com (existe aussi en version app)<\/li>\n<\/ul>\nLes formats d\u2019images<\/h3>\n
Compresser les images<\/h2>\n
Applications<\/h3>\n
\n
Outils en ligne<\/h3>\n
\n
Extensions WordPress<\/h3>\n