[RESOLU] 72 dpi... ou plus? Quelle résolution web choisissez-vous ?

Bonjourrr à tous!

Voilà petite question toute simple... et de débutante en plus! Mais puisqu'une remise en question ne fait jamais de mal, je me lance :

Pour vos web designs, quelle définition (résolution?) d'image choisissez vous dans photoshop?
Jusqu'à présent, je crée tout en 72dpi. Mais avec ce genre d'article, je sens le doute en moi s’immiscer! oh yeah
http://www.alpha-numerique.fr/index.php?option=com_content&view=article&id=716:idee-fausse-3-le-mythe-des-72-dpi-pour-un-affichage-ecran&catid=116:idees-fausses&Itemid=370

Et vous, quelle résolution web choisissez-vous?

Merci à vous!
Sarahhhh
Modifié par sarahhh (05 May 2011 - 10:33)

Hello,

Sauf erreur de ma part, les écrans de PC n'affichent qu'une résolution maximale de 72dpi. Cela devrait suffire à répondre à ta question

Bonne journée.

Bonjour,

comme précisé dans ton article : La seule unité pertinente pour un affichage sur écran est le pixel.

Tu peut choisir n'importe quelle résolution, c'est la dimension en pixel qui compte. D'ailleurs elle sera la même quelque soit la résolution choisie.

Merci de vos réponses!
Du coup je pense que le terme de "résolution" est encore assez flou pour moi (vous apprécierez le jeu de mot).

En effet, dans l'article il est bien écrit que :

La seule unité pertinente pour un affichage sur écran est le pixel. On parle ainsi d’une image en 720×480 px, jamais d’une image de 15×10 cm, car celle-ci aura de toute façon une taille d’affichage différente selon les écrans.

Une image 720×480 px en 72 dpi s’affiche sur un écran donné exactement de la même manière qu’une image 720×480 px en 300 dpi. Il est donc parfaitement inutile de changer la résolution de son image sans rééchantillonage.


Par contre, il est également écrit que :
Pour redimensionner avec rééchantillonnage une image pour un affichage web, mieux vaut demander une résolution "moyenne" de 100 dpi. En prescrivant une taille en centimètres avec une résolution de 72 dpi, l’image apparaîtrait plus petite qu’escompté sur la totalité des écrans actuels.


Autre question que je me pose :
l'iPhone 4 a une résolution de plus de 300dpi. Qu'est-ce que cela veut dire? Pour ce type de terminal, il n'est pas préférable d'utiliser des images de... 300dpi ?

sarahhh a écrit :

Autre question que je me pose :
l'iPhone 4 a une résolution de plus de 300dpi. Qu'est-ce que cela veut dire? Pour ce type de terminal, il n'est pas préférable d'utiliser des images de... 300dpi ?

Non.
C'est un peu plus compliqué que ça : l'iPhone a une définition de 640x960 pixels... mais déclare n'en avoir que 320x480 (d'où le "rétina" ou le "demi pixel").

Raphael a écrit :

Non.
C'est un peu plus compliqué que ça : l'iPhone a une définition de 640x960 pixels... mais déclare n'en avoir que 320x480 (d'où le "rétina" ou le "demi pixel").

Sur iPhone 4 : Ca veut dire qu'une image de 320x480 ne prendra que la moitié de l'écran ?
ou que si cette image est à 100% de la largeur, seul un pixel sur deux s'affichera?

Hmm... je crois que je suis un peu perdue!

Bon, j'ai fait pas mal de lecture, comme cet article :
http://www.gdesroches.com/formation/fnumerbase.htm

En gros : on s'en fiche des dpi pour le web : quelque soit le dpi, l'affichage et le poids le l'image seront exactement le même 1px = 1px. C'est donc la taille de l'écran en fonction de sa résolution qui détermine si le pixel est plus ou moins fin.
Conclusion : on utilise ce qu'on veut comme dpi

Par contre, reste 1 question :
Pourquoi 72 dpi?
Pourquoi ne pas intégrer sur internet des photos en 300dpi (au lieu de 72dpi) ce qui permettrait aux photos d'être imprimées avec un grain plus fin (et aux dimensions plus petites) ?

Oublie clairement les dpi, ça n'existe pas en web. Lorsqu'une image est affiché sur le web elle fait tant par tant de pixel.

72, 300 ou un million de dpi dans photoshop, si ton image fais 500 par 500 pixels, elle fera toujours la même taille, aura la même définition, sera exactement la même.

Merci à tous!
Modifié par sarahhh (05 May 2011 - 13:08)

Raphael a écrit :
Sauf erreur de ma part, les écrans de PC n'affichent qu'une résolution maximale de 72dpi.

Alors il y a erreur de ta part.
La résolution réelle dépend de l'écran et de la configuration.

Quelques exemples:
- Un écran de 21 pouces configuré en 640x480 (soyons fous), c'est du 38dpi.
- Un écran de 20 pouces en 1680x1050 (mon iMac par exemple), 99dpi.
- Un écran de 4.3 pouces en 960x540 (HTC EVO 3D), 256dpi.
- Le MacBook Air 11 pouces est à 135dpi (en 1366x768).
- L'iPhone 4 (je n'ai plus les caractéristiques exactes) est dans les 320dpi.

