Comment optimiser vos photographies et images sur votre site web ?
Les images occupent une place essentielle sur un site Internet. Une belle photographie attire immédiatement l’attention, renforce votre image de marque et permet de présenter vos produits ou vos services de manière plus attractive.
Mais une image trop lourde peut également ralentir considérablement votre site. Et aujourd’hui, quelques secondes de chargement supplémentaires peuvent suffire à faire quitter un visiteur.
Pour obtenir un site rapide, esthétique et bien référencé, il est donc indispensable d’optimiser vos images avant de les mettre en ligne.
Voici les principales règles à appliquer.
1. Choisissez des images de qualité
La première étape consiste à sélectionner des images adaptées à votre activité et à votre identité visuelle.
Une photographie de qualité donne immédiatement une impression plus professionnelle. À l’inverse, une image floue, pixelisée ou mal cadrée peut nuire à la crédibilité de votre site.
Vous n’avez pas forcément besoin d’être photographe professionnel. De nombreuses banques d’images proposent aujourd’hui des photographies de qualité pouvant être utilisées sur un site Internet, sous réserve de respecter leurs conditions de licence.
Vous pouvez notamment trouver des ressources intéressantes sur :
Pixabay
Pexels
Unsplash
Pour créer facilement des visuels, des illustrations ou des publications intégrant du texte, des outils comme Canva peuvent également être utilisés.
Attention aux droits d’utilisation
Ne téléchargez pas une image trouvée sur Google et ne l’utilisez pas automatiquement sur votre site.
Une photographie peut être protégée par le droit d’auteur. Vérifiez toujours les conditions d’utilisation et la licence de l’image avant sa publication.
2. Choisissez le bon format d’image
Le choix du format a une influence directe sur le poids du fichier et donc sur la vitesse de chargement de votre site.
JPEG / JPG
Le JPEG est particulièrement adapté aux photographies.
Il permet d’obtenir un fichier relativement léger tout en conservant une bonne qualité d’image.
Il est donc parfaitement adapté pour :
les photographies ;
les photos de produits ;
les paysages ;
les portraits ;
les images comportant de nombreuses couleurs.
PNG
Le PNG est intéressant pour les images nécessitant davantage de précision.
Il convient notamment aux :
logos ;
illustrations ;
pictogrammes ;
captures d’écran ;
images contenant du texte ;
images nécessitant un arrière-plan transparent.
Cependant, un PNG peut être beaucoup plus lourd qu’un JPEG lorsqu’il est utilisé pour une photographie.
WebP et AVIF
Aujourd’hui, les formats modernes comme WebP et AVIF permettent généralement d’obtenir des fichiers beaucoup plus légers tout en conservant une excellente qualité visuelle.
Ils sont particulièrement intéressants pour les sites Internet modernes et peuvent contribuer à améliorer les performances des pages.
3. Redimensionnez vos images avant de les envoyer sur votre site
Une erreur très fréquente consiste à envoyer directement sur WordPress une photographie provenant d’un appareil photo ou d’un smartphone.
Une photo peut facilement faire plusieurs milliers de pixels de largeur et peser plusieurs mégaoctets.
Or, votre site n’a généralement pas besoin d’une image de 6000 pixels de large pour afficher une photographie dans une zone de 1000 pixels.
Pourquoi redimensionner une image ?
Plus une image possède de pixels, plus son fichier peut être volumineux.
Une photographie de 6000 × 4000 pixels utilisée dans une zone de 800 × 500 pixels oblige inutilement le navigateur à télécharger beaucoup plus de données.
Avant de publier votre image, adaptez donc ses dimensions à son utilisation.
Par exemple :
petite image ou vignette : quelques centaines de pixels ;
image dans un article : environ 1000 à 1600 pixels de largeur selon le design ;
grande image : généralement 1600 à 2000 pixels peuvent suffire ;
image plein écran : adaptez la taille au besoin réel du site.
Il n’est pas nécessaire d’envoyer systématiquement des images gigantesques.
4. Réduisez le poids de vos fichiers
La résolution n’est pas le seul élément à prendre en compte.
Une image de grande dimension peut être correctement redimensionnée tout en restant trop lourde.
L’étape suivante consiste donc à compresser votre fichier.
L’objectif est simple :
obtenir la meilleure qualité visuelle possible avec le fichier le plus léger possible.
Pour cela, vous pouvez utiliser différents outils de compression d’images comme TinyPNG ou TinyJPG.
Ces services permettent de réduire considérablement le poids de nombreuses images sans différence visible importante à l’écran.
Quel poids pour une image ?
Il n’existe pas une taille unique valable pour toutes les situations.
Cependant, pour un site Internet, essayez de conserver vos images aussi légères que possible.
À titre indicatif :
petite image : idéalement moins de 100 à 200 Ko ;
image classique : quelques centaines de Ko ;
grande image : essayez de rester sous environ 500 Ko lorsque cela est possible ;
image très grande ou plein écran : évitez de dépasser 1 Mo sans réelle nécessité.
Plus vos pages contiennent d’images, plus cette optimisation devient importante.
5. Conservez les proportions de vos photographies
Lorsque vous redimensionnez une image, veillez à conserver son ratio d’origine.
Une photographie de 1200 × 800 pixels ne doit pas être transformée arbitrairement en 1200 × 500 pixels.
Elle serait déformée et donnerait un résultat peu professionnel.
Utilisez toujours l’option permettant de conserver les proportions lors du redimensionnement.
6. Pensez également au référencement naturel
Optimiser une image ne consiste pas uniquement à réduire son poids.
Les images peuvent également participer au référencement naturel de votre site.
Avant de télécharger une photographie sur WordPress, évitez les noms de fichiers du type :
IMG_4587.jpg
Préférez un nom descriptif :
creation-site-internet-toulon.jpg
Le nom du fichier doit décrire simplement ce que représente l’image.
Utilisez également l’attribut ALT
L’attribut ALT, ou texte alternatif, permet de décrire une image.
Il est particulièrement important pour l’accessibilité et peut également aider les moteurs de recherche à comprendre le contenu de votre image.
Par exemple :
Mauvais exemple :
image.jpg
Meilleur exemple :
creation-site-internet-toulon.jpg
Et comme texte alternatif :
Création d’un site Internet professionnel à Toulon
Attention cependant à ne pas remplir les textes ALT de mots-clés artificiels. Ils doivent avant tout décrire correctement l’image.
7. Optimisez vos images pour les smartphones
Une grande partie des visiteurs consulte aujourd’hui les sites Internet depuis un smartphone.
Une image parfaitement adaptée à un ordinateur peut donc devenir problématique sur un écran mobile si son fichier est trop lourd.
Un site rapide sur mobile offre une meilleure expérience utilisateur et limite les abandons.
Il est donc important de :
redimensionner correctement les images ;
compresser les fichiers ;
utiliser des formats modernes ;
éviter les images inutilement gigantesques ;
vérifier le rendu sur smartphone.
8. Utilisez le chargement différé des images
Lorsque votre page contient beaucoup de photographies, il n’est pas forcément nécessaire de charger toutes les images immédiatement.
Le lazy loading, ou chargement différé, permet de charger certaines images uniquement lorsque le visiteur approche de leur emplacement sur la page.
Cela permet de réduire la quantité de données chargées au moment de l’ouverture de la page.
Sur WordPress, cette fonctionnalité peut être prise en charge automatiquement ou améliorée grâce à certains plugins d’optimisation.
9. N’oubliez pas les images déjà présentes sur votre site
Optimiser uniquement vos nouvelles images ne suffit pas toujours.
Si votre site existe depuis plusieurs années, votre médiathèque peut contenir des centaines d’images lourdes ou mal dimensionnées.
Une bonne optimisation consiste donc également à vérifier :
les anciennes photographies ;
les images inutilisées ;
les doublons ;
les fichiers trop volumineux ;
les anciennes images qui ne sont plus utilisées.
Cela permet de maintenir votre site propre et performant dans le temps.
Les 5 règles essentielles à retenir
Pour résumer, avant de publier une image sur votre site Internet :
1. Choisissez une image de qualité.
Une belle image améliore immédiatement l’apparence de votre site.
2. Redimensionnez-la.
Ne téléchargez pas une photographie de plusieurs milliers de pixels si votre site n’en nécessite que quelques centaines.
3. Compressez-la.
Réduisez le poids du fichier sans dégrader visiblement la qualité.
4. Choisissez le bon format.
JPEG, PNG, WebP ou AVIF selon le type d’image et les besoins de votre site.
5. Pensez au référencement et à l’accessibilité.
Utilisez un nom de fichier descriptif et renseignez correctement le texte alternatif.
Un site rapide commence par des images bien optimisées
Les photographies et illustrations sont indispensables pour rendre un site Internet attractif. Mais elles doivent être utilisées intelligemment.
Une image trop lourde peut ralentir vos pages, augmenter la consommation de données et dégrader l’expérience des visiteurs.
À l’inverse, des images correctement redimensionnées, compressées et adaptées au Web permettent de conserver une excellente qualité visuelle tout en améliorant les performances du site.
Chez CREATPHYS-WEB, nous intégrons l’optimisation des images dans notre approche de création et de maintenance de sites Internet afin de vous aider à obtenir un site professionnel, rapide et agréable à consulter.