Les images à plus haute résolution sont-elles toujours meilleures?
J'ai eu cette perception que pour une taille donnée, les images de plus haute résolution seront toujours plus belles que les images inférieures.
Mais le ce lien dans StackOverFlow J'ai lu quelque chose de différent.
Alors mes questions:
- Pour une taille fixe, les images à plus haute résolution seront-elles toujours plus belles?
- Cette amélioration, le cas échéant, dépend-elle du type d'affichage et du matériel sous-jacent, etc. (par exemple, ce cas ci-dessus est-il spécifique à Apple)
- Dois-je toujours essayer d'obtenir des images de meilleure résolution? Ou existe-t-il une limite après laquelle les yeux humains ne pourront pas vraiment différencier cette amélioration en raison d'un changement de résolution?
PS: Je ne parle pas des qualités d'impression de ces images, mais de l'expérience visuelle que l'on obtient en les voyant à l'écran.
Je vais clarifier davantage.
Je dois utiliser une image de taille 800x600px (fixe).
J'ai 3 options: image 900 dpi, image 600 dpi, image 4oo dpi, toutes en taille 800x600px.
Est-ce toujours une bonne idée d'utiliser 900 dpi au-dessus de 600 et 400?
Et les questions énoncées ci-dessus suivent avec ces données.
Ignorez complètement les paramètres DPI de votre logiciel d'image. Il n'a aucune incidence sur les graphiques Web.
Tout ce qui compte, ce sont les dimensions en pixels. Une image 100px x 100px à 300 dpi est exactement la même image à l'écran qu'une image 100 px x 100 px à 100 dpi.
DPI n'entre en jeu que lorsque vous parlez de graphiques imprimés.
Cependant, vous voudrez peut-être envisager une image plus grande sur le Web avec des graphiques de la rétine. Encore une fois, DPI n'est pas pertinent, mais la clé est que vous doublez les dimensions en pixels. Vous auriez donc une image 100x100 pour les navigateurs réguliers et 200x200 pour la rétine.
- Dépend du PPI (Pixels par pouce) de l'écran. Les icônes haute résolution ne seront pas différentes sur un écran basse densité d'une icône basse résolution.
- Tout dépend du matériel sous-jacent. Verser du carburant pour fusée dans votre voiture ne le transforme pas en fusée.
- Vous devez fournir des images qui intégreront les propriétés d'écran des appareils sur lesquels vous pensez que l'application doit être exécutée.
Dans les médias numériques, vous ne pouvez pas vraiment séparer les pixels de la densité (DPI).
C'est parce que un pixel est un point .
donc, si votre image fait 400 DPI et sa largeur de 800 pixels, cela signifie qu'elle fait deux pouces.
Malheureusement, vous ne pouvez pas définir le DPI d'un appareil (c'est une donnée), il se situe entre 326 (iPhone 5) et 100 (moyenne LCD moniteur d'ordinateur portable).
Le Retina Macbook Pro a une résolution d'environ 220 DPI, et honnêtement, je ne peux pas vraiment le différencier d'un Macbook standard à côté, bien que Apple prétend que c'est mieux. Peut-être que mes yeux se fatiguent .
Mais le vrai point à retenir est: dans les médias numériques, le DPI ne peut pas être défini dans Photoshop, c'est la propriété de l'appareil.
Donc:
- prenez des téléphones portables
- rechercher leur résolution d'écran (par exemple 1136x640 pour iPhone 5)
- décidez de la quantité d'écran que vous souhaitez occuper par rapport à la taille de l'appareil (100% = pleine largeur d'écran, 50% = demi-écran, etc.)
- Multipliez la résolution avec l'espace d'écran (donc, 568x640 si vous voulez occuper la moitié de l'écran d'un iPhone 5)
- Faites cela pour plusieurs appareils et essayez de trouver 2-3 bonnes tailles moyennes.
Ou, si vous venez de graphiques vectoriels:
- prenez des téléphones portables
- rechercher leur PPI
- exporter votre image en fonction de leur PPI (mais ne définissez pas la taille physique, laissez l'application calculer cela)
Lorsque vous traitez avec des images, il est toujours préférable d'adopter une approche réactive. C'est-à-dire, servir l'image de la meilleure façon possible pour l'appareil du spectateur.
Tout dépend des temps de chargement ici, une grande image peut prendre moins d'une seconde à charger sur un ordinateur de bureau avec des vitesses à large bande actuelles, mais essayez de le charger sur un appareil mobile en utilisant uniquement la 3G et vous aurez de la chance si le navigateur ne le fait pas. temps libre.
Décomposez votre image en 3 ou 4 résolutions différentes, une pour chacun des éléments suivants:
- Bureau (grand navigateur> 960 px)
- Bureau (petite fenêtre de navigateur <960 px)
- Tablette
- Mobile
N'oubliez pas de compresser vos images (pour autant que vous soyez satisfait en termes de qualité) autant que possible pour réduire la taille des fichiers et donc les temps de chargement.
Il n'y a aucun avantage supplémentaire à télécharger une image avec un DPI plus élevé que votre DPI d'écran le plus élevé pris en charge. À ce stade, vous téléchargez des images plus grandes que vous n'en avez besoin. La mise à l'échelle de la distorsion et de l'anticrénelage pourrait même nuire à la qualité de l'image dans ces cas.
Afin d'atténuer les différences de taille de pixel, Apple a introduit le concept de "points" comme mesure de la taille sur différents appareils iOS. Il y a une explication assez claire dans la bibliothèque du développeur iOS:
Dans iOS, toutes les valeurs de coordonnées et les distances sont spécifiées à l'aide de valeurs à virgule flottante dans des unités appelées points. La taille mesurable d'un point varie d'un appareil à l'autre et est largement hors de propos. La principale chose à comprendre sur les points est qu'ils fournissent un cadre de référence fixe pour le dessin.
Cela revient à dire que si vous produisez des illustrations avec une résolution de 2 pixels par point, vous devez être en sécurité, même pour les écrans rétine. Les iPhones ont une taille de 320x 480 points et les iPads ont une taille de 768x1024 points.