L'idée même que les écrans seraient en 72dpi ou en 96dpi (on peut lire les deux sur tout un tas d'article) est, pour l'essentiel, une bêtise à oublier.

bzh a écrit :
Oublie clairement les dpi, ça n'existe pas en web.

DPI est une unité de mesure de résolution. Bien sûr que ça existe pour les écrans (et donc pour les sites web). Je suppose que ce que tu veux dire c'est que comme c'est variable (voir ci-dessus) et pas contrôlable pour un site web, penser en DPI n'a pas de sens pour le Web. Auquel cas je suis plutôt d'accord.
Modifié par fvsch (06 May 2011 - 14:58)

Yop, ça existe mais ça a un intérêt nul de le savoir. On s'en passe allégrement.

dpi = dots per inches = points (pixels) par pouce

Si on connaît le nombre de pixels (ex: 1024), on a toutes les informations nécessaires puisqu'on se fiche du nombre de cm ou de pouces qu'il y aura à l'écran et des dpi qu'il affiche.

Par contre pour du print c'est nécessaire de connaître 2 valeurs sur 3 parmi les dpi, les dimensions physiques en cm et le nombre de points.
C'est comme en électricité P = U.I si tu en connais 2 tu as le 3ème ou pour une voiture vitesse = nombre de kilomètres / temps pareil 2 infos permettent de connaître la 3ème info.

Eh bien pour les écrans standards de PC on s'en fiche un peu c'est vrai mais si on veut un site qui s'adapte quel que soit le périphérique de lecture , pas du tout .... un smartphone avec une résolution de 480 pixels de large pour un écran physique de 4 pouces montrera des icônes riquiqui par rapport à un écran d'ordinateur .... mais c'est plus la taille en pixels de l'image qui compte.

Maintenant ça peut être utile en conception si tu veux que sur un écran donné ton image fasse exactement une dimension en cm précise ( largeur d'un doigt ? ) ( en sachant que sur les autres écrans à densité différentes la dimension sera différente bien sûr )

Bon tous les navigateurs n'acceptent pas encore cela mais on peut détecter la densité au niveau css :

a écrit :
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css"/>

cf http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/

Me suis fendu d'un petit article: Le Web c’est pas en 72 dpi, coco!

Super ton article Florent !

Bonjour à tous,

après avoir lu les réponse ci-dessus et les articles cités.
Voilà maintenant comment j'applique cela (personnellement) au quotidien :

- Pour les application mobile je travail sur une résolution moyenne de 163 dpi ( je ne monte pas à 300 dpi pour des questions de poids d'images )

- Pour les site mobile reste sur du 72 dpi ( pour le gain de poids)

- Pour le web : j'hésite à passer du traditionnel 72 dpi au 93 dpi, est-ce que certain on fait des essais concrets poids/qualité , retours des clients ?

Gildas

gilong a écrit :
- Pour les application mobile je travail sur une résolution moyenne de 163 dpi ( je ne monte pas à 300 dpi pour des questions de poids d'images)

Bon. Apparemment personne comprend rien à ce sujet.

Alors concrètement, si tu travailles dans Photoshop et que tu crées une image, que tu donnes à cette image des dimensions précises en pixels, mettons 1280x1600 pixels:
- Si tu indiques 72 dpi dans le champ résolution ton image fera toujours 1280x1600px.
- Si tu indiques 300 dpi dans le champ résolution ton image fera toujours 1280x1600px.
- Si tu indiques 45649864864 dpi dans le champ résolution ton image fera toujours 1280x1600px.
Et donc au final tu vas produire exactement la même image au poil de cul de mouche près.

Donc ça change rien.
Ou plutôt ça peut éventuellement changer une chose: une métadonnée de résolution. C'est à dire qu'avec certains modes de sauvegarde (a priori pas en «Enregistrer pour le Web», mais ça serait à vérifier), ton image va être sauvegardée avec une métadonnée (un tag, en quelque sorte) qui dit "72 dpi" ou "300 dpi" ou "45649864864 dpi". Et que va faire cette métadonnée en pratique?
- Les navigateurs web vont s'en foutre royalement.
- Les navigateurs web sur mobile vont s'en foutre royalement.
- La plupart des logiciels vont s'en foutre royalement.
- Il se peut que MS Word utilise cette information pour dimensionner l'image dans la page quand tu utilises certains modes d'insertion d'image.
- Il se peut que certains logiciels de graphisme ou de PAO utilise cette information pour dimensionner l'image sur le canevas ou la page quand tu utilises certains modes d'insertion d'image.
- Les données de base de l'image restent les mêmes. Pour ce qui est du poids de l'image, ça peut faire varier de quelques octets, et donc on s'en fiche.

Et un poil de cul de mouche, ça mesure combien de dpi ?

fvsch a écrit :

Bon. Apparemment personne comprend rien à ce sujet.

Et je remets le son ! (désolé )

Donc si on vous suit tous, autant tout faire en résolution maximale non ?

jmlapam a écrit :

Donc si on vous suit tous, autant tout faire en résolution maximale non ?

Je préconise de bosser en 1080 DPI (Full HD).

dew a écrit :
Et un poil de cul de mouche, ça mesure combien de dpi ?

Ça dépend de la mouche!