Les images

La balise image ne possède pas de contenu, seulement un attribut src.

L’attribut src

L’attribut src attend comme valeur une URL correspondant à l’adresse d’un fichier image

Comme pour le lien A, l’URL peut être relative, semi relative ou absolue.

<img src= »assets/images/panda.jpg »/>

<img src= »assets/raton.gif »/>

L’attribut ALT

L’attribut alt est un attribut obligatoire des balises image. Il contient la description détaillée de l’image.

• Décrire l’image aux lecteurs vocaux
• Améliorer la sémantique du site
• Fournir un texte alternatif en cas de problème de téléchargement

<img src= »assets/images/raton.gif » alt= »Un raton laveur qui se gratte la tête »/>

Un navigateur web est capable d’afficher de nombreux types d’images

• .jpg
• .png
• .gif

Ces formats correspondent aux méthodes de compression utilisées pour réduire le poids des images.

Quand les utiliser ?

Le PNG, le GIF et le JPEG correspondent à trois formats de compression différents, qui ont chacun des cas d’utilisation bien spécifiques.

• GIF est utilisé pour des visuels contenant des aplats de couleurs marqués, des formes géométriques ou de la typographie. Et dans certains cas d’animation.
• Le PNG est dans les mêmes cas que GIF, mais lorsque les images possèdent en plus de la transparence
• Le JPEG est utilisé pour les images riches et complexes possédant beaucoup de couleurs, ainsi que des dégradés

Quelques exemples…

• JPEG : photographies, illustrations
• GIF : pictogrammes, typos, logos, séquences animées courtes
• PNG : pictogrammes, typos, logos, images de tous types possédant un niveau de transparence

JPEG signifie Joint Photographic Experts Group. C’est un format mis au point dans les années 80 pour améliorer le fonctionnement du fax.

La compression avec perte

Avec le format JPEG, la diminution du poids est toujours associée à une perte de données : la compression fonctionne par interpolation de couleurs. L’image résultante est une « approximation » de l’image d’origine.

Caractéristiques du format JPEG

• Très gros ratio de compression
• Images en 16 millions de couleurs
• Pas d’animation, ni de transparence

<img src= »assets/raton-100.jpg »/>

Poids de l’image : 142 ko

<img src= »assets/raton-0.jpg »/>

Poids de l’image : 31 ko

Le format GIF a été créé dans les années 80 pour permettre de télécharger des images sur Internet plus rapidement

Une compression sans perte, mais limitée

La diminution de poids des images GIF est dû à un algorithme qui enregistre les occurrences de couleurs dans un dictionnaire. C’est la technique de stockage des données qui diminue le poids, et non leur approximation, comme avec JPEG.

Caractéristiques du format GIF

• Compression sans perte
• Autorise les pixels transparents
• Possibilité d’embarquer des animations
• Entrelaçage
• Limité à 256 couleurs
• Pas de couche alpha

Avec une photographie

<img src= »assets/landscape.jpg »/>

Compression JPEG. Poids de l’image : 136 ko

<img src= »assets/landscape.gif »/>

Compression GIF. Poids de l’image : 94 ko

On constate des problèmes de dégradé !

Avec un logo

<img src= »assets/logo.jpg »/>

Poids de l’image : 26 ko

<img src= »assets/logo.gif »/>

Poids de l’image : 10 ko

PNG signifie Portable Network Graphics . C’est un format mis au point dans le milieu des années 90 pour prendre le relais du GIF et offrir un solution de remplacement libre.

Pas de perte de données avec PNG

Comme pour GIF, le système de compression est basé sur un dictionnaire d’occurences qui références les couleurs présentes en plus grand nombre. PNG présente cependant des différences notables avec GIF.

Caractéristiques du format PNG

• Images en 16 millions de couleurs, à partir du format PNG32
• Autorise les pixels transparents
• Possède une couche alpha qui définit des niveaux de transparence de 0 à 100
• Pas d’animation possible

<img src= »assets/cube.png »/>

Poids de l’image : 42 ko

<img src= »assets/cube.gif »/>

Poids de l’image : 12 ko

SVG signifie Scalable Vector Graphics . C’est un format dérivé du XML mis au point au début des années 2000 par le W3C.

Le format vectoriel

Le SVG n’est pas un algorithme de compression. Il se base sur des formes vectorielles définies à l’intérieur de balises XML.

Caractéristiques du format SVG

• Images redimensionnables à l’infini
• Autorise la transparence
• Animations possibles
• Modifications possibles avec CSS
• Intéractivité avec JavaScript

Quand utiliser SVG ?

• Logos
• Icônes
• Formes basiques ou géométriques possédant des aplats de couleurs ou des dégradés
• Cartes intéractives
• Texte inclus dans une image
• Flat design

Des exemples

Des formes géométriques basiques

<img src= »assets/forme.svg »/>

Le SVG est très utilisé pour les cartes

<img src= »assets/carte.svg »/>