Découvre les bonnes pratiques et les outils pour l’optimisation des images de ton site

/

Découvre les bonnes pratiques et les outils pour l’optimisation des images de ton site

Cet article prend environ 12 minutes à lire en intégralité.

T Tes images plombent la vitesse de ton site : tes visiteurs perdent patience et Google ne te calcule pas.

Dois-tu revenir à la préhistoire du web et abandonner l’idée d’illustrer tes pages et tes articles ?

Je te rassure. Transformer tes photos en poids plume se réalise facilement avec des outils gratuits et les bons réflexes.

Quelques secondes suffisent pour renforcer ton référencement naturel en enrichissant tes visuels.

Je te montre également 5 sources fiables pour trouver de belles illustrations et éviter de recevoir une lettre d’avocat qui te réclame des milliers d’euros.

Je te propose un test rapide.

Tu rentres ta page d’accueil dans PageSpeed Insights et tu découvres le temps de chargement que tu vas gagner en suivant ce tuto.

Cela représente 12 secondes de chargement sur mobiles pour ce site qui est loin d’être une exception.

gain de temps pour le chargement avec l'optimisation des images

L’optimisation des images est un terme un peu fourre-tout. Que se cache-t-il derrière ?

Qu’est-ce que l’optimisation d’image ?

Qu'est-ce que l’optimisation d’image ?

Ce concept réunit trois notions :

  • Réduire au maximum le poids de l’image sans affecter sa qualité
  • Assurer son classement dans la catégorie images des moteurs de recherche
  • Favoriser la performance de l’article en référencement naturel

Nous abordons toutes ces thématiques dans l’article. Tu verras que les frontières sont loin d’être étanches.

Les bénéfices sont nombreux sans que cela soit complexe à mettre en œuvre.

Les 3 principaux avantages à l’optimisation de tes visuels

Les avantages à l'optimisation des visuels d'un site internet
  1. Tes utilisateurs bénéficient d’une navigation fluide en particulier sur mobiles.
  2. La réduction de l’espace de stockage sur les serveurs minimise la dépense énergétique.
  3. Un meilleur référencement naturel : Google dispose de toutes les informations et évalue ton site sur son temps de chargement sur mobiles.

Je te propose de voir le format à privilégier en fonction du type d’images que tu souhaites intégrer.

Quels formats d’images choisir pour ton site ? JPG, PNG, GIF ou WebP ?

Quels formats d'images choisir pour ton site ? JPG, PNG, GIF ou WEBP ?

Cette synthèse te permet d’y voir plus clair.

JPG


Photos



Transparence
Animations

PNG


Transparence
Dessins
Icônes


Animations

GIF


Animations



Poids
Qualité du rendu

WebP


Poids
Transparence
Animations


Anciens navigateurs

Les incidences des formats d’images sur le poids

Tu te retrouves avec une réponse de Normand pour le choix du format idéal. Notre tâche sera simplifiée le jour où le WebP sera universel (en attendant un nouveau format).

J’ai laissé les visuels au format d’origine pour les tests et effectué une compression identique.

Pour une photographie

meilleur format de fichier pour une photographie

JPG

722 Ko

PNG

2760 Ko

GIF

1595 Ko

WebP

463 Ko

Pour une illustration

meilleur format de fichier pour les illustrations

Ce dessin comporte de nombreux aplats en transparence et un nombre de couleurs limité.

JPG

44 Ko

PNG

187 Ko

GIF

38 Ko

WebP

134 Ko

Le GIF fait 39,3 Ko mais le résultat est désastreux et nous perdons la transparence pour le JPG.

Pour un logo

meilleur format fichier pour un logo

Ce logo comporte trois couleurs.

JPG

69 Ko

PNG

41 Ko

GIF

42 Ko

WebP

67 Ko

SVG

28 Ko

Le format JPEG pour les photographies détaillées

Le JPEG est à privilégier pour les photos comportant beaucoup de détails. Ce n’est pas un hasard si les appareils photos et les smartphones utilisent tous ce format. Il est accepté partout.

Le format PNG pour les illustrations et les besoins de transparence

Le format PNG est la version moderne des GIF. Il gère la transparence. Il est parfait pour les visuels avec des aplats de couleurs comme les dessins et les logos. Il est très bien supporté.

