Le bon choix des paramètres des images pour le web

Le bon choix des paramètres des images pour le web

superposition d'images et de critères de qualité d'images avec un gros point d'interrogation dur un écran

Un bon contenu sur un site web doit effectivement contenir des images. En effet, un internaute sera davantage attiré par un beau visuel que par un contenu uniquement textuel. Les illustrations sont donc indispensables mais attention il faut respecter des règles… Utiliser les bons paramètres pour les images d’un site web est essentiel.

En quoi l'utilisation d'images sur un site pourrait être un problème?

En fait chaque image est régie par différents paramètres. Les valeurs de ces paramètres vont directement être liées à sa qualité visuelle mais aussi « à son poids ». Plus une image est lourde, plus elle longue à charger. Et comme nous sommes des impatients nés, quand c’est trop long on s’en va ailleurs! On s’entend, long signifie ici plus de 5 secondes… pour les personnes les plus patientes!

Cependant, les images sont nécessaires voire indispensables à la bonne lisibilité et compréhension d’un contenu. Il faut donc utiliser les bons paramètres pour chaque image et déterminer les valeurs suffisantes.

Quels sont les paramètres qui caractérisent les images numériques?

Un petit avant propos pour définir ce qu’est un pixel, élément essentiel de l’image. Un pixel est un élément unitaire qui contient une information de couleur et de transparence. Cet élément ne peut pas être divisé et n’a pas de taille prédéfinie. Par exemple si on affiche une image sur un écran, chaque pixel de l’image représente un pixel de l’écran. Plus les pixels sont nombreux et petits, plus l’image sera « lisse » et moins elle sera « pixellisée ». On entend par là que le pixel est alors visible et l’image apparaît comme un ensemble de carrés collés.

La définition

La définition d’une image correspond au nombre de pixels dans l’image. Elle s’exprime donc en pixels et elle s’obtient en multipliant le nombre de pixels en largeur et en hauteur.

La résolution

La résolution d’une image est le nombre de pixels par unité de longueur. Elle s’exprime en ppp (pixel par pouce) ou en anglais en dpi (dot per inch). 

La taille

La taille de l’image donne sa largeur et sa hauteur, en pixels ou en cm (ou mm, ou inch…) 

Le format

On connaît le format d’une image en regardant son extension. En général, il détermine le taux et la méthode de compression. Plus une image est compressée, plus sa qualité diminue et son poids aussi. Certains formats portent aussi des informations de transparence ou d’animation.

Le poids

Le poids d’une image est la résultante de tous ces paramètres. Il s’exprime en octets (ko ou Mo) appelés aussi des bites (kb ou Mb). Plus une image est de grosse résolution, avec une grande taille et un format non compressé, plus l’image est lourde.

Quels sont les bons paramètres des images pour votre site?

Les bons réglages pour une image dépendent évidemment de ce que l’on souhaite en faire. Pour une impression, il faut une grande résolution, typiquement 300dpi Pour un écran, peu importe, 72dpi ou 300dpi, ce qui compte c’est la taille en pixels, autrement dit la définition. On va donc mettre l’image aux dimensions proches de ce que  l’on veut voir à l’écran. En général, pour du contenu, on est aux alentours de 700 pixels. Pour un bandeau d’en-tête qui doit faire toute la largeur de l’écran, 1500 pixels doivent convenir.

 

Image de fond marin
Taille en pixels: 800x600
Poids: 547 ko
Taille: 200x150 pixels
Poids: 44,9 ko
Taille: 800x600
Compression: 70
Poids: 211ko

Visuellement, avec la compression, on ne voit pas de différence mais le poids, lui, est largement diminué.

Même pour un grande image, on ne devrait pas dépasser 1Mo. Il faut savoir que pour un bon chargement, chaque page avec tout son contenu ne devrait pas dépasser 2Mb.

Pour le format, on a beaucoup de jpg, notamment pour les photos. Le png est utilisé pour les logos, quand il n’y a pas trop de nuance de couleurs, et quand on a besoin de transparence. Le gif, quant à lui permet d’avoir des images animées. Pour chacun d’eux on peut aussi jouer sur le taux de compression ou le nombre de couleurs pour minimiser le poids. Il s’agit alors de compromis entre le poids de l’image et sa qualité.

 

gif animé - poids 25ko
logo ekm - Marianne Ducassou WebKomoMai - création de sites internet
format png, fond transparent

La balise "alt"

Indépendamment des différents paramètres qui constituent l’image, il y a, entre autre, le « texte alternatif« . C’est la balise « alt » de l’image. Les moteurs de recherches y sont très sensibles. Initialement, elle existe pour permettre aux malvoyants de comprendre les images « lues » quand ils ne peuvent pas les voir. Faut-il encore la renseigner… Pour améliorer le référencement on peut y mettre un mot clé mais attention, il faut qu’il reste pertinent par rapport au contenu.

J’espère que cet article a répondu à vos attentes. Si vous avez besoin de précisions ou que vous souhaitez faire une remarque, n’hésitez pas à laisser un commentaire.

Et si vous avoir un article sur un sujet particulier (dans le domaine du web quand même!)  ou si vous avez une demande de prestation, n’hésitez pas à me contacter.

Je vous souhaite une excellente journée et vous dis à très bientôt!

Marianne

Je vous accompagne dans toutes les étapes de la conception de votre site web: organisation de votre projet, graphisme, mise en page, contenu, SEO et bien plus encore! Découvrez les prestations de WebKomoMai et n'hésitez pas à me contacter!

4 Partages
Partagez4
Partagez