Agence creation de site internet
Le bandeau du site Ergonomie Web retour sur la page d'accueil du site ergonomie-web.studiovitamine.com aller sur le site www.studiovitamine.com
Thèmes associés : Compression d image, compresser image ! Image format gif ! Images format png car web images maps. Ergonomie des sites web, ergonomie web, compresser images ou image format jpg et format d image et balise alt, ergonomie site web, attribut alt et image cliquable, format image, compresser une image, meilleur format image. Format image web et images map donc texte alternatif, choisir un format d'image pour son site. Liens associés : format image et format image
Accueil > Design web > Images

E-Commerce

Les images

Les images permettent d'illustrer un site web, de le rendre plus agréable mais aussi de donner du sens au contenu.
 
Un site web contient souvent des photographies, des graphiques, des schémas, des dessins pour illustrer les propos du site mais aussi pour le rendre agréable. Elles permettent de capter l'attention de l'utilisateur.
 
Certaines images illustratives parlent d'elles-mêmes. Parfois une légende permet d'apporter une information complémentaire que l'internaute ne manquera pas de lire. Les légendes des images sont lues même par les visiteurs pressés !
 
Attention toutefois à na pas abuser des images. Cela peut géner le confort visuel, la lisibilité ainsi que le chargement des pages.
 
  1. Privilégier la qualité
  2. Le format des images
  3. Les images disposent d'une alternative textuelle
  4. Les images cliquables

1. Privilégier la qualité.

Sur une page web, il est préférable de mettre des images de bonne qualité car les internautes apprécient moyennement les images de mauvaise qualité. Des images plus petites seront toujours plus qualitatives pour un site web que des grandes images de qualité moindre.
 
Qui dit qualité ne dit pas forcement image d'un poids important car il est impensable de mettre des images qui pèsent lourd. Le temps de téléchargement d'une page dépend en grande partie du poids des images. Si une page est trop longue à s'afficher, les internautes la quittent avant la fin du téléchargement.

2. Le format des images.

Image de Les images
Qu'est-ce-qui fait le poids d'une image ?
Une image est composée de pixels (picture elements). Les pixels sont les plus petits éléments constitutifs d'une image et ont chacun une couleur. Plus l'image est grande, plus elle contient de pixels et plus le poids du fichier augmente. Alors comment obtenir une image avec les mêmes dimensions mais d'un poids plus léger ?
 
Compresser une image.
Pour obtenir une image plus légère sans que la qualité visuelle soit trop dégradée, il est possible de la compresser. C'est à dire supprimer des pixels jugés inutiles ou mettre moins de couleurs dans l'image.
 
Pour une page web, trois formats de compression existent : le JPEG, le GIF ou le PNG.
 
  • Le format JPEG est plus destiné aux photographies. Il utilise une compression destructrice de l'image. Pour résumer, la compression d'une image en JPEG entraine la disparition de pixels. Cela veut dire que si un pixel noir est voisin d'un pixel blanc, la compression va définir un seul pixel de la taille des deux pixels qui aura pour couleur la moyenne des deux qu'il remplace : c'est à dire gris. Plus  l'image est compressée plus les pixels seront gros et plus l'image sera dégradée. Il faut donc trouver le bon compromis entre qualité désirée et taille finale de l'image.
 
  • Le format GIF est un format qui utilise une compression non destructrice des images. Il a une capacité maximum de 256 couleurs. Lorsqu'une image est convertie au format GIF, elle n'est pas dégradée mais seulement limitée en terme de couleur (256). Le format GIF, de moins en moins utilisé, est plutôt réservé aux logos, schémas simples... Il permet de gérer la transparence. Le format GIF permet de créer des images animées du type smileys.
 
  • Le format PNG est un format qui a pris le dessus sur le format GIF car il n'est pas limité à 256 couleurs et il gère la transparence. Son intégration sur une page web est ainsi facilité. Il ne dégrade pas l'image, contrairement au JPEG, au détriment du poids du fichier. Ce format est particulièrement recommandé pour des graphiques, des logos, des icônes, des images représentant du texte. Attention toutefois à Internet Explorer 6, car la transparence n'est pas prise en compte par cette version du navigateur de Microsoft. A ce sujet, allez voir comment obtenir la transparence PNG avec Internet Explorer 6 sur www.alsacreations.com


