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.

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 ?

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

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 ?

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

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

Pour une illustration

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

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

Pour un logo

Ce logo comporte trois couleurs.

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.

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

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.

Tu choisis ton format de sortie.

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.

Tu récupères tes 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 ?

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.

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.

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

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

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)

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

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.

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)

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

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

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.

Le monochrome est une option à envisager.

La photo d’origine fait 47 Ko,

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

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

Cela manque un peu de dynamisme ?

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

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

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.

Tu t’inscris avec ton e-mail.

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

Tu saisis un mot de passe et tu te connectes.

Ton crédit mensuel s’affiche.

Tu cliques sur Imagify dans le menu haut de WordPress.

Tu colles ta clé.

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.

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

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

Tu enregistres.

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

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

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) ?

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.

Tu insères les images dans la sitemap.

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

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é

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

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

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

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.

Iconduck pour tes icônes

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

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

Tu personnalises les couleurs en quelques secondes.

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

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.

Seul le petit format est accessible en version gratuite.

Scale pour illustrer les pages de ton site

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.

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

Les articles qui peuvent t’intéresser

• Le guide d’installation et le paramétrage de Rank Math pour ton SEO
• Structure le contenu de ton site pour le référencement naturel
• Analyse et améliore ton SEO avec Google Search Console
• Google Business Profile pour ton SEO local

Retrouve tous les articles pour Attirer des visiteurs

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