Le mythe de DPI
La taille d'une image dans une mise en page de site Web est importante. Du bon alignement à l'obtention de la bonne quantité d'espace blanc, il est essentiel de dimensionner correctement les photos et les graphiques pour créer une apparence équilibrée.
Les images sur le Web sont mesurées en pixels . Pourtant, beaucoup de gens passent par la peine de fixer leurs images à 72 points par pouce (
L’idée fausse concernant la résolution des images numériques à destination du Web est qu’elles doivent respecter un certain nombre de points par pouce.
En impression, les pixels par pouce et les points par pouce ont un impact sur la taille d'une image sur une page. DPI ne s'applique pas à la mise en page sur le Web.
Lorsque quelqu'un convertit une image en 72 DPI , ils ajoutent une étape supplémentaire sans avantage. Les pages Web sont mesurées en pixels et non en unités réelles telles que les pouces.
Lorsqu'une personne vous demande une image Web de deux pouces de largeur, par exemple, elle estime comment elle apparaîtra sur son propre moniteur. Sans modifier les dimensions en pixels de l'image, cette image apparaîtrait plus grande ou plus petite sur différents moniteurs et aurait même un aspect différent sur le même moniteur avec un paramètre de résolution différent.
La taille de pixel dépend du contexte
Un pixel (qui est l'abréviation de "élément d'image") est la plus petite unité de mesure sur une grille affichant une image numérique. Le DPI mesure la taille de ces pixels, ou points, lorsqu'ils sont imprimés.
L'image ci-dessous est affichée en différents DPI .
36 DPI
150 DPI
3,096 DPI
Téléchargez-les et ouvrez-les dans un éditeur d'images pour voir par vous-même. Tous trois se ressemblent car ils ont été redimensionnés, pas ré-échantillonnés.
Redimensionnement des tailles de pixels; Rééchantillonnage Modifications du nombre de pixels
Il y a deux façons d'agrandir une image: ajouter plus de pixels ou agrandir les pixels. De même, vous pouvez réduire la taille d'une image en rognant les pixels ou en réduisant les pixels. Mais rétrécir et se raser sont deux processus différents.
Ci-dessus, le redimensionnement d' une image change la taille de ses pixels, pas son nombre de pixels. Nous n'augmentons ni ne diminuons le nombre de pixels, nous ne modifions que la taille de ces pixels lors de l'impression. Il s'agit d'une relation inverse: les images avec des pixels plus grands auront une densité de pixels inférieure (moins de pixels dans le même nombre de pouces) lors de l'impression.
Ci-dessus, le rééchantillonnage modifie la taille de l'image en augmentant ou en diminuant son nombre de pixels. Les images avec plus de pixels contiendront plus d'informations et produiront souvent des graphiques plus riches.
La conception Web concerne le ré-échantillonnage, et non le redimensionnement, car chaque pixel d'une page Web aura toujours la même taille. Une page Web de 800 pixels de large peut accueillir des images d'une largeur maximale de 800 pixels. Rendre chaque pixel plus large ne change pas le fait que la mise en page ne peut en contenir que 800.
Vous ne pouvez pas rendre une image plus grande à l'écran en redimensionnant ses pixels car chaque pixel du même écran aura toujours la même taille.
Redimensionnement et rééchantillonnage dans Photoshop
La zone Taille d'image de Photoshop ( Image, Taille d'image ) contrôle à la fois le redimensionnement et le rééchantillonnage des images.
La case à cocher "Rééchantillonner" modifie le nombre de pixels qui entrent littéralement dans un pouce linéaire en pixels par pouce. Si nous désactivons le rééchantillonnage, le seul moyen de modifier la taille de l'image serait d'agrandir ses pixels pour l'impression.
Si la case de rééchantillonnage n'est pas cochée, la modification de la case "résolution" modifierait la taille physique de l'image lors de l'impression, mais pas son nombre de pixels. Lorsqu'elle est imprimée, une image apparaît plus grande ou plus petite. Sur une page Web, la taille serait la même.
Une expérience
Déterminer si le DPI est important dans les mises en page Web peut être réalisé par une petite expérience. Si nous modifions une image de 300 x 100 pixels à 72 DPI à 300 x 100 pixels à 144 DPI, combien de pixels aurions-nous?
- Faire une image de 300 pixels de large et 100 pixels de haut, à 72 DPI .
- Faisons quelques calculs. Combien y aurait-il de pixels?
- Maintenant, redimensionnez l'image à 300 x 100 pixels à 144 DPI .
- Faisons un peu plus de maths. Combien de pixels est-ce?
Les réponses sont:
- 300 x 100 = 30 000
- 300 x 100 est toujours 30 000
Pixels par pouce à l'écran
Le nombre de pixels par pouce est toujours pertinent en ligne, mais les paramètres DPI ne modifient pas l'affichage d'une image.
Les écrans d'ordinateur peuvent être physiquement mesurés en pouces et chacun affiche un certain nombre de pixels. Par exemple, supposons qu'un moniteur 19 "affiche 1280 x 1024 pixels. L'utilisateur pourrait le changer pour afficher 1600 x 1200 pixels, augmentant ainsi son PPI (c.-à-d. En ajoutant plus de pixels dans le même nombre de pouces). La différence importante dans l'impression est que vous pouvez contrôler les pixels par pouce d'une image.
Vous pouvez essayer cela sur la plupart des ordinateurs modernes. Sur un Mac, accédez au menu Apple, Préférences Système , puis cliquez sur "Affichages" pour voir les différentes résolutions auxquelles vous pouvez configurer votre moniteur. Pour Windows, cliquez avec le bouton droit sur le bureau et sélectionnez «Personnaliser», puis choisissez «Paramètres d'affichage». Modifiez la résolution de l'écran (nombre de pixels) et observez la taille ou la taille des éléments du bureau Mac ou PC.
De toute évidence, votre moniteur ne change pas de taille. Mais si vous tenez une règle à l'écran, vous verrez que la taille des icônes et des fenêtres est inversement proportionnelle au nombre de pixels affichés. Par exemple, un ordinateur portable de 13 ", un moniteur CRT de 17" et un écran plat de 21 " peuvent tous présenter un bureau qui mesure 1024 x 768 pixels. Plus de pixels signifient des icônes plus petites; moins de pixels signifient des icônes plus grandes. Plus le nombre de pixels dans le même moniteur vous donne une densité de pixels plus élevée. moins de pixels est inférieur.
La différence devient plus évidente avec d'autres types d'écrans:
- Un panneau d'affichage numérique mesurant 47 x 12 pieds pourrait n'utiliser que 888 x 240 pixels (environ 1,6 PPI).
- Un écran d'iPhone aujourd'hui mesure 2 x 3 pouces et peut contenir 320 x 480 pixels (environ 160 PPI) .
Un seul fichier PNG mesurant 100 x 100 pixels serait compatible à la fois avec l’affichage 888 x 240 et l’iPhone 320 x 480. Mais il semblerait beaucoup plus grand sur le panneau d'affichage car les pixels de la carte sont 100 fois plus grands que ceux de l'iPhone (1,6 contre 160).
L'illustration ci-dessous montre deux périphériques avec des dimensions de pixel différentes.
La même image est affichée sur deux écrans différents. Les différences entre les PPI de chaque écran rendent l'image sur l'écran de droite plus grande, même si elle contient moins de pixels.
Vous pouvez tester cela vous-même:
- Créez un fichier JPG qui mesure 960 x 100 pixels, quelle que soit la densité de pixel.
- Mesurez à la main avec une règle.
- Regardez la même image sur un ordinateur avec un moniteur plus grand ou plus petit. Par exemple, si vous avez créé l'image sur un écran de 20 ", testez-la sur un ordinateur portable de 13".
- Imprimez le même nombre de pixels à différentes densités de pixels pour voir différentes tailles de papier.
Le résultat est que cette image aura le même nombre de pixels mais une largeur différente en pouces. La mise en page du site Web apparaîtrait dans différentes tailles, malgré un code identique. (Pour un cas extrême, regardez la page entière sur un iPhone; 960 pixels sont ajustés à trois pouces ou moins, sans que le fichier lui-même soit modifié.)
Pourquoi 72 est important
De nombreux formats de fichiers, y compris JPG, TIF et PSD, stockent le paramètre de densité de pixels d'une image. Si vous enregistrez un fichier JPG à 200 pixels / pouce, il restera à 200.
D'autres formats, y compris GIF et PNG, suppriment la densité de pixels. Si vous enregistrez une image de 200 DPI en tant que PNG, cela ne sauvera pas ce DPI. De nombreux éditeurs d'images, y compris Adobe Photoshop, supposent qu'une image est 72
Soixante-douze est un chiffre magique en impression et en typographie. En 1737, Pierre Fournier utilisait des unités appelées cicéros pour mesurer le type. Six cicéros étaient de 0,998 pouces.
Vers 1770, François-Ambroise Didot utilisait des cicéros légèrement plus gros pour le pied français standard. Le pica de Didot mesurait 0,1776 pouces de long et était divisé en 12 incréments. Aujourd'hui, nous les appelons des points.
En 1886, l'American Point System établit un "pica" comme étant de 0,166 pouce. Six d'entre eux sont 0,996 pouces.
Aucune des unités ne s'est éloignée de 12 points par pica: 6 picas par pouce = 72 points par pouce. C'était une norme importante en 1984, quand Apple s'est préparé à introduire le premier ordinateur Macintosh. L'interface de Mac a été conçue pour aider les gens à relier l'ordinateur au monde physique. Les ingénieurs logiciels ont utilisé la métaphore d’un bureau pour décrire le fonctionnement obscur d’un ordinateur, jusqu’aux icônes «papier», «dossier» et «corbeille».
Chaque pixel de l'écran 9 pouces (diagonale) et 512 x 342 pixels du Mac original mesurait exactement 1 x 1 point. Tenez une règle sur la vitre et vous verrez que 72 pixels remplissent réellement 1 pouce. De cette façon, si vous imprimiez une image ou un morceau de texte et que vous le mainteniez à côté de l'écran, l'image et la copie papier auraient la même taille.
Mais les premières images numériques étaient maladroites et déchiquetées. Au fur et à mesure que la technologie de l'écran et la mémoire s'amélioraient, les ordinateurs pouvaient afficher plus de pixels sur un moniteur de même taille. Associer une impression à l'écran est devenu encore moins certain lorsque les applications raster et vectorielles ont permis aux utilisateurs de zoomer et d'examiner les pixels de près. Au milieu des années 1990, Microsoft Windows pouvait basculer entre 72 et 96 pixels par pouce à l'écran. Cela a rendu les tailles de police plus petites plus lisibles car davantage de pixels étaient disponibles par taille de point.
Aujourd'hui, les concepteurs et les clients comprennent que la taille des éléments à l'écran n'est pas absolue. Les différences de taille d'écran et de fonctionnalité de zoom sont courantes. Mais 72 est toujours la valeur par défaut.
Un écran PPI supérieur signifie une meilleure lisibilité aux tailles plus petites
Les écrans avec un PPI plus élevé sont parfaits pour la lisibilité. Plus le nombre de pixels par pouce rend les lettres plus faciles à lire. Cela signifie également que les images et le texte doivent être plus grands (en pixels) pour être lisibles.
L'échantillon de texte ci-dessus a été redimensionné à partir de deux paramètres PPI d'écran différents. La rangée supérieure a des pixels plus petits (c’est-à-dire un PPI plus élevé à l’écran), de sorte que la taille de police lisible la plus petite est de 8 points. Le texte dans la rangée inférieure est à peine lisible en dessous de 10 points.
Comme les moniteurs de PC dépassaient la densité de pixels des moniteurs Mac au milieu des années 1990, les sites Web construits sous Windows présentaient des tailles de police plus petites, au grand dam des utilisateurs de Mac. Aujourd'hui, les écrans des deux plates-formes bénéficient de densités de pixels suffisamment élevées pour rendre les différences anodines.
Images Web élastiques avec les navigateurs modernes
Nous savons maintenant que DPI seul ne modifie pas la taille d'une image sur le Web, et nous n'avons aucun contrôle sur le périphérique sur lequel une image est affichée. Les dimensions en pixels d'une image sont-elles la seule chose qui compte? Oui pour l'instant.
Les dispositions de largeur de fluide, qui varient en fonction de la taille du navigateur, peuvent mieux s'adapter à une gamme d'appareils et de moniteurs. Les navigateurs modernes, de FireFox 3, Safari 3 et Internet Explorer 7 et supérieurs, sont meilleurs que les versions plus anciennes pour redimensionner les images à la volée. le max-width Les propriétés CSS obligent les images à s'adapter à leur conteneur mais ne dépassent pas leur taille réelle. Par exemple:
p { width: 25% } / * Un quart de la zone de contenu * / img { max-width: 100% }
p { width: 50% } / * La moitié de la zone de contenu * / img { max-width: 100% }
p { width: 75% } / * Trois quarts de la zone de contenu * / img { max-width: 100% }
/ * Pas de largeur pour le paragraphe * / img { max-width: 100% }
Ici, nous voyons une image de 800 pixels de large tenir dans quatre éléments de paragraphe de taille différente. Si la largeur de la page était flexible, le redimensionnement de la fenêtre de votre navigateur élargirait l'image, mais pas ses dimensions initiales de 800 x 323 pixels. Il ne serait jamais déformé, ou "pixellisé", par la surexpansion.
Préparer des images pour le Web signifie planifier en pixels. Si quelqu'un demande un graphique de 2 pouces pour le web, pas pour l'impression, demandez-lui "Quelle est la taille de vos pixels?"
Écrit exclusivement pour WDD par Ben Gremillion . Ben est un web designer freelance qui résout les problèmes de communication avec une meilleure conception.
Dans quel média la résolution compte-t-elle? Quelle est la meilleure façon de dimensionner les images en ligne? Partagez vos idées ci-dessous.