Communication web – Optimiser ses images pour le web

Optimiser ses images pour le web_article

Optimiser ses images pour le web : le guide

Le poids et la qualité des images sont aujourd’hui l’un des principaux facteurs qui alourdissent ton site internet. Elément à la fois indispensable pour illustrer tes propos et important pour ton référencement naturel, on va t’expliquer comment facilement optimiser ses images pour le web !

Commençons par la base des bases ; la résolution standard sur le web est de 72 dpi et la colorimétrie standard est le RVB (Rouge, Bleu, Vert).

Optimiser ses images : choisir le bon format JPEG ou GIF ou PNG ?

Il existe trois principaux formats d’images sur internet : JPEG, GIF et PNG. Ce sont les trois seuls formats qui s’affichent correctement sur l’ensemble des navigateurs.

illustration article_format des images

JPEG

Format idéal pour les photographies et pour les images en général. Par contre, la compression d’un JPEG entraîne une perte d’informations. (Euh… Et ça veut dire quoi ?). Cela signifie que quand une image JPEG est de faible qualité, car trop compressée, ça se voit (image pixelisée et floue). Le format JPEG perd sa qualité assez rapidement dans la compression. Plus tes images contiennent des couleurs et des couleurs distinctes, moins le poids du JPEG est compressible.

Malgré ces défauts, le JPEG reste le format idéal pour le web (oui, oui). Notamment parce qu’il permet un bon rendu des images de haute qualité et qu’il offre une densité d’informations supérieure aux autres formats. En gros, tu auras plus d’informations dans un JPEG de 500ko que dans un PNG de 500 ko. Cette densité d’information permet d’obtenir des images riches visuellement et très qualitatives pour un poids optimisé.

GIF

Permet de réunir plusieurs images dans un seul fichier. Il supporte la transparence mais ne gère par contre que 256 couleurs, ce qui limite considérablement la qualité des images. Par contre, contrairement aux format JPEG, le GIF ne perd pas d’informations lors de la compression.

Si les GIFs sont en général légers, c’est qu’ils contiennent très peu d’informations. Mais en réalité, le rapport poids / quantité d’informations est beaucoup moins intéressant que celui du JPEG.

Evidemment, ce format n’est clairement pas pertinent sur certains types d’images, comme les photos de tes produits par exemple (si tu es e-commerçante). En revanche, pour les logos le format GIF convient tout à fait.

PNG

Principalement utilisé pour les illustrations, infographies, logos… Il est idéal si tu veux apporter de la transparence dans tes images. La transparence correspond à l’opacité de. Le format GIF supporte aussi la transparence, mais augmentera le poids de ton fichier (le vilain).

Sur Photoshop, tu peux créer deux types d’images PNG : le PNG-8 et le PNG-24. Chacun de ces deux formats a des avantages et des inconvénients qu’il faut prendre en compte.

  • Le format PNG-8 est idéal pour les images de type logo. Il est toujours très léger.
  • Le PNG-24 se rapproche du format JPEG. Cependant, comme nous l’avons dit précédemment, le PNG ne perd aucunes informations lors de la compression. Ce qui signifie que la qualité de l’image après compression sera meilleure avec le format PNG mais le poids du fichier sera plus lourd (5 à 10 fois plus lourd). Si vous n’avez pas besoin de transparence pour vos images, il est plus judicieux de choisir le JPEG plutôt que le PNG-24.

La taille idéale pour optimiser ses images ou illustrations

Réduire les dimensions d’une image permet d’en réduire le poids. Photoshop permet de voir l’image à sa taille réelle et donc d’ajuster les dimensions en te mettant à la place des internautes qui verront l’image sur la page web. Enregistre l’image à la taille que tu souhaites avant de l’importer sur ton site internet. Bien entendu, tu peux aussi réduire les dimensions de l’image directement sur le CMS de ton site, mais cela ne réduira pas le poids de l’image sur ton serveur.

Maintenant que tu sais tout (ou presque) sur la taille des images, voilà quelques règles basiques que tu peux réutiliser :

Règles pour optimiser ses images

Optimiser ses images oui, mais avec des images libres de droits c'est mieux !

Autre aspect pour lequel il faut accorder une grande vigilance, c’est la notion d’« images libres de droits ». Cela peut concerner aussi bien une image qu’un texte, une vidéo ou une musique qui une fois acquis, peuvent être utilisés sans payer de redevance à l’auteur.

Attention à toi, le mot « libre » qui compose cette expression peut laisser penser que tu es « libre » de l’utiliser comme bon te semble et sans contrepartie, alors que ce n’est pas du tout le cas.

Bien au contraire, une image libre de droits correspond à une licence (ou autorisation) que tu acquiers pour pouvoir l’utiliser sans limite de temps mais il faut que tu gardes en tête qu’elle ne t’appartient pas puisque tu n’en es pas l’auteur.

Les photos libres de droits peuvent être gratuites ou payantes.

Voici quelques exemples de banques d’images gratuites :

Si tu souhaites plus de choix, voici quelques banques d’images payantes :

Il est possible de trouver des images libres de droits dans Google Images en allant dans Option, puis droit d’usage. Toutefois, on te recommande les banques d’images puisque la qualité des photos est bien meilleure !

Et voilà, grâce à ces petits conseils tu n’as plus d’excuse pour avoir un site internet hyper lourd et long à charger ! Si tu as d’autres questions concernant ta communication web, nous avons également d’autres articles qui te seront utiles : l’intérêt d’avoir un site internet responsive, l’importance d’une newsletter

Et comme d’habitude, si tu as une question n’hésite pas à nous écrire à : contact@laplumedor-media.fr on se fera une joie de t’aider !

Si l’article t’as plu, laisse-nous un commentaire 🙂

Leave a Comment

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.