On choisit un format en fonction de son rapport qualité d'image / poids.

Les formats d'images traditionnels sont :

• Photographies : .jpg
• Graphiques : .png ou .gif
• Image animée : .gif

En ce qui concerne le .png, plusieurs modes existent :

• Niveau de gris
• Couleurs RVB
• Couleurs indexées
• Niveau de gris avec couche alpha
• Couleurs RVB avec couche alpha

Des logiciels tels qu'OptiPNG, pngcrush permettent d'optimiser des images bien plus efficacement qu'un "Enregistrer pour le Web" sur Photoshop.

D'autres techniques d'optimisation manuelle consistent à :

• posteriser l'image (réduire la palette de couleurs utilisées)
• fractionner l'image (si toute mon image est en nuance de gris sauf un bout par exemple)
• tramer l'image
• recadrer l'image de façon à ce qu'elle s'aligne avec la grille de 8*8px (spécifique au .jpg)

L'époque où l'on faisait des dégradés avec des images est révolue. CSS suffit à faire des formes simples comme des cœurs, des flèches, le signe infini…

Créer des éléments vides en HTML étant toujours peu recommandé, on limitera cette technique aux éléments existants / contenant déjà du texte, quitte à dissimuler ce dernier.

Cf. https://css-tricks.com/examples/ShapesOfCSS

<canvas> permet de :

• dessiner des formes simples
• insérer du texte
• importer des médias (images, vidéo, audio) pour appliquer des traitements dessus (filtres, animations…)
• définir des interactions

Il fait un remplaçant parfait de flash, et une alternative légère :

• aux écrans de préchargement
• aux arrière-plans à motifs géométriques aléatoires
• aux loaders trop complexes pour être faits en CSS
• aux diagrammes
• aux images des hero pages et aux vidéos full page simples.

Des bibliothèques telles que paper.js et bHive permettent de faciliter la création.

Canvas ne fonctionnant qu'avec du JavaScript, prévoir une alternative no-js.

Cf. "canvas" sur Codepen : https://codepen.io/tag/canvas/ "canvas" sur Codrops : https://tympanus.net/codrops/?s=canvas

Le SVG s'écrit à l'aide d'un langage de balise et peut être aussi bien intégré en ligne que comme un fichier externe.

Le SVG peut être ciblé par du CSS, ce qui le rend modifiable (possibilité de modifier la couleur, d'appliquer un filtre, d'utiliser les transformations CSS sur toute ou partie du SVG) et animable.

Tout document peut être converti en data-uri.

La balise sert pour les images responsives mais pas que.

• Pas de responsive / largeur de conteneur fixe : <img>
• Très petites images (miniatures) : <img>
• Images vectorielles (logos, pictos…) : <svg>, data-uri
• Même image, différentes résolutions : <img srcset="cat.jpg, cat-2X.jpg 2x"> ou <img src="cat.jpg" srcset="cat-360.jpg 360w, cat-640.jpg 640w, cat-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 480px) 100vw, (max-width: 900px) 33vw">
• Image cadrée différemment selon les résolutions : <picture> et <source>
• Favicon : image .ico ou .png
• Image animée : image .gif ou <canvas>