Pourquoi optimiser les images de son site internet

L’optimisation des images Web consiste à produire des images de haute qualité dans le format, les dimensions, la taille et la résolution appropriés en réduisant la taille de l’image sans abîmer sa qualité. L’optimisation des images peut être réalisée de différentes manières, que ce soit en redimensionnant les images, en les enregistrant  sur votre ordinateur ou en compressant la taille pour un usage optimal.

Quels sont les avantages de l’optimisation des images ?

L'importance des images pour connecter les utilisateurs à vos produits n’est plus à démontrer. En effet,  si le chargement de votre site Web dure plus de 3 secondes, il est fort plus probable que les utilisateurs quittent votre site web, ce qui augmentera considérablement votre taux de rebond et finira par affecter vos conversions.

Saviez vous que optimiser vos images permet de booster votre classement sur Google? Optimiser vos images, c’est optimiser votre parcours utilisateur. Un utilisateur satisfait vous permet d’atteindre vos objectifs plus rapidement !

Vitesse de chargement des pages

La vitesse de chargement d'une page est la durée nécessaire à l’affichage complet d'une page Web. Les sites web avec moins de 2 secondes de vitesse de chargement sont ceux qui convertissent le mieux. Ainsi, si vous optimisez 50% du poids de vos images par exemple, vous améliorerez la vitesse de chargement de votre site Web par le même taux, élément décisif dans votre stratégie SEO.

Amélioration classement SEO

Bien que les chiffres ne soient pas exactement officiels, Google a déclaré que chaque jour, des centaines de millions de personnes utilisent Google Images pour découvrir et explorer visuellement le contenu Web. Selon Moz , la recherche d’images représenterait 27% de toutes les requêtes générées par les 10 principales sources de recherche Web américaines. D’ailleurs, Il y a environ un an, Google a changé le bouton «Afficher l'image» de Recherche d'images en «Visiter [Page]». En conséquence, les plateformes d'analyse ont commencé à enregistrer une augmentation du nombre de sessions spécifiquement axées sur la recherche d'images et une visibilité accrue du contenu des pages hôtes ( au lieu de fichiers d’images aléatoires sans contexte). Outre le contenu et l'amélioration de l'expérience utilisateur, les images constituent à nouveau une source importante de trafic et ne doivent pas être ignorées.

Gain de stockage

Détails non moins négligeable, l’espace de stockage. En effet, un hébergeur est fourni avec un espace de stockage bien défini. Qui dit stockage dit limitation ! Pour utiliser au mieux votre espace d’hébergement, compresser vos images vous permettra de gagner en vitesse mais également de faire des économies à terme. Ainsi, des images optimisées permettent de ne pas encombrer votre hébergeur mais également de téléverser plus de contenu sur votre site web.

Comment optimiser ses images ?

Pour un résultat probant, il est nécessaire de prendre de bonnes habitudes afin d’offrir à votre site les meilleures chances d'atteindre vos objectifs en ligne et de se faire connaître. Entre l’importance d’exporter ses images.

Bien exporter ses images

L’enregistrement pour le web sur Photoshop permet de trouver un juste équilibre entre qualité et poids de l’image. Une résolution de 72 DPI permet de garder toute la qualité de l’image. 

Il y a différent formats d’images, chacun a ses spécificités et ses avantages que vous devez prendre en considération lorsque vous exportez vos images. Il est primordial de sélectionner le bon format pour un usage optimal sur la plateforme que vous aurez choisie.

GIF (.gif)

Les fichiers au format GIF ou Graphics Interchange Format sont largement utilisés pour les graphiques Web, car ils se limitent à 256 couleurs, peuvent permettre une transparence et peuvent être animés. Les fichiers GIF sont généralement de petite taille et sont très portables. 

• Compression : Lossless - compression sans perte de qualité 
• Idéal pour : Images Web 
• Attributs spéciaux : peut être animé, peut enregistrer la transparence 

PNG (.png)

Les fichiers PNG ou Portable Network Graphics sont un format d’image sans perte conçu à l’origine pour améliorer et remplacer le format gif. Les fichiers PNG peuvent gérer jusqu'à 16 millions de couleurs, contrairement aux 256 couleurs prises en charge par GIF.

• Compression :   Lossless - compression sans perte de qualité 
• Idéal pour : Images Web 
• Attributs spéciaux : Enregistrer la transparence 

JPEG (.jpg, .jpeg)

JPEG, qui signifie «Joint Photographic Experts Groups», est un format «avec pertes», ce qui signifie que l’image est compressée pour créer un fichier plus petit. La compression crée une perte de qualité mais cette perte n’est généralement pas perceptible. Les fichiers JPEG sont très courants sur Internet et JPEG est un format courant pour les appareils photo numériques, ce qui le rend idéal pour une utilisation Web et des impressions non professionnelles. 

• Compression : pertes - certaines informations sur les fichiers sont compressées ou perdues 
• Idéal pour : Images Web, Impression non professionnelle, E-mail, 
• Attributs spéciaux : PowerPoint : Possibilité de choisir le niveau de compression lors de l'enregistrement dans des programmes de traitement d'images tels qu'Adobe Photoshop ou GIMP.

Bien nommer ses images

Nommer et décrire correctement les images pour le référencement

L'une des possibilités d'optimisation les plus simples et souvent négligées est le nom même des fichiers d'image . Ceux-ci devraient utiliser quelques mots-clés soigneusement choisis - idéalement, les mots-clés pour lesquels l'image pourrait se classer - en omettant les mots vides (a, le, dans, de, etc.) et en séparant les mots-clés par des traits d'union (par exemple, IMG-458752.jpg deviendrait brooklyn -bridge-night.jpg).

