{"id":42400,"date":"2020-10-13T10:50:43","date_gmt":"2020-10-13T08:50:43","guid":{"rendered":"https:\/\/www.codeur.com\/blog\/?p=42400"},"modified":"2025-09-12T16:16:40","modified_gmt":"2025-09-12T14:16:40","slug":"gestion-images-site-internet","status":"publish","type":"post","link":"https:\/\/www.codeur.com\/blog\/gestion-images-site-internet\/","title":{"rendered":"5 astuces pour bien g\u00e9rer les images de votre site"},"content":{"rendered":"\n

Selon Cloudimage, \u00ab Les images repr\u00e9sentent en g\u00e9n\u00e9ral plus de 80% du temps de chargement d’un site \u00bb<\/em>. Or la vitesse de chargement de votre site n\u2019est pas \u00e0 prendre \u00e0 la l\u00e9g\u00e8re. C\u2019est l\u2019une des mesures cl\u00e9s utilis\u00e9es par Google pour le r\u00e9f\u00e9rencement. Ce qui sous-entend qu’un site lent perdra en visibilit\u00e9.
Un temps de chargement trop \u00e9lev\u00e9 peut \u00e9galement cr\u00e9er un sentiment de frustration chez l’utilisateur, se traduisant par une perte d’audience et une r\u00e9duction \u00e9lev\u00e9e du taux de conversion.<\/p>\n\n\n\n

\n

D\u2019apr\u00e8s Amazon, 100 millisecondes de temps de chargement suppl\u00e9mentaires entra\u00eenent une perte de revenu de 1%.<\/p>\n<\/blockquote>\n\n\n\n

\n

0,1s de temps de chargement en moins = 8 % de conversions en plus<\/p>\n<\/blockquote>\n\n\n\n

R\u00e9duire le poids de vos images<\/a> est donc la premi\u00e8re mesure \u00e0 mettre en \u0153uvre pour booster les performances de votre site et am\u00e9liorer votre visibilit\u00e9 et vos conversions sur le web. Cloudimage et Codeur.com vous pr\u00e9sentent les diff\u00e9rentes actions \u00e0 mener pour optimiser vos images pour le web.<\/p>\n\n\n\n

1. Redimensionner vos images pour r\u00e9duire leur poids<\/h2>\n\n\n
\n
\"Cloudimage<\/figure><\/div>\n\n\n


Pour all\u00e9ger le poids de vos images, l\u2019une des premi\u00e8res choses \u00e0 faire est de v\u00e9rifier leur taille et, si n\u00e9cessaire, de les redimensionner. Avez-vous r\u00e9ellement besoin d\u2019une image de 6000px de large pour une banni\u00e8re qui s\u2019affiche au maximum en 1200px ?<\/p>\n\n\n\n

\n

Si vous souhaitez conserver une qualit\u00e9 d\u2019image optimale sur les \u00e9crans retina, votre image doit faire le double de sa taille sur un \u00e9cran classique. Par exemple, si une photo s\u2019affiche en 600px sur votre site, il faudra que l\u2019image mesure 1200px de large pour apparaitre en bonne qualit\u00e9 sur les \u00e9crans retina.<\/p>\n<\/blockquote>\n\n\n\n

Cloudimage permet de redimensionner et rogner vos images en ligne en toute simplicit\u00e9. Ajoutez quelques caract\u00e8res \u00e0 l\u2019url g\u00e9n\u00e9r\u00e9e par l\u2019outil ou utilisez son interface de personnalisation pour obtenir une url personnalis\u00e9e vers votre image au format souhait\u00e9.<\/p>\n\n\n\n

\n

Cloudimage propose des plugins<\/a> pour int\u00e9grer ses fonctionnalit\u00e9s facilement sur votre site WordPress, Shopify, Prestashop ou Magento. Des scripts d\u2019int\u00e9gration JavaScript, React et Angular sont \u00e9galement disponibles pour les d\u00e9veloppeurs web.<\/p>\n<\/blockquote>\n\n\n\n

D\u00e9couvrez Cloudimage<\/a>
 <\/p>\n\n\n\n

2. Compresser les images<\/h2>\n\n\n\n

Apr\u00e8s avoir enregistr\u00e9 vos images au bon format, vous pouvez encore am\u00e9liorer leur vitesse de chargement en les compressant. Pour cela, il est n\u00e9cessaire d\u2019identifier le taux de compression optimal, pour conserver la qualit\u00e9 des images tout en r\u00e9duisant leur poids.
Cloudimage le fait pour vous, gr\u00e2ce \u00e0 ses algorithmes de compression<\/a> par intelligence artificiel. Vos visuels sont ainsi all\u00e9g\u00e9s, sans perte de qualit\u00e9.<\/p>\n\n\n\n

\n

Vous pouvez aussi changer le format de votre fichier image pour un format WebP, Jpeg ou Av1, plus l\u00e9ger, avec Cloudimage.<\/p>\n<\/blockquote>\n\n\n\n

3. Styliser vos images pour vous d\u00e9marquer<\/h2>\n\n\n
\n
\"Cloudimage<\/figure><\/div>\n\n\n


Les visuels utilis\u00e9es sur internet proviennent bien souvent de biblioth\u00e8ques d\u2019images, utilis\u00e9es par tous les professionnels du web. Si vous ne pouvez pas cr\u00e9er de visuels originaux, pensez \u00e0 ajouter \u00ab votre patte \u00bb aux photos et ic\u00f4nes que vous utilisez ! Couleurs, effets artistiques, logo, filigrane\u2026 Les possibilit\u00e9s sont nombreuses pour vous diff\u00e9rencier et \u00eatre reconnaissable au premier coup d\u2019\u0153il.
Toutefois, transformer des images n\u2019est pas \u00e0 la port\u00e9e de tous. Styliser des visuels n\u00e9cessite souvent de poss\u00e9der (et ma\u00eetriser) un logiciel de retouche d\u2019images<\/a> ou de conna\u00eetre le CSS. C\u2019est pourquoi Cloudimage propose de modifier votre image en ligne, en ajoutant des codes simples \u00e0 son url. Vous pouvez ainsi \u00e9diter divers \u00e9l\u00e9ments :<\/p>\n\n\n\n