Les images

Les images ajoutent de l’information (un article sur la Joconde avec une photo du tableau) ou de la décoration (une image de fond, des formes abstraites…). Dans les années 2000, le web a commencé à séparer la décoration du contenu grâce aux CSS. Notre HTML servira donc à afficher les images de contenu.

La légende du 72 dpi

On commence par un point important, les dpi sont réservés à l’impression. Si le 300 dpi est d’usage en print, 72 dpi n’a aucun sens pour le web, ce qui compte c’est le nombre de pixels de votre image.
Si votre écran fait 1280 pixels de large, votre image devra faire 1280 pixels si elle occupe toute la largeur.
Premier piège, si vous voulez une qualité maximum sur les écrans Retina, il faudra doubler la taille (2560 px), car en Retina la densité est double.
Second piège, dans Photoshop les corps de typographie sont par défaut en points (pt), si vous utilisez 72 dpi, 1pt = 1px ce qui évite de changer les préférences.

Je parle de Photoshop, mais à l’heure actuelle il n’y a aucun intérêt à faire une maquette web dans celui-ci. Les logiciels de graphisme pour écran sont XD, Sketch, Figma… et ne parlent pas de dpi.

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
technologie débit temps année
Modem 28,8 kbit/s 00:48:32
Modem 56,6 kbit/s 00:24:57 (1999 – 2002)
ADSL 256 kbit/s 00:05:27
ADSL 512 kbit/s 00:02:43 (2003)
ADSL 1 Mbit/s 00:01:23
ADSL 8 Mbit/s 00:00:10 (2004)
LAN 100 Mbit/s 00:00:00 (réseau local ethernet)
Fibre 100 Mbit/s 00:00:00 (2015)
3G 7,2 Mbit/s 00:00:11
4G 80 Mbit/s 00: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

Formats

Les images sont composées de pixels et/ou de vecteurs. Sur le net, on trouvera des jpeg, gif, png, ico, bmp, webp (depuis peu) pour les pixels et svg ou police pour le vectoriel, à titre d’information, on peut mettre une image bitmap dans un svg, mais ce n’est pas un bon usage.

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.

WebP : ce format développé par Google est récent et très performant, mais pas compatible avec tous les navigateurs !

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é…