Les images, mille et un formats mais seulement quelques élus pour le Web ?
15 octobre 2007 par Cynthia LapratteLes images font partie intégrante du Web. Attrayantes et dynamiques, elles apportent des exemples visuels au contenu ou enrichissent l’aspect visuel d’un site. Ayant regroupé votre matériel papier et image destiné au Web, quel type d’image devrez-vous employer ?
Il est faux de penser que tout format peut être affiché sur Internet. Certains formats de fichiers sont trop lourds ou d’autres requièrent un plugiciel pour les afficher, ce qui signifie qu’une partie de votre clientèle ne pourra pas profiter des ces éléments graphiques. Par exemple, les PDF sont de plus en plus utilisés comme média pour mettre à la disposition des gens des documents ou des brochures. Aussi, beaucoup d’entre nous utilisent Microsoft Word ou PowerPoint pour une présentation. Ces trois formats peuvent contenir des images mais aucune ne sera lisible directement par un navigateur Internet. La raison : il faut démarrer un logiciel à l’extérieur du navigateur pour pouvoir avoir accès à une image contenue à l’intérieur du document.
Le tableau ci-dessous résume les formats appropriés à utiliser dans le Web.
| Jpeg | Le jpeg est excellent pour une image contenant beaucoup de tons et de dégradés (par exemple une photo). Ce type de fichier permet aussi d’alléger le poids des fichiers grâce à une compression de l’image. La compression du jpeg diminue plus ou moins la qualité de l’image selon le niveau de compression appliqué en fusionnant des pixels de couleurs, éliminant ainsi des teintes imperceptibles à l’œil.
|
| Gif | Ce format est adéquat pour une image utilisant peu de couleurs (maximum 256 couleurs) ou contenant très peu de dégradés. Il convient parfaitement à des icônes, des boutons ou des logos. Son type de compression utilise la réduction du nombre de couleurs plutôt que de les fusionner comme le ferait un jpg. La qualité d’un gif dépend du nombre de couleurs allouées lors de l’enregistrement. Le gif accepte 1 niveau de transparence (un pixel est transparent ou ne l’est pas, il ne peut pas être semi transparent) et plusieurs images pour créer de simples animations.
|
| Png | Le png est un mélange entre le jpeg et le gif. Tout comme le jpeg, il permet d’utiliser une grande gamme de couleurs et comme le gif, la transparence mais améliorée. Le niveau de transparence du png est plus important que le gif. La transparence peut être graduelle. Seuls inconvénients : il ne compresse pas une image contenant beaucoup de couleurs comme le ferait un jpeg ce qui peut rendre le fichier lourd et la transparence n’est pas supportée par tous les navigateurs, la partie transparente étant changée par une couleur opaque.
|
| Bitmap (bmp) | Le format bitmap est un format non destructif. N’utilisant pas de compression, ce type de fichier risque donc d’être lourd. Les navigateurs peuvent l’afficher mais il n’est pas conseillé de l’utiliser si l’image est grande, son poids étant alors inapproprié au Web. |
| Flash (swf) | Le swf n’est pas un format d’image lu naturellement par un navigateur mais comme il est largement utilisé sur le Web, il a été inclus dans ce tableau. Le swf sert principalement à afficher une animation. Il requiert un plugiciel pour son affichage. Il permet une grande gamme de couleurs (le swf étant un fichier pouvant intégrer jpg, gif et png) ainsi que de la transparence. |
Une fois le format de sauvegarde décidé, il ne reste plus qu’un détail avant de placer l’image sur une page Web. Est-ce que mon image est suffisamment grande ou l’est trop ? Devoir agrandir ou réduire une image dans un éditeur Web n’est pas une très bonne solution. Votre image s’en trouvera pixellisée, la rendant moins attrayante et voire illisible si elle contient du texte. Alors mieux vaut prévoir les bonnes tailles d’images avant de les intégrer.
Il est à noter que peu importe le format choisi, si vous enregistrez du texte en tant qu’image, celui-ci ne sera pas pris en charge par les moteurs de recherche ni accessible à un utilisateur pour du copier coller. Une alternative s’offre quand même à vous pour les moteurs de recherche. La plupart des logiciels Web vous donne la possibilité d’insérer du « texte alternatif » (paramètre ALT). Ce paramètre est utilisé par des logiciels de reconnaissance de texte pour les non-voyants et offre la chance d’afficher un petit bout de texte si le navigateur ne peut afficher l’image (un menu constitué de boutons image ne sert pas à grand chose si on ne sait pas vers quelle page cela nous mène.).
En conclusion, utilisez :
- des jpeg pour des photos ou des illustrations contenant beaucoup de couleurs ou des dégradés
- des gif pour des images nécessitant peu de couleurs ou de la transparence comme des icônes, des boutons ou des logos
- des flash (swf) pour des animations que le gif ne pourrait pas permettre.
De plus, toujours préparer les images de la même dimension que les zones qu’elles occuperont dans le site et ajoutez du texte alternatif pour les images importantes. Vous devriez maintenant être prêt à compléter la mise en page de votre site Web !
