Aller au contenu

Cours 4

Formats d’image

Il existe essentiellement deux types d’images utilisés en Web : les images vectorielles et les images matricielles (ou bitmap en anglais).

Vectoriel

Les images vectorielles sont construites à partir de vecteurs mathématiques. Ce type d’image est parfois un peu plus exigeant à charger pour le processeur, mais il a l’avantage de rester lisse lorsqu'on l'étire ou on l'agrandit.

Pour créer ou modifier une image vectorielle, on utilise des logiciels de dessin vectoriel, comme :

Le format utilisé en Web est le .svg (Scalable Vector Graphics).

Matriciel

Les images matricielles, quant à elles, sont composées de pixels. C’est comme un tableau dans lequel chaque case représente un pixel.

Lorsqu’on agrandit ce type d'image, on perd en qualité, car les pixels deviennent visibles. C’est ce qu’on appelle la pixellisation 😡.

Les formats courants sont :

Format Description
.jpg ou .jpeg Compression avec perte. Idéal pour les photos. Pas de transparence.
.png Compression sans perte. Supporte la transparence alpha.
.gif 256 couleurs maximum. Supporte l’animation et la transparence binaire.
.webp / .avif Format moderne au poids optimisé. Très léger.

Ces formats sont généralement produits avec des outils comme :

Exercice éclair

« Observe les deux images ci-dessous. Peux-tu identifier laquelle est une image vectorielle et laquelle est matricielle ? »

A

B

Types de transparence

Il existe deux types de transparence : alpha et binaire.

  • La transparence binaire signifie qu’un pixel est soit totalement opaque, soit totalement transparent. Il n’y a pas d'entre deux.
  • La transparence alpha permet d'avoir des pixels partiellement transparents.

Voici un exemple de la même image enregistrée en .png et en .gif :

Transparence alpha (png)

Transparence binaire (gif)

La balise <img> et ses attributs

Syntaxe de base

<img src="chaton.jpg" alt="Un petit chat mignon" width="300" height="200" title="Ceci est un chaton trop mignon">

Attributs principaux

  • src : chemin de l’image
  • alt : description pour l’accessibilité (obligatoire)
  • title : info-bulle au survol
  • width / height : dimensions de l’image

✅ Bonnes pratiques

  • Toujours inclure alt
  • Redimensionner l’image avant l’import si nécessaire
  • Éviter les images trop lourdes ou disproportionnées

<figure> et <figcaption>

Permet de regrouper une image et sa légende de manière sémantique :

<figure>
  <img src="lune.jpg" alt="La Lune vue de la Terre">
  <figcaption>La Lune, notre unique satellite naturel.</figcaption>
</figure>

Intégration de médias externes avec <iframe>

Utilisation de la balise <iframe>

Permet d’intégrer du contenu externe, comme :

  • Vidéos YouTube ou Vimeo
  • Cartes interactives Google Maps

Exemples :

<!-- Vidéo YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>

<!-- Carte Google Maps -->
<iframe 
  src="https://www.google.com/maps/embed?pb=..." 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen>
</iframe>

Conseils

  • Adapter les dimensions à votre mise en page
  • Toujours tester le lien intégré
  • S’assurer que le contenu soit pertinent et bien intégré

Citations en HTML

Balise Usage
<q> Courte citation à l’intérieur d’un paragraphe
<blockquote> Citation longue en bloc
<cite> Source d’une œuvre ou citation

Exemples :

<p>Comme disait Socrate : <q>Connais-toi toi-même</q>.</p>

<blockquote>
  <p>L’art de la citation est l’art de ceux qui ne savent pas réfléchir par eux-mêmes.</p>
  <cite>— Voltaire</cite>
</blockquote>