Le format GIF pour des visuels animés

C’est le doyen qui conserve son intérêt pour les animations.

Le format WebP en support pour tous les usages

Le WebP est un format récent. Il est très flexible et s’adapte à tous les usages y compris les animations. Il est toujours bien classé au niveau du poids des fichiers mais est loin d’être accepté partout. WordPress gère les WebP mais il faut obligatoirement un autre format. Je te montre dans un prochain paragraphe comment une extension va gérer cela pour toi.

Le format SVG pour les logos et les icônes

Le format SVG est un format vectoriel. Il peut être adapté à n’importe quelle taille sans perte de qualité. Il est utilisé principalement pour les logos et les icônes. Il n’est pas accepté partout car son code peut renfermer des virus.

Tu souhaites changer le format d’un de tes visuels ?

Le plus simple est de sauvegarder directement tes créations au format idéal. Ce n’est pas possible si tu utilises des images d’autres personnes.

Photopea pour enregistrer au format souhaité

Photopea est un logiciel en ligne gratuit sans inscription de type Photoshop. Tu charges ton visuel.

interface photopea

Tu sauvegardes au format souhaité dans Fichier > Exporter (Webp est dans Plus).

changer format sous photopea

Un convertisseur en ligne pour modifier tes formats

Online convert gère de multiples supports : audio, e-books, vidéo… dont un choix très étendu dans la catégorie image.

Tu sélectionnes Convertisseur d’image dans Tous les outils.

convertisseur d'image

Tu choisis ton format de sortie.

choix du format d'image de destination

Tu charges tes fichiers (maximum 5) et tu affines la compression et la largeur ou la hauteur si tu le souhaites. Tu cliques sur Démarrer.

dépôt de fichier dans le convertisseur d'image en ligne
choix de la qualité puis de la largeur et la hauteur

Tu récupères tes fichiers convertis.

télécharger les fichiers convertis

Les limites de l’outil en gratuit :

  • 20 conversions par jour
  • 5 conversions simultanées
  • Taille maximum du fichier : 100 Mo

Tu utilises Bulk Resize, que je te présente dans la suite de l’article, pour les conversions en grands nombres sans aucune limitation en JPEG, PNG et WebP.

Le choix du format idéal n’est que le début de l’optimisation.

Comment optimiser le poids des images pour accélérer ton site ?

Comment optimiser le poids de tes images pour accélérer ton site ?

Par ordre d’efficacité :

  1. Ajuste la dimension de tes images
  2. Compresse tes visuels
  3. Sélectionne le bon format

L’ordre logique quand tu appliques ces 3 actions : Format, Dimension et Compression.

Nous avons déjà vu la question du choix du format. Nous passons donc au dimensionnement des images et à leur compression.

Quel est le poids idéal des fichiers image ?

Le plus léger sera évidemment le mieux. Pour te donner un ordre de grandeur, tu essaies de ne pas dépasser les 50 à 100 Ko pour tes visuels d’illustration et 250 Ko pour ton visuel principal.

Ajuste la dimension des images de ton site internet

La taille des images doit être proportionnelle à la taille affichée.

Cela ne sert à rien de dépasser une largeur de 1920 px qui correspond au Full HD pour tes images en pleine largeur. Il existe des écrans plus volumineux mais il y a plus de chances que ton visiteur consulte ton site sur un mobile que dans une salle de cinéma.

Pour les autres visuels, tu regardes les dimensions définies pour ton site (ou dans ton thème sur WordPress).

Une solution alternative sera de réaliser un clic droit au-dessus d’une image sur Chrome et de sélectionner Inspecter. Tu retrouves la taille de l’image actuelle dans Width et la taille affichée à l’écran dans le pop-up qui apparaît au survol du code.

inspection dela taille d'une image dans chrome

La photo prise par ton téléphone est parfaite pour une affiche.

Tu ajustes la largeur de toutes les images utilisées sur tes pages et tes articles en fonction de leurs emplacements.

Bulk Resize Photos est la solution parfaite pour redimensionner à la chaîne. Cela m’a pris moins d’une minute pour plus de 56 photographies en une seule fois.

Tu charges tes photos.

bulk resize

