Avant de parler de trucs que je gère moins, je vais tenter d’expliquer ici ce que j’ai compris des images numériques et ce qu’il faut retenir pour publier des illustrations adaptées aux sites web.

Définition / Résolution.

Pour expliquer ce qu’est la définition d’une image je m’empresse de faire des exemples textiles: une image, c’est comme un tapis…

Sur les deux tissus ci-dessus j’ai utilisé le même nombre de fils, pour créer le même nombre de points: ces deux carrés ont la même définition, de 20 points * 20 points.
Toutes les images numériques sont ainsi constituées de points -appelés pixels-, un peu comme Toute la matière est constituée d’atomes. Ils sont les plus petits conteneurs d’information (ici de couleurs).
La définition d’une image, c’est sa dimension exprimée en pixels: largeur * hauteur.

Mais ces points n’ont pas forcément la même taille: alors qu’à gauche il s’agit d’une laine épaisse, à droite on voit que les fils du tissu sont plus fins…
Dans mon exemple, si je découpe une surface identique de mes deux tissus, j’obtiens deux rendus très différents: dans ce même espace on fait tenir moins de points de laine que de points de fil. Ces tissus n’ont pas la même résolution.

Et si je voulais reproduire le même dessin avec ces deux trames, j’obtiendrais soit un tissu plus grand avec la laine qu’avec le fil, soit deux toiles de même format mais dont l’une contiendra plus de points que l’autre:

Dans une image de même dimensions en cm, en pouces ou en pieds de nez, une meilleure résolution permettra de fournir plus d’informations, de finesse, de détails aux couleurs de l’image.

Par exemple, une image carrée de 2 pouces (soit environ 5 cm de côté) avec une résolution de 72 dpi contient 20 736 pixels (144 pixels de large x 144 pixels de haut = 20 736).
Une image de même taille à 300 dpi contient un total de 360 000 pixels.

La résolution d’une image définit la taille de son plus petit point en le ramenant à une mesure classique: elle s’exprime en points par pouce (dpi) ou pixels par pouce (ppi), mais peut aussi s’écrire en pixels par cm.

Il ne faut pas oublier que cette dimension des images ne date pas du web, mais bien du monde de l’imprimé: les machines peuvent ainsi atteindre de très hautes résolutions d’impression.
Le standard  pour une bonne impression des images se situe à 300 pixels par pouces ou 300dpi.

Nos moutons

Pour le monde du web  il existe un standard de résolution qui garantit qu’un pixel aura la même dimension sur tous les écrans: 72 pixels par pouces, noté 72 dpi. Les images web ne seront jamais plus fouillées que cela.

Les pixels d’un écran sont carrés, le choix de leur taille se réfère à la typographie et correspond à la plus petite parcelle perceptible – lisible – signifiante pour l’humain (le point pica).
L’affichage d’une image par un navigateur se fera toujours à cette dimension de pixel.

C’est aussi à cette norme que vous recevez les photos de vos appareils numériques. Pour les imprimer en bonne qualité, il suffit d’augmenter leur résolution, ce qui aura pour effet de diminuer leurs dimensions. C’est ce qui se passe quand vous faites développer vos photos, on appelle cette opération un ré-échantillonnage.

• Un appareil de 1MegaPixels (1 Million de pixels) fournira ainsi des images de 800 px*600 px d’une taille d’environ 28 *21 cm à l’écran mais imprimables seulement en 6,77*5 cm à 300 dpi.
• Un appareil de 5MegaPixels fournira des images de 4000px*3000px d’une taille écran d’environ 1,40 sur 1,05 m à 72 dpi, que vous pourrez imprimer en 33,8*25.4 cm à 300 dpi.
• Un appareil de 8MegaPixels fournira des images de 6400 px*4800 px d’une taille écran d’environ 2,25 m sur 1 m70, et vous pourrez en tirer de bonnes épreuves jusqu’à 55*44 cm environ à 300 dpi.
• …etc…

L’avantage des MegaPixels pour publier sur écran, ce n’est pas d’afficher d’immenses images mais bien de pouvoir beaucoup  zoomer / recadrer dans nos images avant de perdre en netteté:

Ce billet a été publié le Mercredi, novembre 11th, 2009 à 3:53, classé dans Restes du Monde du Web. Suivez les réactions à ce billet via ce fil RSS RSS 2.0. Réagissez ici, ou poursuivez la discussion sur votre site.