Catégories
Art et photographie

Résolution d'image pour la conception Web

Combien de pixels par pouce conviennent le mieux aux images Web? Éliminez les idées fausses courantes sur la résolution d'image pour le Web avec ce guide de Shutterstock.

"Mais attendez", nous entendons-nous moquer, "pourquoi la résolution d'image ne serait-elle pas importante pour le Web? Suis-je censé publier des photos floues et irrégulières sur mon site Web professionnel et l'appeler un jour? »

Pas si vite! La qualité d'image des photos, graphiques et icônes en ligne est essentielle pour offrir une expérience utilisateur satisfaisante à toute personne visitant votre site Web. cependant, résolution de l'image est un terme qui a plus de sens en version imprimée qu'en ligne. Plongeons-nous dans les détails de la résolution d'image et déterminons ce qui est vraiment important pour des images vives sur le Web.


Qu'est-ce que la résolution d'image?

Pourquoi vous n'avez pas à vous soucier de la résolution d'image pour le Web - Qu'est-ce que la résolution d'image
Image via Galyna Andrushko.

Un terme qui reste de l'industrie de l'imprimerie, résolution de l'image est la densité des points ou pixels qui composent l'image. En d'autres termes, la résolution d'image est la quantité d'informations visuelles qu'une image contient. Dans ce contexte, il est parfaitement logique que vous souhaitiez que vos images aient une résolution aussi élevée que possible, afin qu'elles apparaissent nettes, nettes et vibrantes.

Nous mesurons la résolution d'image en DPI ou PPI. Dans l'industrie de l'impression, la résolution de l'image est mesurée en points par pouceou DPI. Traduite en numérique, la résolution de l'image est mesurée en pixels par pouceou PPI. Vous verrez souvent ces termes utilisés de manière interchangeable, mais le DPI est réservé à l'impression tandis que le PPI est utilisé pour les images numériques. Une image avec un PPI plus élevé a tendance à être de meilleure qualité en raison de sa densité de pixels.

Mais, si PPI semble avoir un lien avec la qualité, pourquoi nous, l'équipe de Shutterstock, insistons-nous pour que la résolution d'image en ligne ne soit pas un gros problème? Détournons rapidement le passé oublié depuis longtemps – les années 80 – et appliquons ce que nous avons appris à l'état actuel de la qualité de l'image.


Résolution d'image Web standard

Pourquoi vous n'avez pas à vous soucier de la résolution d'image pour le Web - D'où proviennent les tailles d'image standard
Image via Twin Design.

Historiquement, les concepteurs de sites Web considéraient le 72 PPI comme la définition «standard» des images destinées au Web. La justification? Vous pourriez entendre que la plupart des écrans tiennent automatiquement à 72 pixels par pouce. Donc, à cette résolution, l'image est aussi détaillée que possible. Mais l'histoire complète est plus compliquée.

Quand Apple a sorti ses premiers ordinateurs Macintosh dans les années 80, ils se sont tenus à un écran de neuf pouces avec une résolution d'image de 72 PPI. Cette décision était pratique – leurs imprimantes ImageWriter imprimaient des images à 144 DPI, et ce rapport 2: 1 rendait les images à l'échelle indolores et simples.

La technologie d'affichage a évolué rapidement au cours des trente-six ans qui ont suivi la sortie du Macintosh, et maintenant peu d'ordinateurs ont une résolution d'affichage de 72 PPI. Lorsque vous exportez des images depuis Photoshop et d'autres logiciels de retouche d'image, vous pouvez définir automatiquement la résolution de l'image à 72 PPI, après des années de renforcement. Cependant, les affichages varient considérablement en résolution.

Si tel est le cas, n’y a-t-il pas de norme? Comment pouvons-nous nous assurer que nos images s'affichent magnifiquement en ligne, sur tous les appareils?


Qu'est-ce qui affecte l'affichage des images sur le Web?

