On définit la taille d’écran en pouces (inches), suivant la longueur de sa diagonale : 14", 15", 17", 19", 20", 21", 26". Un pouce est égal à environ 2,54 cm. Donc en théorie, un écran de 21" présente une diagonale de 53 centimètres. Dans la réalité, les chiffres donnés par les constructeurs sont légèrement supérieurs à ce que les écrans peuvent réellement afficher.

En fonction de la quantité de mémoire de la carte vidéo et de la finesse d’affichage (ou «pitch») un écran pourra afficher un certain nombre de pixels. Ainsi, un écran de 17 pouces affiche 1024 x 768 pixels (ou moins) tandis qu'un écran de 26 pouces affiche 1920 x 1200 pixels (ou moins). La norme dite "full HD" actuelle correspond à 1920 x 1080 pixels.

Pour présenter vos photographies sur votre site Internet il est nécessaire de tenir compte de la taille en pouces de l'écran sur laquelle ces images vont apparaître et de l'espace en pixels disponible sur la page web. Pour que la plupart de vos visiteurs puissent visionner la surface totale d'une image sur votre page web, dans le sens horizontal comme dans le sens vertical, il est d'abord important que votre page soit conçue pour la plupart des écrans (1). Les plus petits écrans ayant quasiment disparus du marché, la résolution standard actuelle est supérieure à 1024 x 768 pixels (ce qui correspond à un 17 pouces). Cela signifie que vos images doivent être de dimensions inférieures à 1024 pixels en largeur et 768 pixels en hauteur. En réalité, il vous faudra aussi tenir compte du design du site (de l'espace accordé par ce design aux images) et des espaces réservés aux fonctionnalités de votre navigateur (menus, barre d'adresse, barres de navigation...). Le site sur lequel vous surfez actuellement est conçu pour tenir compte de cette résolution de 1024 x 768 pixels alors que dans sa version antérieure, il était élaboré pour une résolution de 800 x 600 pixels.

La résolution d’écran : 72 dpi !

Pour un écran, on considère souvent que la résolution d'un Apple est de 72 dpi tandis que celle d’un PC serait de 96 dpi. En fait seul l’affichage du texte et des polices écrans est concerné par cette différence de résolution et un texte défini dans une page web sur PC apparaîtra plus petit sur un écran Apple.

Pour l’affichage des images, seule la taille en pixels compte.

Un navigateur (Firefox, Chrome, Internet Explorer, Safari...) ne prend en considération que le nombre de pixels à afficher. Ainsi, un fichier image de 640 x 480 pixels, qu’il soit à 72, 96 ou 150 dpi sera affiché en 640 x 480 pixels dans n'importe quel navigateur. Les navigateurs interprètent les images comme si elles faisaient dans tous les cas 72 dpi. Inutile donc de proposer en ligne des images à 300 dpi en espérant une meilleure qualité d'affichage. Votre image ne paraîtra pas plus "belle" mais sera en revanche plus volumineuse et le temps de chargement s'en trouvera inutilement allongé. Qui plus est, ce faisant, vous offrez à toute personne mal intentionnée la possibilité de télécharger cette image et de l'utiliser pour le print (l'impression papier dans un prospectus publicitaire par exemple).

En conclusion : Préparez vos images pour l'espace qui leur est réservé sur la page web. Sur le bandeau supérieur de mon site, les photos sont toutes redimensionnées à 910 x 369 pixels en 72 dpi soit les dimensions du cadre dans lequel elles s'inscrivent. Ne présentez jamais d'images en haute définition (exemple : 3000 x 2000 pixels à 300 dpi) sauf cas particuliers : Présentation d'une image destinée à l'impression, posters à télécharger...

Quant au choix du profil colorimétrique, il est conseillé d'enregistrer vos images au mode sRGB (2).


Notes :

1. Voir sur le site W3School
2. En réalité, les navigateurs web ne sont pas tous égaux dans la gestion correcte des couleurs. A ce petit jeu, Firefox a un avantage considérable sur la concurrence : il gère parfaitement les couleurs sous différents modes. Pour vous en convaincre, il vous suffit de visiter ces deux pages (en anglais).
   http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html
   http://www.gballard.net/firefox/