Tu sélectionnes largueur. Tu complètes ta largeur en sortie, ton format d’image et le niveau de compression.

Paramétrage de la largeur des photos pour les redimensionner

Le seul inconvénient : Il agrandit ton visuel s’il est plus petit que la taille de destination.

Petit exercice pratique :

  • La photo d’origine prise par mon smartphone : 4032 X 2268 px / 2,76 Mo (et encore il commence à dater)
  • Je la passe au format des illustrations de mon site : 600 X 338 px / 108,7 Ko
  • Je la compresse : 86,7 Ko
  • Le résultat : Division par 25 du poids (et par 32 après compression)

Tu te demandes probablement quelles sont les meilleures options pour compresser tes images.

4 outils de compression pour réduire le poids de tes photos

Ces 4 compresseurs d’images gratuits en ligne présentent de bonnes options pour trouver la meilleure solution en fonction de tes besoins.

Synthèse des limitations et des formats gérés

Tinypng

Simultanées
20

Poids
5 Mo

Ne pas enchaîner trop vite

Formats
JPG, PNG, WebP

Bulk Resize

Simultanées
100

Poids
+ de 10 Mo

Sans limite

Formats
JPG, PNG, WebP

Compressor

Simultanées
10

Poids
10 Mo

50 par jour

Formats
JPG, PNG, GIF, WebP, SVG

Squoosh

Simultanées
1

Poids
+ de 10 Mo

Sans limite

Formats
JPG, PNG, WebP

La compression simplifie la palette de couleurs des images et supprime toutes les informations complémentaires.

Certains outils proposent une option sans perte (Lossless) pour compresser les images sans perte de qualité.

Le résultat est généralement imperceptible avec l’option avec perte (lossy). La majorité des sites bénéficient d’une compression d’image maximale. Cependant, un photographe ou une agence de communication aura tout intérêt à sacrifier un peu la performance pour éviter de dégrader son travail.

Test des performances des compresseurs d’images

J’utilise trois images pour ce test :

  • un portrait (8,98 Mb)
  • un objet (3,24 Mb)
  • une illustration en PNG (399 Kb)
test des outils de compression des images

Je laisse les réglages par défaut et sélectionne l’option Lossy si elle est présente.

Tinypng

Portrait
X

Objet
1,6 Mb

Dessin
134,5 Kb

Bulk Resize

Portrait
4,85 Mb

Objet
1,19 Mb

Dessin
162 Kb

Compressor

Portrait
5,73 Mb

Objet
1,51 Mb

Dessin
113 Kb

Squoosh

Portrait
9,12 Mb

Objet
2,68 Mb

Dessin
457 Kb

La qualité du résultat des compresseurs d’images

Ils exécutent tous un travail très propre à 100 %. Il n’est pas possible de les différencier.

Seul un zoom à 400 % fait ressortir les écarts avec des aspects plus lisses pour Compressor et TinyPNG.

Qualité au niveau des détails de compressor
Compressor
Qualité au niveau des détails de TinyPNG
TinyPNG
Qualité au niveau des détails de Batch Compress
Batch Compress
Qualité au niveau des détails de Squoosh
Squoosh

TinyPNG

interface tinypng

TinyPNG est la solution la plus simple pour compresser tes visuels. Tu déposes tes fichiers et tu les retrouves optimisés en quelques secondes en respectant le format d’origine. La solution propose un bon compromis de qualité et de poids.

Batch Compress (Bulk Resize)

interface batch compress

Batch Compress optimise de grandes quantités de visuels sans aucune limite. Il est extrêmement rapide. Son seul défaut est qu’il exporte tout en JPG. Il est préférable de passer par Bulk Resize qui permet en plus de redimensionner.

Compressor

interface compressor

Compressor supporte un large choix de formats : jpg, png, gif, svg, webp. Tu disposes de l’option compression sans perte. La qualité est excellente avec un lissage un peu plus présent que pour les autres.

Squoosh

interface squoosh

Squoosh est parfait pour les plus exigeants. Tu disposes d’une optimisation fine en particulier pour exporter en WebP. La visualisation en direct superpose le résultat avant/après.

Une astuce pour des visuels de très petites tailles

Le choix de ton visuel impacte le poids. Par exemple : une icône sur un fond de couleur uni ne pèse quasiment rien. Le visuel ci-dessous fait 3,26 Ko. Difficile de faire mieux.