En termes de résolution d'image pour le Web, il vaut mieux penser strictement dimensions en pixels et taille du fichier.

  • Dimensions en pixels – Cela fait référence au nombre de pixels constituant votre image, en longueur et en largeur. Par exemple, une image carrée mesurant 360 × 360 pixels a 360 pixels dans chaque ligne et 360 pixels dans chaque colonne. Si l'écran de votre ordinateur a une résolution de 72 PPI, cette image mesurera cinq pouces de chaque côté lorsqu'elle sera affichée en taille réelle sur votre moniteur. C’est une image assez grande!
Pourquoi vous n'avez pas à vous soucier de la résolution des images pour le Web - Ce qui affecte l'affichage des images
Image via Lindy Thibodaux.

Plus les dimensions de votre image sont grandes, plus votre image sera professionnelle. Si les dimensions d'une photographie sont de 2000 × 1500 pixels, l'image aura l'air formidable comme une bannière ou comme une petite photo sur le côté de votre site Web. Cependant, si vous utilisez une image de 200 × 150 pixels, elle n'aura l'air professionnelle que dans sa taille native plus petite. Faire exploser cette image pour l'utiliser comme une image de héros se traduira par un aspect granuleux et bâclé que personne qui visite votre site Web n'appréciera.

  • Taille du fichier – La qualité de votre image augmentera à mesure que la taille de votre fichier augmente et que la compression de votre image est soumise à une diminution. La taille de votre fichier image est simplement le nombre d'octets que l'image prend sur votre ordinateur ou votre site Web. Les dimensions de votre image détermineront la taille du fichier, mais le type de fichier que vous utilisez pour vos images sera également un facteur important. Pour choisir entre JPEG, PNG ou même GIF, lisez nos recommandations pour les meilleurs formats d'image pour le web.
Pourquoi vous n'avez pas à vous soucier de la résolution d'image pour le Web - Taille du fichier et temps de chargement
Image via GaudiLab.

Lorsque vous décidez du type de fichier à utiliser et du niveau de qualité de vos images, gardez à l'esprit que la vitesse de la page diminue à mesure que la taille totale du fichier augmente. Vous voulez choisir la qualité d'image qui vous semble la meilleure, tout en gardant chaque fichier image petit et gérable. Lorsque votre page est lente et pleine de problèmes, l'expérience utilisateur en souffre. Cinquante-trois pour cent des utilisateurs mobiles abandonnent les pages Web dont le chargement prend plus de trois secondes. Augmenter la taille du fichier peut entraîner une meilleure image, mais cela peut avoir un impact négatif sur les performances du site.


Quand la résolution d'image est importante

La résolution de l'image peut ne pas être pertinente dans la plupart des applications numériques, mais à l'impression, la résolution de l'image est reine. Le DPI affectera considérablement la façon dont une image s'imprime et est de première importance lors de l'exportation d'images à partir d'un logiciel de conception et d'édition, si vous ne téléchargez pas les photos en ligne.

En impression professionnelle, vos photos doivent avoir une résolution d'image d'au moins 300 DPI. L'œil humain ne peut généralement pas différencier les images au-dessus de 200 DPI, mais il est courant d'utiliser 300 DPI et plus pour une clarté optimale. Vérifiez toujours les paramètres de votre imprimante avant de choisir une résolution d'image pour l'impression. De nombreuses imprimantes ne peuvent pas gérer des résolutions supérieures à 300 DPI, et l'utilisation d'un tel paramètre peut créer d'étranges artefacts visuels.

Pour le contexte: si vous souhaitez imprimer une image de quatre pouces par six pouces à 300 DPI, elle doit mesurer 1200 × 1800 pixels avant l'impression. Lors de la prise de vue avec un appareil photo, les photographes doivent prendre une résolution plus élevée que ce dont ils auront besoin pour l'impression. Ensuite, ils peuvent affiner et réduire les images dans un logiciel de retouche photo.

Lors de la modification d'images à imprimer, il est préférable d'utiliser TIFF ou EPS formats de fichiers. Ces types de fichiers sont sans perte, ce qui signifie que vous ne compresserez ni ne compromettrez l'image lors de l'enregistrement et de la réouverture. Cependant, ces fichiers sont volumineux et encombrants.


Image de couverture via Who is Danny. Image d'écran via Galyna Andrushko.

Découvrez plus de conseils sur la conception de votre site Web avec ces articles:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *