\u00c9tant donn\u00e9 que la moiti\u00e9 des donn\u00e9es que les visiteurs doivent t\u00e9l\u00e9charger lorsqu’ils consultent votre site proviennent d’images, toute optimisation que vous effectuez ici peut avoir un impact consid\u00e9rable sur les performances de votre site.<\/p>\n
En fait, si vos images ne sont pas du tout optimis\u00e9es, vous pourrez r\u00e9duire le poids de votre image de 50 \u00e0 80 % en<\/strong> suivant ce guide.<\/p>\n En mati\u00e8re d’optimisation d’image, il existe trois techniques simples.<\/p>\n Le premier et le plus efficace moyen d’optimiser vos images est de les compresser.<\/p>\n Cliquez ici pour essayer ShortPixel par vous-m\u00eame<\/a><\/p>\n La compression d’image est le principal moyen d’optimiser les graphiques. Si vous avez suivi le guide d’optimisation de WP Rocket,<\/a> vous serez familiaris\u00e9 avec le concept de minification qui y est introduit. La compression d’image n’est pas si diff\u00e9rente.<\/p>\n Lors de la compression d’une image, un algorithme r\u00e9\u00e9crit essentiellement le code dans l’image pour r\u00e9duire la taille totale du fichier. Il existe deux principaux types de compression.<\/p>\n La compression sans perte optimise vos images tout en conservant exactement le m\u00eame affichage pixel pour pixel. Il n’y a aucune raison d’ignorer la compression sans perte car elle r\u00e9duit la taille du fichier tout en ne faisant litt\u00e9ralement aucune diff\u00e9rence visuelle.<\/p>\n Cela dit, je vous recommande d’utiliser la compression avec perte \u00e0 la place.<\/p>\n La compression avec perte offre une optimisation bien sup\u00e9rieure mais au prix d’une l\u00e9g\u00e8re d\u00e9gradation de la qualit\u00e9. Cependant, cette perte de qualit\u00e9 est si mineure qu’elle est souvent imperceptible.<\/p>\n La compression sans perte est importante pour l’imagerie m\u00e9dicale et les dessins techniques, mais pour les images affich\u00e9es sur un site Web, la compression avec perte r\u00e9pond facilement \u00e0 nos normes de qualit\u00e9.<\/p>\n Je vais recommander le plugin ShortPixel<\/a> pour l’optimisation d’image que j’utilise ici chez Compete Themes. Il comprend une compression avec et sans perte ainsi qu’une compression \u00ab\u00a0brillante\u00a0\u00bb qui est en quelque sorte une option interm\u00e9diaire.<\/p>\n ShortPixel compressera automatiquement les images au fur et \u00e0 mesure que vous les t\u00e9l\u00e9chargez sur votre site, ce qui peut \u00eatre tr\u00e8s pratique. Je suis plut\u00f4t impatient lors de l’\u00e9dition, je pr\u00e9f\u00e8re donc d\u00e9sactiver cette option et optimiser les images du menu M\u00e9dia plus tard.<\/p>\n La compression automatique lors du t\u00e9l\u00e9chargement peut \u00eatre d\u00e9sactiv\u00e9e<\/p>\n Vous pouvez utiliser un outil comme TinyPNG<\/a> pour compresser vos images, mais je trouve qu’il est plus facile de t\u00e9l\u00e9charger les images sur mon site comme toujours, puis de les optimiser avec ShortPixel.<\/p>\n C’est l\u00e0 que ShortPixel<\/a> excelle vraiment.<\/p>\n Si vous utilisez un outil comme TinyPNG pour optimiser vos images, vous n’optimiserez que les nouvelles images que vous t\u00e9l\u00e9chargez sur votre site. Qu’en est-il de toutes les images que vous avez d\u00e9j\u00e0 t\u00e9l\u00e9charg\u00e9es\u00a0? Comment les optimiser ?<\/p>\n ShortPixel a une option d’optimisation en masse impressionnante qui parcourra toutes vos images \u00e0 la fois.<\/p>\n L’image ci-dessus est assez explicite, \u00e0 l’exception de la partie \u00ab\u00a0petites vignettes\u00a0\u00bb. Pourquoi y a-t-il 4 fois plus de miniatures plus petites et quelles sont-elles ?<\/p>\n Vous ne le savez peut-\u00eatre pas, mais chaque fois que vous t\u00e9l\u00e9chargez une image sur WordPress, elle cr\u00e9e automatiquement trois tailles suppl\u00e9mentaires (si l’image est suffisamment grande)\u00a0:<\/p>\n Vous pouvez afficher et modifier les dimensions de ces tailles d’image dans le menu Param\u00e8tres > M\u00e9dia.<\/p>\n Voici le probl\u00e8me\u2026<\/p>\n Disons que vous compressez une image, puis que vous la t\u00e9l\u00e9chargez sur votre site. La version "compl\u00e8te" est enti\u00e8rement optimis\u00e9e, mais les trois tailles suppl\u00e9mentaires ne le sont pas. Si vous ins\u00e9rez la version \u00ab\u00a0moyenne\u00a0\u00bb de l’image dans un article, cette image n’est pas compress\u00e9e. ShortPixel optimisera les images originales que vous avez t\u00e9l\u00e9charg\u00e9es et toutes les tailles suppl\u00e9mentaires cr\u00e9\u00e9es par WordPress.<\/p>\n Vous obtiendrez une am\u00e9lioration impressionnante des performances de la compression seule, mais il existe deux fa\u00e7ons plus simples d’optimiser davantage les images sur votre site.<\/p>\n Disons que vous t\u00e9l\u00e9chargez une image de 5 000 x 2 500 pixels sur votre site. Vous l’ins\u00e9rez ensuite dans un post o\u00f9 il s’affiche en 800 x 400px. Malgr\u00e9 le fait que l’image ne fait que 800px de large sur l’\u00e9cran du visiteur, il leur reste \u00e0 t\u00e9l\u00e9charger la version 5000px.<\/p>\n Inutile de dire qu’une image de 5 000 pixels de large est massive et prendra probablement plus de temps \u00e0 charger que tous les autres fichiers de votre site combin\u00e9s.<\/p>\n Il y a deux fa\u00e7ons d’\u00e9viter cela.<\/p>\n En r\u00e8gle g\u00e9n\u00e9rale, ne t\u00e9l\u00e9chargez pas d’images de plus de 2 000 pixels de large. Que vous utilisiez Windows ou Mac, vous disposez d’un \u00e9diteur d’images simple que vous pouvez utiliser pour redimensionner rapidement les images trop volumineuses avant de les t\u00e9l\u00e9charger.<\/p>\n Un autre conseil est d’\u00e9viter la version "compl\u00e8te" lors de l’insertion d’une image surdimensionn\u00e9e dans un article. Choisissez plut\u00f4t la taille "Grande" qui est de 1024px par d\u00e9faut.<\/p>\n Il est facile de redimensionner les images avant de les t\u00e9l\u00e9charger, mais qu’en est-il de celles d\u00e9j\u00e0 pr\u00e9sentes sur votre site\u00a0?<\/p>\n ShortPixel<\/a> a un param\u00e8tre qui vous permet de d\u00e9finir une largeur et une hauteur maximales pour vos images.<\/p>\n Vous pouvez d\u00e9finir cette option pour que les images ne soient jamais recadr\u00e9es lorsqu’elles sont redimensionn\u00e9es. Une fois que vous avez activ\u00e9 ce param\u00e8tre, vous pouvez ex\u00e9cuter l’optimiseur de masse et ShortPixel redimensionnera toutes les images trop grandes qu’il rencontrera. Il redimensionnera \u00e9galement les nouvelles images au fur et \u00e0 mesure que vous les t\u00e9l\u00e9chargerez.<\/p>\n Si vous avez utilis\u00e9 beaucoup d’images volumineuses, cela pourrait \u00eatre l’\u00e9tape la plus b\u00e9n\u00e9fique pour votre site. Il n’y a qu’une autre technique d’optimisation et c’est la plus simple \u00e0 ce jour.<\/p>\n Les fichiers image peuvent contenir des donn\u00e9es suppl\u00e9mentaires non affich\u00e9es dans l’image elle-m\u00eame appel\u00e9es donn\u00e9es EXIF. L’EXIF peut \u00eatre tr\u00e8s utile et comprend des informations telles que le fabricant de l’appareil photo, la date et l’heure \u00e0 laquelle la photo a \u00e9t\u00e9 prise, et m\u00eame les coordonn\u00e9es GPS.<\/p>\n Vous n’avez pas besoin de ces donn\u00e9es jointes aux photos que vous publiez sur votre site. Sans oublier qu’il est probablement pr\u00e9f\u00e9rable pour des raisons de confidentialit\u00e9 que vos photos n’incluent pas les coordonn\u00e9es GPS !<\/p>\n Encore une fois, ShortPixel<\/a> g\u00e8re cela facilement pour nous. Il existe un param\u00e8tre activ\u00e9 par d\u00e9faut qui supprime les donn\u00e9es EXIF \u200b\u200bde toutes les images pendant le processus d’optimisation.<\/p>\n En moyenne, cela entra\u00eene une r\u00e9duction suppl\u00e9mentaire de 8,5% de la taille du fichier.<\/p>\n Si vous n’avez pas du tout optimis\u00e9 vos images, ce sera une journ\u00e9e formidable pour votre site\u00a0!<\/p>\n Tout le monde parle d’h\u00e9bergement et d’optimisation de fichiers, mais pour une raison quelconque, l’optimisation des images est souvent n\u00e9glig\u00e9e. C’est fou parce qu’il y a des gains \u00e9normes \u00e0 faire.<\/p>\n J’utilise ShortPixel pour g\u00e9rer toutes les pratiques d’optimisation d’image d\u00e9crites dans ce guide et je le recommande \u00e0 tous ceux qui se soucient des performances de leur site WordPress.<\/p>\n Cliquez ici pour essayer ShortPixel maintenant<\/a><\/p>\n Maintenant que vous \u00eates sur la voie d’une m\u00e9diath\u00e8que super optimis\u00e9e, vous voudrez peut-\u00eatre envisager un h\u00f4te premium comme WP Engine<\/a> pour charger ces images encore plus rapidement. Et vous devriez jeter un \u0153il au guide WP Rocket, en<\/a> particulier la partie sur le chargement paresseux<\/a> pour une optimisation suppl\u00e9mentaire de l’image.<\/p>\nTrois fa\u00e7ons d’optimiser les images<\/h2>\n
1 Compressez vos images<\/h3>\n
Compression sans perte<\/h4>\n
La compression avec perte<\/h4>\n
Comment compresser vos images<\/h4>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3240ca972.png\")
<\/a><\/p>\n![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32428aed6.png\")
<\/a><\/p>\nQu’en est-il des images que vous avez d\u00e9j\u00e0 t\u00e9l\u00e9charg\u00e9es\u00a0?<\/h4>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32446974a.png\")
<\/a><\/p>\nOptimiser toutes les tailles d’images<\/h4>\n
\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32466e04b.png\")
<\/a><\/p>\n2 Redimensionnez vos images<\/h3>\n
T\u00e9l\u00e9charger des images plus petites<\/h4>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3248c6bb4.png\")
<\/a><\/p>\nRedimensionner les images dans votre m\u00e9diath\u00e8que<\/h4>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324ac8d3b.png\")
<\/a><\/p>\n3 Supprimer les donn\u00e9es EXIF<\/h3>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324cc2416.png\")
<\/a><\/p>\nDes images plus petites = des sites plus rapides<\/h2>\n