Les attributs alt et title de l' image (de la balise HTML <img>) sont les paramètres les plus simples: ils aident non seulement les images à obtenir un meilleur classement dans la recherche, mais renforcent également la pertinence de la page et améliorent l'expérience utilisateur. Dans le cas de liens d’image, ces attributs fournissent également un contexte aux moteurs de recherche concernant la page de destination, ce qui facilite son classement. Contrairement aux noms de fichier, écrivez ces attributs de manière grammaticalement cohérente et concise: les attributs alt sont joués à haute voix par un logiciel d'accessibilité, les lecteurs d'écran et les attributs de titre apparaissent lorsque les visiteurs survolent les images.

Pour le commerce électronique et les images de produits, il est souvent judicieux d'ajouter également des UGS , des ISBN ou des numéros de modèle aux attributs alt, car nous recherchons parfois des produits très spécifiques. Notez que les légendes des images sur la page et les mots-clés dans la zone de texte environnante aident également les moteurs de recherche à obtenir plus de contexte pour les images et à améliorer leur capacité de classement.

Notez que les balises de titre HTML de la page hôte sont également affichées dans les résultats de la recherche d'images . Vous devez donc vous assurer que celles-ci sont aussi pertinentes que possible pour l'image (voir capture d'écran ci-dessus).

Outils d’optimisation

C'est bien gentil de dire qu'il faut optimiser ses images... Mais comment faire? Pas d'inquiétude, voici quelques outils qui peuvent faire le travail à votre place. Essayez-les pour trouver celui qui vous conviendra ;-)

WP Smush

Les petits +

• Très facile à utiliser: le plugin convient très bien au débutant pour améliorer les performances de leur site internet
• Multi-fonction: il permet de redimensionner, d'optimiser, et de compresser toutes vos images rien qu'en les téléversant sur votre site
• Traitement de masse: pour vos images plus anciennes, vous pouvez aller dans Média > WP Smush pour traiter en bloc 50 images à la fois.
• 100% gratuit!

Ce qu'il faut savoir...

• Pas le meilleur du marché: la performance obtenue avec ce plugin n'est pas aussi importance que celle que vous pouvez obtenir avec d’autres méthodes. Par exemple, si vous téléchargez une photo de 3 Mo sur votre site WordPress, WP Smush va la réduit de 10 à 20% sans perte de qualité. Il restera quand même 2,4 à 2,7 Mo de fichier, ce qui est énorme.
• Pas de contrôle sur le degré d'optimisation: le logiciel agit seul et se charge de prendre les décisions quant à l'importance d'optimisation de l'image. 

Imagify

Les petits +

• Automatique: le plugin permet d’optimiser les images automatiquement au moment du téléversement
• Traitement de masse: sa fonction d'optimisation de masse permet de compresser toutes les images précédemment téléversées.
• 3 niveaux d'optimisation: vous pouvez adapter l'optimisation en fonction de vos besoins. Il y a 3 niveaux d'optimisation possibles:
  • Normal: optimisation sans perte et sans aucun changement visible mais avec une réduction de poids moins importante.
  • Agressif: optimisation avec une très légère perte de qualité invisible à l'oeil nu avec une réduction très importante du poids.
  • Ultra: optimisation avec une forte réduction de poids des images mais une légère dégradation de la qualité.
• Utilisable sans téléchargement: pour optimiser des images de moins de 2Mo, vous pouvez les importer directement sur leur site en cliquant ici.

Ce qu'il faut savoir...

• Pas évident pour les débutants: si vous n'avez pas Wordpress, l'utilisation d'une clé API vous demandera probablement de faire appel à un spécialiste pour la mettre en place sur votre CMS. 
• Abonnement gratuit: vous obtiendrez 25 Mo de données par mois pour la compression.
• Forfait payant: si vous avez besoin de plus de ressources, vous pouvez vous abonner à leur forfait payant qui débute à 4,99$/mois pour 1Go de données. 

EWWW

Les petits +

• Aucune limite: EWWW n’a aucune limite quant à la taille des fichiers ou au nombre d’images téléchargées.
• Version gratuite: elle effectue des optimisations sur votre propre serveur Web, alors que tous les autres outils utilisent des serveurs externes. 
• Sécurisé: le plugin dispose d'une politique de confidentialité stricte

Ce qu'il faut savoir...

• Pas de traitement de masse: EWWW peut mettre votre serveur à rude épreuve si vous optimisez plusieurs images à la fois.
• Interface rudimentaire et technique: même si l'extension fait ce qu'on lui demande de faire, elle reste plutôt difficile d'utilisation quant à son interface plutôt rudimentaire et technique.

Photoshop

Les petits +

• Aucune limite: on ne dit pas que vous pouvez tout faire, mais... En fait si, tout est possible avec le logiciel à partir du moment où on sait un minimum le manipuler. Vous pourrez même faire des petites retouches au besoin. 
• Très bien documenté: il existe de nombreux tutoriels et manuels d'aide pour vous aider à l'utiliser.

Ce qu'il faut savoir...

• Payant: tous les logiciels de la suite Adobe sont payants. Pour la photographie, le premier plan s'élève à 9,99$/mois pour un espace de stockage de 20Go (il comprends les logiciels Photoshop et Lightroom). Si vous voulez plus d'espace, un seul logiciel coûte 20,99$/mois avec 100Go d'espace. 
• Assez technique: même si le logiciel est assez intuitif lorsqu'on est habitué aux logiciels de ce type, il demande tout de même un minimum de connaissances.

Vous savez tout!

Les banques d'images et le libre de droit

Saviez-vous qu'il existe des banques d'images pour vous aider à enjoliver votre site et vos publications? Mais attention, ces images sont parfois soumises aux droits d'auteur et aux règles du libre de droit. On vous dit tout dans ces articles:

• Où trouver du contenu libre de droit
• Images, droits et internet