visuel très léger pour illustration

Le monochrome est une option à envisager.

La photo d’origine fait 47 Ko,

photo originale

36,3 Ko en version noir et blanc (- 29 %)

photo noir blanc

et 37,4 Ko avec un filtre de couleur (- 26 %).

photo filtre de couleur

Cela manque un peu de dynamisme ?

Tu charges ta photo en noir et blanc sur WordPress et tu appliques un filtre Duotone.

appliquer un filtre duotone
un visuel en noir et blanc avec l'application d'un filtre duotone
Un visuel coloré pour le poids d’une image en noir & blanc.

Il est possible de ne pas t’occuper du tout de la compression des visuels.

Compresse automatiquement tes images sur WordPress et gère les WebP

Compresse automatiquement tes images sur WordPress et gère les WebP

Tu gères le format et la dimension de tes visuels et une extension les compresse et génère la version WebP toute seule. Intéressé ?

Tu recherches Imagify dans les extensions du répertoire de WordPress.

extension imagify

Tu t’inscris avec ton e-mail.

inscription imagify
email inscription

Tu confirmes ton e-mail et tu copies ta clé d’accès.

confirmation de clé api

Tu saisis un mot de passe et tu te connectes.

mot passe
connexion service

Ton crédit mensuel s’affiche.

crédit

Tu cliques sur Imagify dans le menu haut de WordPress.

imagify wordpress

Tu colles ta clé.

saisir clé api

Tu définis le niveau d’optimisation. J’ai choisi ultra. Le comparateur visuel t’aide pour bien comprendre les différences.

Tu coches l’optimisation au fur et à mesure du chargement dans WordPress. Tu conserves une copie pour pouvoir rétablir ton image le temps de valider le résultat.

réglages généraux

Tu demandes la création d’un WebP de tes images avec l’option balises qui est recommandée.

optimisation webp

Tu n’optimises pas les formats générés par WordPress.

exclusion aperçus

Tu enregistres.

menu optimisation masse

Tu découvres la synthèse des images de ton site.

interface bulk pour optimisation en masse avec l'extension Imagify

Tu lances l’optimisation des images avec Imagif’em all.

confirmation otimisation

Nous avons optimisé les images pour un affichage rapide ce qui favorise le SEO mais il existe d’autres bonnes pratiques pour le référencement naturel.

Comment optimiser tes images pour le référencement naturel (SEO) ?

Comment optimiser tes images pour le référencement naturel (SEO) ?

L’optimisation des images fonctionne avec les autres éléments du SEO. Ils se renforcent mutuellement. Google cherche à mettre en avant des sites instructifs, rapides et optimisés pour les mobiles.

Tu vas avoir besoin d’une extension SEO si tu es sur WordPress. Je te montre les actions avec Rank Math dont j’ai réalisé un tuto complet.

Tu intègres des données structurées.

titres et méta de Rank Math
définir un schéma de données avec rank math

Tu insères les images dans la sitemap.

paramètres de la sitemap
ajout des images dans la sitemap avec Rank Math

Tu as deux niveaux d’optimisation pour tes visuels :

  • Les visuels d’illustrations ou issus de banque d’images : Tu te concentres sur le nom du fichier et le texte alternatif pour enrichir tes pages avec du contexte pertinent. Cela joue pour le SEO global de ta page.
  • Les visuels originaux : Tu appliques l’ensemble des instructions pour essayer d’apparaître en bonne place dans Google Images.

Google Images accepte les formats BMP, GIF, JPEG, PNG, WebP et SVG.

Google catégorise ton image à l’aide de son contexte et croise de nombreux éléments.

  • Le nom de ton fichier est composé de tes mots-clés sans accent et séparés par des tirets du 6. Par exemple : optimisation-images-seo.png.
  • Tu complètes le texte alternatif de l’image (Alt) en décrivant l’image sans oublier de mentionner tes mots-clés. Le spam est surveillé. Tu peux reprendre ton titre pour un visuel illustratif sous celui-ci.
  • Tu places tes visuels à côté du texte associé. Google utilise le texte à proximité pour définir le contexte.
  • Tu légendes tes images si c’est pertinent.
  • Tu n’ajoutes aucun texte important en image : titres, menus… Seul le texte est interprété.
  • Tu respectes les instructions spéciales SafeSearch si tu présentes du contenu destiné aux adultes.