Image de Les images

3. Les images disposent d'une alternative textuelle.

Image de Les images
Proposer un texte alternatif à une image est important à plus d'un titre. Il permet d'offrir aux visiteurs des réponses à des demandes d'accessibilité pour les personnes aveugles ou déficientes visuelles qui ne peuvent pas voir les images.
Le texte alternatif permet d'afficher la description des images lorsque les navigateurs sont configurés pour ne pas les afficher. Il est aussi utile pour le référencement des pages.
 
De nombreux sites web ne proposent pas encore de textes alternatifs. C'est un domaine dans lequel il y a encore beaucoup d'effort à faire pour rendre le web un peu plus accessible. Il est important de pouvoir commenter les images, animations, vidéos, bandes sons.... L'absence d'éléments visuels ou sonores ne doit pas empêcher la compréhension générale de l'information contenue dans la page.
 
Le visiteur handicapé visuel ou auditif, qui navigue avec un dispositif de synthèse vocale et/ou un afficheur braille, peut s'appuyer sur l'alternative textuelle.
 
Alors comment créer un texte alternatif ?
 
Le principe du texte alternatif.
L'attribut alt est seulement défini pour les balises  <img>, <area> et optionnellement pour <input> et <applet> ; il vous permet de fournir un équivalent texte à un objet en décrivant une image.
 
Cette description est rendue accessible aux utilisateurs « déficients visuels », mais aussi lorsque l'image n'est pas affichée par les navigateurs. Ainsi les navigateurs afficheront ou liront par synthèse vocale les informations inscrites dans le code, à la place des images correspondantes.
 
La description ajoutée à l'image peut être lue par les robots d'indexation des moteurs de recherche. Cela permet un meilleur référencement pour une meilleure recherche.
 
Toute image doit posséder un attribut alt. Sans cet attribut les images sont inaccessibles.
 
Exemple de code :
 
<img src="/image/image.jpg" alt="la description de mon image"/>
 
De nombreuses personnes utilisent la recherche image proposée par Google. L'attribut alt permet à Google de bien les indexer, d'où l'importance de bien nommer les images.
 
Ce code écrit comme ci-dessous n'aurait aucun intérêt puisque le texte alternatif ne décrit pas l'image.
 
<img src="/image/image.jpg alt="imagearticle1.jpg"/>
 
ou
 
<img src="/image/image.jpg alt="img3.jpg"/>
 
Mettre en place un texte alternatif à des images paraît être un principe simple, mais sa mise en œuvre n'est pas si évidente. On trouve sur le net différentes sources d'informations qui peuvent parfois être en opposition. La seule source officielle concernant l'utilisation du texte alternatif est disponible sur le site du W3C (Le W3C, World Wide Web Consortium, est un organisme international qui développe des standards pour le Web afin que les gens puissent communiquer efficacement à travers Internet).

4. Les images cliquables.

Les images cliquables ou cartes images ou < MAP > doivent afficher impérativement les zones cliquables. Au survol de la zone cliquable, le pointeur de la souris change d'aspect.
 
Il est bien de les décrire, et donc de mettre un attribut alt. L'attribut, à cette endroit, n'est pas là pour renseigner les zones cliquables mais bien pour décrire l'image en tant que telle.
 
Par exemple, l'image du bandeau d'entête du site http://ergonomie-web.studiovitamine.com possède deux zones cliquables. L'une renvoie vers la page d'accueil et l'autre vers le site de Studio Vitamine l'Agence web.
Image de Les images
Pour définir les deux zones réactives de ce bandeau, on utilise une balise <area /> pour chaque zone qui possède également chacune un attribut alt obligatoire.
 
Pour le logo "Ergonomie web" il sera indiqué dans l'attribut alt : alt="retour sur la page d'accueil du site ergonomie-web.studiovitamine.com" />
 
Et pour le logo "STUDIO Vitamine" : alt="aller sur le site www.studiovitamine.com" />
 
En savoir plus sur le code XHTML associé aux images map sur le site www.le-developpeur-web.com

Création de sites Internet
& référencement naturel

Découvrez les références de l'agence web
STUDIO VITAMINE. Des spécialistes et passionnés
à votre service ! Devis gratuit.
mascotte de l'agence web STUDIO VITAMINE
l'agence web STUDIO VITAMINE