Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. HTML5 et CSS3
  3. Les images
Extrait - HTML5 et CSS3 Maîtrisez les standards de la création de sites web (2e édition)
Extraits du livre
HTML5 et CSS3 Maîtrisez les standards de la création de sites web (2e édition) Revenir à la page d'achat du livre

Les images

Bien exploiter les images

Dans beaucoup de sites, les médias occupent de plus en plus de place. Ces médias, ces images doivent être choisis avec soin et optimisés au mieux pour un chargement rapide sur tous les supports actuels : écran d’ordinateur, de tablette et de smartphone. Il y a donc un travail important de la part des graphistes pour choisir la bonne image, définir ses dimensions en fonction des divers supports et déterminer un rapport compression/poids adéquat.

Dans les pages web, les images sont des contenus « embarqués », car elles ne sont pas directement décrites dans le contenu du fichier HTML. Les fichiers des images sont usuellement placés dans un dossier spécifique dans le dossier du site et elles sont insérées dans la page web en indiquant leur chemin d’accès. 

Comprendre les formats de compression

1. Compresser les images

Lorsque vous prenez une photo, il n’est guère possible de la diffuser directement sur Internet sans une réduction de ses dimensions et sans une compression. Les images brutes de prise de vue sont toujours trop grandes et trop lourdes pour être publiées sur Internet. Il faut réduire leur dimension et les compresser pour réduire leur poids.

Actuellement, il existe trois principaux formats de compression d’image : GIF, JPEG et PNG. Cette compression se fait avec des logiciels dédiés, suite à des traitements pour retoucher les photos. Il existe d’autres formats de compression, mais qui ne sont pas encore totalement pris en charge par les navigateurs. Citons les formats JPEG 2000 et WebP de Google.

2. Le format GIF

Le format GIF, pour Graphics Interchange Format, est un format de compression d’images conçu en 1987 par Compuserve et il n’est pas totalement libre. Son extension est .gif. Avec ce format, les images utilisent 256 couleurs au maximum et ne proposent qu’un seul niveau de transparence. Les pixels sont donc soit opaques, soit transparents, ce qui implique des effets d’escalier très disgracieux sur les bordures. Si l’image initiale possède moins de 256 couleurs, ce format est non destructif, s’il y en a plus de 256, la compression est destructive.

Le format GIF est donc réservé...

Insérer des images avec l’élément <img>

1. L’utilisation des images

L’élément <img> est fait pour insérer des images d’illustration directement liées au contenu rédactionnel. D’un point de vue sémantique, cet élément n’est pas fait pour appliquer une image de fond à un en-tête ou toute autre zone d’affichage dans la page. Pour cela, il faut utiliser une règle CSS.

2. L’attribut src

Le premier attribut quasiment obligatoire est src. Cet attribut permet d’indiquer le chemin d’accès à l’image qui doit être affichée. Le chemin d’accès s’indique usuellement relativement à la page contenant l’élément <img>.

Voici quelques exemples :

  • <img src="mon-image.png"> : l’image se trouve dans le même dossier que la page HTML.

  • <img src="images/mon-image.png"> : l’image se trouve dans un sous-dossier nommé images, placé dans le dossier contenant la page HTML. 

  • <img src="../mon-image.png"> : l’image se trouve dans le dossier parent du dossier contenant la page HTML.

Mais vous pouvez aussi choisir d’afficher une image déjà publiée sur le Web, avec un chemin absolu : <img src="http://www.mon-site.org/images/mon-image.png">. C’est une solution qu’il faut utiliser avec parcimonie, il faut être sûr des droits d’auteur et il se peut que l’image vienne à être supprimée du site dans laquelle elle se trouve.

3. L’attribut alt

L’attribut alt permet de renseigner le texte alternatif à...

Insérer des illustrations avec l’élément <figure>

1. L’utilisation des illustrations

Les images permettent d’illustrer directement un contenu et les deux sont intimement liés. Les illustrations peuvent se suffire à elles-mêmes et n’ont pas besoin d’un texte rédactionnel pour être compréhensibles. De plus, la position de l’illustration peut être indépendante vis-à-vis du texte. Attention, le contenu d’une illustration peut être une ou des images photographiques, mais cela peut être aussi un dessin, une vidéo, un tableau ou un long extrait de code. Voilà les différences sémantiques entre l’utilisation d’une image et d’une illustration. 

2. L’élément <figure>

C’est l’élément <figure> qui permet d’insérer une illustration dans votre page web. Cet élément possède une balise d’ouverture et une balise de fermeture.

<figure> 
   ... 
</figure> 

L’élément <figure> est de type block, voici ses paramètres d’affichage par défaut :

figure { 
     display: block; 
     margin-top: 1em; 
     margin-bottom: 1em; 
     margin-left: 40px; 
 ...