Les images

Les images ajoutent de l’information ou de la décoration, dans les années 2000, le web a commencé à séparer la décoration du contenu. Notre HTML servira donc à afficher les images de contenu.

Nom, poids et formats

Le nom de votre image doit respecter des règles imposées par le duo serveur et navigateur. Pour faire court, pas d’accent, d’apostrophe, pas d’espaces et par habitude tout en minuscule. Si vous avez des espaces, on peut les remplacer par des tirets. projet-affiche_01.jpg
Chaque image peut peser de quelques kilooctets à plusieurs mégaoctets, sur le site d’Apple, on trouve des images d’un mégaoctet, c’est le maximum raisonnable pour un site à large audience. Pour un page de 10 mégaoctets voici le temps théorique. J’ai ajouté les années où j’ai profité de cette technologie en tant que particulier.

Chargement d’une page de 10 Mo
technologiedébittempsannée
Modem28,8 kbit/s00:48:32
Modem56,6 kbit/s00:24:57(1999 – 2002)
ADSL256 kbit/s00:05:27
ADSL512 kbit/s00:02:43(2003)
ADSL1 Mbit/s00:01:23
ADSL8 Mbit/s00:00:10(2004)
LAN100 Mbit/s00:00:00(réseau local ethernet)
Fibre100 Mbit/s00:00:00(2015)
3G7,2 Mbit/s00:00:11
4G80 Mbit/s00:00:01

Pour être plus complet, 10 Mo représentent :

  • 20 romans
  • 1 minute de musique sans compression (qualité CD)
  • 10 minutes de musique en mp3
  • le RAW (.nef) d’une photo de 12 MP
  • 38 secondes de YouTube HD 1080/li>

Formats

Les images sont composées de pixels et/ou de vecteurs. Sur le net, on trouvera des jpeg, gif, png, png ico, bmp, bmp ico pour les pixels et svg ou police pour le vectoriel, à titre d’information, on peut mettre une image bitmap dans un svg.

Jpeg/jpg : ce format est très sollicité pour les photos, il n’aime pas les aplats (surtout dans les tons rouges), sa compression est destructive avec un niveau de compression allant de 0 à 100, une compression trop forte entraine des artefacts. Si vous compressez plusieurs fois la même image, la dégradation est visible, mieux vaut partir d’un fichier source et exporter qu’une seule fois.En général 80 pour les images et 30 pour les images à taille double en retina donnent de bons résultats. Attention à mettre vos images en rvb, Safari est capable de lire un jpeg en cmjn !

Gif : Le gif réduit le nombre de couleurs d’une image à une palette entre 2 à 256 tons. Cela fonctionne bien sur un logo, un aplat, une trame. Il offre aussi la possibilité d’avoir des pixels transparents et de créer des séquences animées. La transparence du gif est brute et sans nuance, attention aux détourages pixelisés.

Png : Le png permet des résultats sans pertes. Il existe en version 8 bits avec une palette de 256 couleurs, en 16 bits pour toutes les couleurs RVB et en 24 bits, toutes les couleurs et une transparence avec différentes nuances. Idéal pour le graphiste, mais pas toujours adapté pour le web.

Svg : Le svg entre dans une catégorie autre, il s’agit d’un format vectoriel, il permet d’avoir le meilleur résultat à toutes les échelles et sur les écrans Retina. Il n’est pas compatible avec Internet Explorer 8, navigateur sans support de Microsoft depuis le 8 avril 2014. On peut donc l’utiliser dans la plupart des projets. Attention, si vous vectorisez vos photos, le poids devient vite contraignant et inadapté.

En code

<img src="une_photo.jpg" alt="une description obligatoire"/>
<img src="un_logo.svg" alt="une description obligatoire"/>

Comment choisir

Selon les exigences du projet ou personnelles, on fera des tests ou on appliquera un réglage global. Si vous voulez le meilleur poids, il existe des logiciels pour optimiser des manières poussées les compressions : ImageOptim https://imageoptim.com/mac.

Le futur

© David Horvitz
© David Horvitz

L’obsession du poids, des performances et la multiplication des écrans en haute résolution ont poussé le web à trouver une solution plus moderne. La syntaxe est complexe ; on ajoute plusieurs sources d’images srcset et un contexte avec sizes. C’est efficace, mais on perd une certaine simplicité du HTML. Néanmoins, certains CMS automatisent cette tâche.

<img src="images/poster.jpg" 
sizes="(max-width: 40em) 100vw, 50vw" 
srcset="images/poster.jpg 200w, images/poster-2x.jpg 400w, images/poster-hd.jpg 600w">

à retenir

Internet est lent à l’école, sur mobile et ailleurs, jamais assez rapide pour les images. Pour un usage extrême une photo peut faire 2950 pixels de large (chez Apple) pour un poids de 390 ko (image du lancement de leur dernier portable). Il s’agit d’une image pour écran retina ultra net sur un écran en résolution 1400 sur 900.
Pour fournir l’image bitmap la plus adaptée à votre mise en page, si celle-ci s’affiche à un maximum de 320px de large, vous devez fournir une image à 640px, le double du maximum, même s’il existe des écrans 3x sur smartphone, au-delà du double le compromis n’est pas intéressant.

le juste poids
le juste poids

Astuces

Jpeg et 2x

Voici deux images jpeg superposées, en passant votre souris dessus, vous affichez une image deux fois plus grande (pour retina) mais quatre fois plus compressée (qualité 20 contre 80).

jpeg qualité 20jpeg qualité 80

Pour aller plus loin, j’ai optimisé les jpeg avec ImageOptim.

Images plus petites, mais poids plus grands

Sur ce site, les illustrations sont souvent en PNG avec une palette de couleurs très réduite (4 gris), on obtient un poids autour de 15 ko pour une image assez grande, mais paradoxalement WordPress (le moteur de ce site) va créer des images redimensionnées en ignorant la palette. L’effet gain de poids est inversé…