Principes du web Formats d’images

Voici les formats d’images reconnus sur le Web

Formats matriciels#

JPEG#

Affiche plusieurs millions de couleurs
Chargement progressif possible
Pas de transparence
Pas d’animation
Compression possible (par dégradation de la qualité)

Idéal pour les photos

GIF#

Affiche 256 couleurs maximum
Gère la transparence (1 niveau)
Gère les animations
Compression possible (par suppression de couleurs, etc.)

Encore utilisé pour les animations

PNG#

Deux types : PNG8 (similaire à GIF), PNG24 (similaire à JPEG)
Affiche plusieurs millions de couleurs
Gère la transparence (256 niveaux)
Gère les animations (supporté depuis peu dans tous les navigateurs)
Compression possible

Le format le plus utilisé pour la transparence.

Webp#

Format créé spécifiquement pour le web, par Google
Alternative aux autres formats
Pas encore supporté partout

Outils#

Pour compresser le poids des images, voici quelques outils :

Formats vectoriels#

SVG#

SVG est un langage basé sur XML, qui permet de dessiner des objets vectoriels. Il est notamment très utile pour régler les problèmes de redimensionnement, puisque insensible aux zooms. Très utile donc pour les icones.

Un exemple de code SVG

<svg>
    <circle cx="50" cy="50" r="40" />
</svg>

circle {
    fill: red;
    stroke: green;
    stroke-width: 5px;
}

Étant basé sur XML, le SVG peut être intégré directement dans un document HTML. Il peut aussi tout simplement être une image au format .svg.

Voir un exemple simple et une démo plus avancée basé sur la librairie Snap.SVG

Pour optimiser un SVG :

SVGOMG