Images à 196 dpi ?

Hello,

jlba a écrit :
On avait l'habitude de préparer les images en 96 dpi, adapté à la résolution des écrans bureaux.

Oui, mais ça fait plus de 10 ans que c'est une mauvaise habitude (et les écrans HiDPI n'y changent rien)

Un (vieil) article incontournable sur le sujet : https://www.lesintegristes.net/2011/05/06/web-resolution-72dpi/

jlba a écrit :
Dans quelle résolution faut-il désormais prévoir ses images ? Plusieurs en fonction du device ou une intermédiaire genre 192 dpi (le double) ?

- La "résolution" (nombre de pixels par surface) n'a strictement aucune incidence sur le Web car quel que soit le device, l'image sera calculée en pixel x pixel
- La "définition" (taille de l'image en pixel x pixel) est beaucoup plus pertinente.
- Les notions de Viewport (taille de fenêtre utilisable en web) et de "pixel-ratio" (rapport entre les vrais pixels et les pixels web) sont encore plus pertinents

Exemples :
- un iPhone 3 (non rétina) a une largeur physique de 320px, une largeur web (Viewport) de 320px et un pixel-ratio de 1 (1 pixel web vaut 1 vrai pixel). Donc la largeur d'image parfaite pour couvrir toute la surface est de 320px
- un iPhone 4 (rétina) a une largeur physique de 640px, une largeur web (Viewport) de 320px et un pixel-ratio de 2 (1 pixel web vaut 2 vrais pixels). La largeur d'image parfaite pour couvrir toute la surface est de 320px aussi mais elle sera floue en raison du pixel-ratio. Il faudra donc une image de 640px "rétrécie artificiellement" à 320px pour conserver sa netteté.
- De nos jours, certains devices ont des pixel-ratio supérieur à 4, ce qui signifie que la largeur idéale des images devrait être 4x plus grande que la largeur CSS du device (qui vaut généralement entre 360 et 420px).

Dans tous les cas, c'est une question de compromis : tu ne pourras pas satisfaire tous les devices... tout en restant performant (car des images de taille x4, sont souvent très lourdes également).

Un peu de lecture :
- https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html
- https://developer.mozilla.org/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

Bonne lecture et bon courage !
Modifié par Raphael (22 Jul 2021 - 11:25)