Chargement...

Les images en HTML


Les formats d'images: JPG et PNG

Il existe plusieurs formats sur le web, nous étudirons les plus connus : PNG et JPG. Pour faire simple PNG est optimisé pour des petits formats comme des logos alors que JPG sera plus intéressant pour les grosses images comme les photos.

Pour une même qualité d'image un JPG peut être trois fois plus léger qu'un PNG, alors que pour d'autres types d'images, comme un simple dégradé le PNG sera plus léger ; de plus le PNG a tendance à mieux respecter la qualité de l'image, les JPG sont souvent pixélisé lorsqu'ils sont trop compressé.

A noter aussi que le PNG gère les transparences.

Insérer l'image du même projet

<img src="/images/html.png" />
Résultat:
HTML 5

Insérer l'image d'un site externe

<img src="http://www.egypte-antique.com/egypte.jpg" />
Résultat:

Ajouter un titre à l'image

Pour afficher un texte au survol de l'image, il suffit d'indiquer le texte souhaiter dans l'attribut title. Il est également intéressant de remplir l'attribut alt qui permet d'afficher un texte si le navigateur n'arrive pas à charger l'image.
<img
alt="Photo egypte ancienne"
title="Photo Egypte Ancienne"
src="http://www.egypte-antique.com/egypte.jpg" />
Résultat:


UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW