Par cons\u00e9quent, pour disposer d\u2019un site web performant<\/a> sans n\u00e9gliger le design visuel, il est primordial d\u2019optimiser vos images pour le web<\/a>. C’est pourquoi nous vous pr\u00e9sentons \u00e0 travers cet article, comment optimiser ses photos pour le web !<\/strong><\/p>\n D\u00e8s lors que vous avez cr\u00e9\u00e9 vos images, vous n\u2019\u00eates pas sans savoir qu\u2019il est possible d\u2019enregistrer votre travail dans un grand nombre de formats diff\u00e9rents.<\/p>\n Aussi, sachez d\u00e8s \u00e0 pr\u00e9sent qu\u2019il n\u2019existe pas un format qui permette r\u00e9ellement d\u2019optimiser vos images pour le web, puisqu’ils ont tous des avantages, mais aussi des inconv\u00e9nients. <\/strong>Pour autant, mieux vaut privil\u00e9gier les formats suivants !<\/p>\n Le format le plus utilis\u00e9 est incontestablement le JPEG<\/strong>, puisque c\u2019est lui qui semble offrir le meilleur rapport entre la qualit\u00e9 de l\u2019image et la taille de cette derni\u00e8re. Toutefois, il ne conviendra pas pour toutes vos images puisqu\u2019il ne fonctionne pas pour les images ayant un arri\u00e8re-plan transparent.<\/p>\n Afin d\u2019optimiser pour le web des images en JPEG<\/strong>, il est pertinent de les exporter en mode progressif<\/strong>. Sous Photoshop, ce param\u00e8tre est disponible d\u00e8s lors que vous enregistrez pour le web une cr\u00e9ation graphique.<\/p><\/blockquote>\n Ainsi, lors du chargement instantan\u00e9<\/a> de la page web, ce n\u2019est pas la version \u00ab\u2009d\u00e9finitive\u2009\u00bb de l\u2019image qui est charg\u00e9e, ce qui \u00e9vite tout ralentissement malvenu.<\/p>\n Le format PNG<\/strong> sera principalement adapt\u00e9 pour des images disposant d\u2019un arri\u00e8re-plan transparent ou contenant peu de couleurs. Il ne n\u00e9cessite pas d\u2019ajustement sp\u00e9cifique pour l\u2019export.<\/p>\n \u00c0 lire aussi : Quel format d\u2019image choisir pour un fichier en haute qualit\u00e9 ?<\/a><\/p><\/blockquote>\n Particuli\u00e8rement vrai si vous travaillez \u00e0 partir de photographies brutes<\/a>, les images t\u00e9l\u00e9charg\u00e9es sur votre site seront souvent bien plus grandes qu\u2019il ne le faut. Or, cela signifie qu\u2019elles vont occuper plus d\u2019espace sur votre serveur et qu\u2019elles vont ralentir le chargement de vos pages web.<\/p>\n C\u2019est pourquoi, avant m\u00eame de les t\u00e9l\u00e9charger sur votre site, il est primordial que ces images soient redimensionn\u00e9es. Si vous connaissez la taille d\u00e9sir\u00e9e, il vous suffit de les redimensionner selon celle-ci avec un outil comme Photoshop, Paint ou Photofiltre.<\/strong><\/p>\n Attention : si vous ne savez pas quelle sera la taille d\u2019affichage sur votre site, le bon compromis est de redimensionner votre image en d\u00e9finissant une largeur de 2048 pixels et une r\u00e9solution de 240 DPI.<\/strong><\/p><\/blockquote>\n Le format choisi et le redimensionnement effectu\u00e9, il ne vous reste plus qu\u2019\u00e0 compresser votre image pour qu\u2019elle soit moins lourde. Bien \u00e9videmment, l\u2019id\u00e9e est de r\u00e9duire le \u00ab\u2009poids\u2009\u00bb<\/strong> du fichier sans alt\u00e9rer la qualit\u00e9 de l\u2019image. Ceci est tr\u00e8s simple \u00e0 r\u00e9aliser d\u00e8s lors que vous disposez du bon outil<\/a>.<\/p>\n Si vous avez suivi nos conseils jusque-l\u00e0 et que toutes vos images sont en JPEG ou PNG, l\u2019outil de compression TinyPNG<\/a> fait figure de r\u00e9f\u00e9rence puisqu\u2019il est simple \u00e0 prendre en main, efficace et surtout gratuit.<\/p>\n Apr\u00e8s avoir pris soin d\u2019optimiser vos images pour le web, si celles-ci sont encore trop volumineuses et ralentissent la vitesse de chargement de vos pages, il vous est possible de mettre en \u0153uvre deux techniques qui vont donner l\u2019apparence d\u2019un chargement plus rapide :<\/p>\n \u00c0 lire aussi : Comment convertir vos images en format WebP ?<\/a><\/p><\/blockquote>\n Si votre site web repose sur un CMS, des plug-ins permettent de mettre en pratique ces techniques assez ais\u00e9ment. L\u2019optimisation des images pour le web est une \u00e9tape cl\u00e9 si vous d\u00e9sirez pouvoir compter sur un site Internet performant. Aussi, s\u00e9lectionner le bon format, redimensionner vos images et les compresser doit devenir une habitude.<\/strong><\/p>\n D\u2019ailleurs, pour un site sous WordPress, ces \u00e9tapes peuvent \u00eatre automatis\u00e9es si vous le d\u00e9sirez en utilisant un plug-in comme Kracken.io ou Imagine.<\/p><\/blockquote>\n L\u2019optimisation d\u2019images est une cl\u00e9 de r\u00e9ussite pour la fluidit\u00e9 de votre site web ! Elle consiste \u00e0 r\u00e9duire la taille tout en gardant au maximum la qualit\u00e9 de l\u2019image. Qu\u2019il s\u2019agisse d\u2019un site professionnel, commercial ou autre, l\u2019illustration par image est toujours d\u2019une grande importance pour attirer les visiteurs. Mais alors, pourquoi en r\u00e9duire la taille ?<\/p>\n Il faut savoir qu\u2019une image brute est trop lourde, et elle ralentira l\u2019ouverture de votre page. C\u2019est ce qui fait fuir g\u00e9n\u00e9ralement les internautes, et c\u2019est la raison pour laquelle l\u2019optimisation est d\u2019une importance capitale pour faciliter l’acc\u00e8s \u00e0 votre site.<\/p>\n Autre avantage essentiel : l\u2019optimisation am\u00e9liore nettement votre r\u00e9f\u00e9rencement ! En effet, les fichiers lourds ralentissent l\u2019acc\u00e8s au site comme susvis\u00e9, alors que les moteurs de recherche d\u00e9testent les sites lents. Apr\u00e8s l\u2019optimisation, vous pouvez donc vous placer aux premiers des recherches, et Google pourra \u00e9galement vous indexer plus rapidement pour les recherches d\u2019images.<\/p>\n En plus de tout cela, il y a encore d\u2019autres avantages \u00e0 utiliser des images l\u00e9g\u00e8res. D\u2019abord, les cr\u00e9ations de sauvegardes seront beaucoup plus rapides. Ensuite, les fichiers d\u2019images en petite taille sont plus appr\u00e9ci\u00e9s par les r\u00e9seaux et les navigateurs, car ils utilisent moins de bande passante. Enfin, cela requiert \u00e9videmment moins d\u2019espace de stockage sur votre serveur.<\/p>\n Il est important de faire l\u2019optimisation des images que vous ins\u00e9rez dans vos sites, mais qu\u2019en est-il de la qualit\u00e9 ? L\u2019objectif est de r\u00e9duire le poids sans alt\u00e9rer la qualit\u00e9 de l\u2019image. Pour ce faire, vous devez utiliser les meilleurs outils de compression de photos, quel que soit le format des images \u00e0 compresser.<\/p>\n Il s\u2019agit d\u2019un outil gratuit en ligne qui sert \u00e0 optimiser une image JPEG, PNG, GIF ou SVG. Commencez par s\u00e9lectionner votre image aux formats correspondant \u00e0 ces derniers, et l\u2019outil va l\u2019optimiser en la rendant moins lourde.<\/p>\n Vous pourrez juger le r\u00e9sultat par vous-m\u00eame, car la diff\u00e9rence de l\u2019image originale avec celle compress\u00e9e sera imperceptible \u00e0 l\u2019\u0153il nu, alors que vous avez la possibilit\u00e9 de r\u00e9duire la taille jusqu\u2019\u00e0 90 %.<\/p>\n Compressor<\/a> est \u00e9galement capable d\u2019optimiser un GIF anim\u00e9, mais il existe un outil sp\u00e9cialis\u00e9 pour cette op\u00e9ration.<\/p>\n Vous avez deux options pour r\u00e9duire la taille des GIFs anim\u00e9s. D\u2019abord, le GIF Resize<\/a> sert \u00e0 r\u00e9duire les dimensions et la taille, et ensuite, le GiF Optimizer permet de r\u00e9duire le nombre d\u2019images ou la qualit\u00e9 de chacune d\u2019elles.<\/p>\n L\u2019outil est simple \u00e0 utiliser et il est tr\u00e8s pratique ! La taille maximale du gif \u00e0 r\u00e9duire est de 16 Mo.<\/p>\n Si vous avez besoin d\u2019optimiser plusieurs images d\u2019un seul coup, l\u2019outil id\u00e9al est de le Compresser JPEG<\/a>.<\/p>\n Vous pouvez l\u2019utiliser en ligne gratuitement, et il permet de r\u00e9duire en une seule fois la taille de 20 images. Toutefois, il est \u00e0 pr\u00e9ciser que cet outil est exclusivement compatible aux formats JPG et PNG.<\/p>\n \u00c0 lire aussi : Web design : comment utiliser l\u2019effet Parallax ?<\/a><\/p><\/blockquote>\n Si vous avez besoin d\u2019optimiser toutes les images de votre site, il est possible d\u2019automatiser le processus et de prendre l\u2019ensemble en une seule fois. Cependant, la version gratuite des outils ne suffit pas \u00e0 assurer ce processus, bien que cela d\u00e9pende du volume d\u2019image dans votre site.<\/p>\n Imagify<\/a> vous propose une optimisation gratuite de 25 Mo par mois. Mais juste pour 5 $, vous pouvez optimiser 1 Go d\u2019images en un mois. Cet outil s\u2019int\u00e8gre \u00e0 WordPress et vous aurez acc\u00e8s \u00e0 plusieurs options !<\/p>\n Il y a notamment la r\u00e9duction l\u00e9g\u00e8re qui pr\u00e9serve la qualit\u00e9 des images, la r\u00e9duction agressive qui se base sur la taille, etc.<\/p>\n Photoshop<\/a> est aussi un outil puissant et efficace pour optimiser des images ! Il est en effet capable de r\u00e9duire \u00e0 la taille de vos choix, toutes les images que vous enregistrez. Le processus est simple ! Il ne faut pas cliquer sur Enregistrer ou Enregistrer Sous, mais utilisez l\u2019option Enregistrer pour le web.<\/em><\/p>\n Vous aurez ainsi la possibilit\u00e9 de choisir le type d\u2019image (ex : JPEG, GIF, etc.), et apporter des modifications. Il vous sera notamment possible de param\u00e9trer la qualit\u00e9, les couleurs, etc. L\u2019objectif, et \u00e0 la fois l\u2019avantage de ce type d\u2019outil, est de pouvoir conserver une bonne qualit\u00e9 des images, tout en r\u00e9duisant la taille.<\/p>\n Photoshop vous permet aussi d\u2019acc\u00e9der \u00e0 des param\u00e8tres d\u2019optimisation pr\u00e9d\u00e9finis, qui vous laissera cr\u00e9er un script dans l\u2019objectif de traiter des images par lot. Il vous sera ainsi facile d\u2019optimiser un dossier complet d\u2019images en seulement quelques minutes.<\/p>\n Pour compresser un fichier JPEG ou PNG, vous pouvez \u00e9galement vous servir des outils TinyJPG<\/a> ou TinyPNG<\/a>. Ces derniers sont gratuits en ligne et vous permettent de compresser 20 images \u00e0 la fois, avec un volume de 5 Mb chacune.<\/p>\n Il est \u00e9galement possible de les retrouver en plugin sur Photoshop pour 50 $. Enfin, vous avez la possibilit\u00e9 d\u2019automatiser vos compressions d\u2019images en utilisant l\u2019API TinyJPG. N\u00e9anmoins, le prix d\u00e9pendra des volumes compress\u00e9s dans cette derni\u00e8re option.<\/p>\n En tenant compte de toutes ces astuces, il est clair que l\u2019optimisation des images est le garant de la fluidit\u00e9 ainsi que du bon fonctionnement de votre site web. Cela ne pourra que vous \u00eatre avantageux, car vous gagnerez en visibilit\u00e9 dans les moteurs de recherche, et l\u2019acc\u00e8s \u00e0 votre page sera plus rapide.<\/p>\nLes techniques d\u2019optimisation d\u2019images pour le web<\/h2>\n
1. Bien choisir le format de vos images<\/h3>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/10\/63bb07cef11099e73e62e313_top-image-formats-for-web-seo.png\")
<\/p>\n2. Redimensionner vos images avant de les t\u00e9l\u00e9charger sur votre site<\/h3>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2015\/09\/taille-site-internet-photoshop.png\")
<\/p>\n3. Compresser vos images pour r\u00e9duire leur \u00ab\u2009poids\u2009\u00bb<\/h3>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/format_web_jpg-gif-png-svg.jpg\")
<\/p>\n4. Mettre en \u0153uvre la technique du flou ou le lazy loading<\/h3>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/flou-image-loading-graphiste-e1571405065847.png\")
\n
Pourquoi optimiser vos images pour le Web ?<\/h2>\n
Les meilleurs outils pour optimiser une image<\/h2>\n
1. Compressor<\/h3>\n
![\"compressor.io\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2019\/10\/compressor.io_.png\")
<\/p>\n2. ezGIF<\/h3>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/10\/Capture-decran-2023-12-18-a-08.36.03.png\")
<\/p>\n3. Compresser JPEG<\/h3>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/10\/Capture-decran-2023-12-18-a-08.36.42.png\")
<\/p>\n4. Imagify<\/h3>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/10\/Capture-decran-2023-12-18-a-08.38.06.png\")
<\/p>\n5. Photoshop<\/h3>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/10\/Capture-decran-2023-12-18-a-08.38.48.png\")
<\/p>\n6. TinyJPG ou TinyPNG<\/h3>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/10\/Capture-decran-2023-12-18-a-08.39.54.png\")
<\/p>\n<\/h2>\n
Notre astuce pour optimiser vos images pour le web<\/h2>\n