Tu cherches des ressources pour illustrer ton site ? Je pense que cela va te plaire.

8 sources d’images et d’illustrations gratuites pour un usage commercial

8 sources d'images et d'illustrations gratuites pour un usage commercial

Tu vas recevoir une lettre d’avocat avec un montant qui peut se révéler coquet si tu utilises sur ton site une image dont tu ne possèdes pas les droits. Ce n’est pas une légende urbaine pour faire peur aux enfants. Les sociétés utilisent des robots pour repérer les usages illégitimes.

Tu utilises ces ressources comme tu le souhaites sur tous les supports y compris pour ton entreprise.

Unsplash pour une sélection de photos de qualité

unsplash interface

Tu recherches (en anglais) des photos sur tous les sujets. La sélection mise sur la qualité.

Unsplash est incorporé à des logiciels de création. Le revers de son succès : tu retrouves ces illustrations sur tous les sites.

Pexels pour des vidéos libres de droit

interface pexels

Pexels est une ressource similaire à Unsplash pour les photos avec des modèles originaux et une recherche en français.

La bibliothèque de vidéos est riche et qualitative.

Pixabay pour les illustrations

interface pixabay

2,5 millions de ressources sont disponibles sur Pixabay. L’accent est mis sur la quantité. Le pire côtoie le meilleur.

Le filtre sur les illustrations ou les images vectorielles est parfait pour trouver des dessins.

Tu retrouves également des vidéos et de la musique.

Wikimedia Commons pour du vintage

interface wikimedia commons

Tu retrouves des visuels tombés dans le domaine public et des fonds de bibliothèques.

Il faut prendre son mal en patience mais tu déniches des pépites.

Attention : tu dois impérativement sélectionner aucune restriction dans le filtre.

aucune restriction wikimedia

Iconduck pour tes icônes

interface iconduck

Une collection très riche de plus de 100 000 icônes en SVG et PNG accessibles par une recherche en anglais. Il est facile de trouver un style cohérent.

Canva pour des illustrations à tes couleurs

graphiques canva

Tu retrouves des photos gratuites dans Canva mais sa richesse se trouve dans la section Graphiques.

Tu personnalises les couleurs en quelques secondes.

personnaliser illustrations canva

Open Peeps pour créer des avatars façon cartoon

interface open peeps

Pablo Stanley a dessiné des parties de personnages que tu peux assembler à ta convenance en téléchargeant la bibliothèque complète des éléments sur Open Peeps.

Tu retrouves cette collection sur Blush dans une version très simple à utiliser.

choix situation personnages open peeps
personnalisation personnage open peeps

Seul le petit format est accessible en version gratuite.

Open Peeps personnage petit format

Scale pour illustrer les pages de ton site

personnalisation couleurs scale

Tu retrouves 200 illustrations dont tu personnalises les couleurs. Elles sont orientées pages d’accueil, pages de vente et startup.

Conclusion

Tes visiteurs vont être heureux. Tu disposes de tous les éléments pour choisir le format adapté, dimensionner tes images, les compresser et compléter les données SEO.

La compression des images est également utile pour stocker les visuels pour les réseaux sociaux et réduire les temps de chargement.

Un guide complet pour diminuer le poids des images de ton site et les bonnes pratiques pour le référencement naturel. #seo Cliquez pour tweeter

La compression fonctionne avec les vidéos. HandBrake fait des miracles. Les gains sont énormes.

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser

Retrouve tous les articles pour Attirer des visiteurs

bannière newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean

Découvre quel format choisir en fonction de la situation, les meilleurs outils de compression, le SEO des images et 8 ressources gratuites.
Découvre quel format privilégier en fonction de la situation, un comparatif des meilleurs outils de compression, les bonnes pratiques pour le référencement naturel des images et 8 ressources pour trouver des visuels gratuits.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

NEWSLETTERReçois les meilleurs conseils pour ton site et pour développer ton activité.

Tu découvres, tous les lundis, les derniers articles et vidéos pour créer ta marque, construire ton site et faire grandir ton entreprise.