La présence d’images sur un site internet est primordiale pour capter l’attention et séduire les internautes. Mais optimiser les images pour le web est tout aussi important pour vos utilisateurs, cela jouera notamment sur le temps de chargement de vos pages.
En janvier 2022, les images représentent en moyenne 23% du poids total d’une page internet (selon httparchive.org), après les vidéos, les poids lourds du web.
Pourquoi optimiser les images pour le web ?
Le but dans l’optimisation des fichiers photos est de réduire leur poids afin qu’ils deviennent le plus léger possible sans altérer la qualité de l’image. Les principaux avantages vont être :
- L’amélioration de la vitesse de chargement de votre site.
- L’amélioration de l’expérience utilisateur. Les images sont importantes aux yeux des internautes, si vos images chargent lentement, vos visiteurs s’avéreront moins susceptibles de s’engager avec votre contenu.
- L’amélioration du référencement de vos pages. En effet, un chargement rapide, particulièrement sur mobile, offrira un meilleur référencement. Les balises textuelles de vos images doivent également être complété, ce sont ces éléments qui sont lus par les algorithmes de SEO.
- La réduction de l’espace de stockage et de l’utilisation de la bande passante. En réduisant le poids de vos images, votre site utilisera moins de bande passante, vous économiserez sur les coûts d’hébergement et de diffusion du contenu.
Mais comment optimiser les images pour le web ?
Les 3 piliers de l’optimisation des images : le format, le poids, le référencement.
Choisir le bon format d’images
Sur le web, on peut retrouver généralement 5 types d’images : PNG, JPG, WEBP, GIF et SVG. Les quatre premiers formats sont des formats matriciels (bitmap), les images sont composées de pixels que l’on voit habituellement sous forme de carré lorsque l’on souhaite zoomer à l’intérieur.
Le format SVG est quant à un lui un format vectoriel, composé de lignes de segments liés par des formules mathématiques. Chaque élément a une place bien définie, permettant de les modifier à volonté sans les altérer.
JPG : Ce type d’images est idéal pour les photographies et les images détaillées et peut facilement être compressé pour réduire considérablement sa taille.
PNG : Ce format est adapté pour les images avec de la transparence ou semi-transparence. Mais il est à éviter pour les images aux grands formats.
WEBP : Le format WebP est idéal pour une utilisation sur le web, offrant un excellent compromis entre qualité visuelle et taille de fichier. WebP prend en charge la transparence, ce qui en fait un choix polyvalent pour une variété de contenus. Il est particulièrement recommandé pour améliorer les performances des sites web grâce à des temps de chargement plus rapides, tout en conservant une qualité d’image élevée.
GIF : Les GIF sont utilisés pour les images animées, mais supporte également les images fixes. Les animations sont créées à partir d’une suite plus ou moins rapide d’images. Ce format ne gère pas au mieux la transparence, mais la supporte. Il faudra par ailleurs éviter les photos haute définition ou avec plus de 256 couleurs.
SVG : adapté aux éléments graphiques comme les logos, les icônes, etc. Ils sont particulièrement légers, s’adapte à n’importe quelle taille sans pixellisation. Mais ce format ne convient pas aux images détaillées.
Afin de convertir vos images, vous pouvez utiliser des outils comme Photoshop, ou bien optimiser les images pour le web en ligne sur des sites dédiées comme online-convert.com.
Réduire le poids de vos images
Une fois que vous avez trouvé le format adapté pour votre image, nous allons nous intéresser au poids de celle-ci.
La résolution
Le premier élément à vérifier sur vos images sera la résolution. Un écran possède généralement une résolution de 72 dpi. Il sera donc inutile d’avoir des images ayant une meilleure résolution, votre écran ne sera pas capable de mieux les afficher, mais elles seront plus lourdes et donc plus longues à afficher, car elles possèdent une concentration d’information plus importante.
La taille de l’image
Les différentes tailles d’images jouent également un rôle important pour son poids. Penser à redimensionner vos différents fichiers à la grandeur utilisée sur votre site. Vous n’avez pas besoin d’une image de 3000 px si elle ne sera que de 100 px sur votre site. Pour optimiser la taille d’une image, il est préférable de les redimensionner à l’aide de logiciel ou outils en ligne avant de les uploader sur votre site, plutôt que de laisser le code CSS les redimensionner.
La compression
Vous pouvez aussi compresser vos images afin de réduire leur taille. La compression va permettre de réduire la redondance des données d’une image et de ce fait réduire l’espace qu’elle occupe. Cette compression peut être avec perte ou sans perte de données correspondant à une perte de qualité ou non de l’image.
Penser au référencement
Optimiser les images pour le web, c’est aussi penser au référencement naturel de votre site. Les images et le code englobant ces images sont analysés par les moteurs de recherche, un bon référencement naturel de vos images servira de levier SEO puissant.
La pertinence de l’image
Tout d’abord, vos images doivent être en lien avec le contenu, cela parait logique, mais la cohérence au sein de votre page a son importance pour le référencement naturel.
Renommez vos images
Ensuite, pensez à renommer vos images. En effet, il faut éviter de laisser vos images au nom généré automatiquement (comme IMG76009), optez plutôt pour un nom optimisé SEO, pour augmenter vos chances d’apparaitre lors des recherches des internautes.
Le texte alternatif
Un des éléments les plus importants pour le référencement naturel, en parallèle du nom de l’image, sera l’attribut alt ou le texte alternatif de votre image. Il est important de compléter cette balise, avec notamment les mots clés de votre page. Cela permettra au moteur de recherche d’avoir plus de précision sur le contenu de l’image, de rendre votre site accessible à tous et spécifiquement au mal-voyant, et permet de s’assurer qu’un contenu sera écrit à la place de l’image si elle ne parvient pas à charger.
Une légende
Vous pouvez également prendre l’habitude de toujours accompagné vos images d’une légende. Elle n’a pas d’effet direct sur le référencement naturel, mais influencera l’expérience utilisateur de vos visiteurs.
Bien sûr, la taille et le poids de l’image vont jouer un rôle sur le référencement de la page avec l’analyse des performances du site (les Webperf) faite par les moteurs de recherche.
Comme évoqué précédemment, il vous faudra maitriser la taille et le poids de vos images pour ne pas alourdir votre site et réduire ses performances. (On vous en dit plus si vous souhaitez optimiser la vitesse de votre site sur WordPress).
Les outils pour la compression des images sur le web
Il existe de nombreuses méthodes pour optimiser les images. Généralement, ces optimisations peuvent avoir lieu à deux moments : avant de les ajouter à votre site, une fois qu’elles sont sur le serveur.
Préparer son image pour le web
La première étape de l’optimisation consiste à travailler les images avant de les mettre sur votre site internet.
Vous pouvez faire cela avec des outils en ligne comme :
- Online Convert
- I love img
- Compress or die
- Free Convert
C’est également possible d’optimiser une image pour le web avec Photoshop en utilisant la fonctionnalité Fichier > Exportation > Enregistrer pour le web (hérité). Vous pourrez alors choisir le format de votre image, sa taille et son taux de compression.
Pour exporter votre image au format WebP, vous devrez utiliser Fichier > Enregistrer sous, puis choisir le format WepP dans la liste proposée. Vous pourrez ensuite choisir le niveau de compression de l’image.
Une fois sur le serveur
Dans un deuxième temps, l’optimisation se fait sur le serveur avec des logiciels de compression. Il en existe plusieurs directement intégrés à votre CMS comme ici avec WordPress.
On peut citer le plugin WordPress : Imagify qui vous permettra d’optimiser vos images directement depuis votre site. Le plugin Shortpixel Image Optimiser est également une alternative pour vous aider dans le traitement de vos images web.
L’optimisation du chargement d’un site passe par de nombreux éléments. On t’aide à atteindre la vitesse maximale ?
TUTO : Optimiser ses images en WebP avec Photoshop
Nous recommandons l’utilisation du format WebP pour les images sur un site internet. Photoshop est un outil très pratique qui vous permettra d’optimiser vos images avec un contrôle total sur les paramètres essentiels.
- Redimensionnez votre image avec en résolution 72 dpi pour le web (Image > Taille de l’image)
- Enregistrez votre image (Fichier > Enregistrer sous)
- Choisissez le format WebP
- Sélectionnez l’emplacement où vous souhaitez sauvegarder votre image optimisée
- Réglez le niveau de compression. Nous recommandons de choisir un niveau entre 25 et 50 pour réduire la taille du fichier, mais garder un minimum de qualité pour l’image.
TUTO : Optimiser ses images en ligne
Il est aussi possible d’optimiser ses images directement sur le web, sans passer par Photoshop ou équivalent. Nous en avons sélectionné deux pour vous.
Free Convert
L’outil Free Convert permet de convertir des fichiers jusqu’à 1GB, en appliquant une compression (disponible pour certains formats). C’est exactement ce que nous avons besoin pour notre optimisation d’image pour le web.
Comment utiliser l’outil ?
- Choisissez le fichier à optimiser
- Choisissez le format
- Allez dans les réglages de compression
- Modifiez la taille
- Modifiez le niveau de compression (nous recommandons entre 25 et 50)
- Appliquez les réglages de compression
- Convertissez
- Téléchargez votre fichier optimisé
Compress Or Die
L’outil Compress Or Die est similaire au précédent. Il vous permettra de convertir vos images en les optimisant depuis votre navigateur.
La marche à suivre :
- Importez votre fichier
- Choisissez le format
- Modifiez la taille si besoin
- Appliquez un niveau de compression (nous recommandons entre 25 et 50)
- Générer le fichier
- Télécharger le fichier
Adoptez cet automatisme d’optimisation !
L’importance des images sur un site est évident. Elles permettent de donner du dynamisme et du réalisme au digital. En fonction de votre positionnement, les images et photos peuvent devenir un point d’attachement et d’identification de votre cible ! Pas besoin d’être un photographe professionnel ou de dépenser une fortune en image de stock, vous pouvez également trouver votre bonheur avec des images libres de droit et gratuites.
Une fois que vos techniques d’optimisation de vos images sont fonctionnelles, votre site sera aimé des navigateurs, des moteurs de recherches et des réseaux et bien évidemment de vos visiteurs qui profiteront de votre site avec un temps de chargement réduit et un meilleur classement sur les moteurs de recherche.
Cette tâche peut vous paraitre chronophage au départ, mais elle devient rapidement un jeu d’enfant. C’est un automatisme à avoir !
Pour vos projets de site internet, faites appel à des professionnels. Contactez Webalia.
