Résolution et dimension d'images pour un site....help !

vancetof · Décembre 15, 2013, 18:37:25

Bonjour à tous,

Je sais, je sais les explications concernant ces notions fleurissent sur le net...et justement, je peux lire beaucoup de choses, trop peut être...

Comme certain d'entre vous l'on déjà fait je souhaite créer un site pour "exposer au monde entier la magnificence de mon art photographique"

...Euh..oui bon en plus modeste c'est un projet qui me tient à cœur.

Une résolution de 100 dpi vous semble t elle convenable ?

Concernant les dimensions : 640X480 ? 800X600 ?
J'imagine que cela dépend de la taille (physique) que je souhaite donner à mes images ?

Pour du carré.....je sais pas

Bref j'ai besoin d'info ; par contre soyez clair et simple car vous l'avez compris, je patauge un peu...un tout petit peu

Merci de me faire part de votre expérience.

Verso92 · Décembre 15, 2013, 18:46:21

Citation de: vancetof le Décembre 15, 2013, 18:37:25
Une résolution de 100 dpi vous semble t elle convenable ?

Tu peux oublier cette caractéristique : la résolution n'a aucune existence physique en dehors d'un tirage.
Seule compte la définition (en nombre de pixels). Pour exemple, tu peux aller voir ma galerie (globe sous mon avatar). Les photos horizontales y sont stockées en 1 024 pixels de large (et visibles dans cette dimension quand on clique dessus). Dans le "formulaire", elles sont visibles en 800 pixels de large.

Pour les photos verticales, c'est respectivement 800 et 600 pixels de haut.

Greenforce · Décembre 15, 2013, 23:57:07

Salut Verso,

Si tu veux que des connaissances (ou des inconnus

) puissent télécharger ces photos, en A4 par exemple, les 1024 sur le bord le plus grand (réglage type de LR à l'exportation) sont-ils suffisants?

Verso92 · Décembre 16, 2013, 08:25:35

Citation de: Greenforce le Décembre 15, 2013, 23:57:07
Salut Verso,

Si tu veux que des connaissances (ou des inconnus ) puissent télécharger ces photos, en A4 par exemple, les 1024 sur le bord le plus grand (réglage type de LR à l'exportation) sont-ils suffisants?

Les 1 024 pixels de large seront très insuffisants pour imprimer ensuite un A4 de qualité (ce n'est pas le but).
Pour une impression de qualité, il faut viser une définition qui donnera pour le format de sortie désiré une résolution de 254 dpi* (soit 100 pixels/cm). Un A4 faisant 30cm de large (à la louche), il faudra donc un fichier de 30cm x 100 pixels/cm = 3 000 pixels de large.

*254 dpi n'est pas un chiffre à respecter à la lettre, bien sûr. Mais c'est un ordre de grandeur qui a le mérite de tomber "rond" en système métrique (pas besoin de sortir la calculette...).

vancetof · Décembre 16, 2013, 11:59:47

Citation de: Verso92 le Décembre 15, 2013, 18:46:21
Tu peux oublier cette caractéristique : la résolution n'a aucune existence physique en dehors d'un tirage.
Seule compte la définition (en nombre de pixels). Pour exemple, tu peux aller voir ma galerie (globe sous mon avatar). Les photos horizontales y sont stockées en 1 024 pixels de large (et visibles dans cette dimension quand on clique dessus). Dans le "formulaire", elles sont visibles en 800 pixels de large.

Pour les photos verticales, c'est respectivement 800 et 600 pixels de haut.

J'y suis allé...merci pour l'exemple concret

Greenforce · Décembre 16, 2013, 16:57:18

Merci Verso.

J'ai trouvé cette formule qui peut être utile:

Exemple: un tirage en 10x15 cm à 300 dpi

(soit (10/2.54)×300=1181 et (15/2.54)×300=1771)

Et pour ne pas laisser croire que je l'ai trouvé tout seul

c'est très bien expliqué ici.... http://www.la-photo-en-faits.com/2013/03/tirage-resolution-dpi-impression.html

Noir Foncé · Décembre 16, 2013, 20:07:04

Bonsoir,
J'ai créé un tuto qui explique tout ce qu'il faut pour mettre en valeur les photos avant une diffusion sur internet. Le redimensionnement y est bien sûr présenté, mais aussi comment les accentuer. J'en parle ici :

http://www.chassimages.com/forum/index.php/topic,183369.0.html

nidob24 · Décembre 16, 2013, 20:25:18

Sauf que la question posée concernait des images pour un site, et que dans ce cas là la résolution ne sert à rien. Tout simplement. Seuls ont un sens la dimension en pixels et le poids en octets ( ou KO ou MO ! )

GregP · Décembre 17, 2013, 10:01:05

Cette question simple est de taille!

On se demande quelle est la résolution d'image optimale pour un site web, parler de DPI ici n'a pas trop de sens car la cible est un écran et le nombre de points par pouce (Dots per Inche) est fixé par la définition de l'écran et la résolution d'affichage définit par l'utilisateur.

Le véritable problème est que l'on veut éviter que ce soit le navigateur qui redimensionne la photo car la qualité de l'algorithme utilisé est incertain (en général une pauvre interpolation linéaire au lieu d'un filtre Lanczos par exemple).

Pour répondre à cette question, il vaut mieux s'appuyer sur les statistiques de résolution des écrans. Un site comme www.w3counter.com/globalstats.php nous indique que:
- 20% sont en 1366x768
- 20% sont en 1024x768 ou 768x1024
- 3% sont en 320x480
- le reste est supérieur à 1024x768

Une approche dynamique consitste à faire retailler l'image à chaque affichage sur le serveur. Inconvénients: c'est consommateur de ressources machines sur le serveur et donc l'affichage est plus lent, c'est cependant cette technique qui est utilisé sur Flickr (que je trouve très lent) Picasaweb ou SmugMug (mais celui-ci ne retaille pas exactement comme il faut si bien que l'image est tout de même redimensionnée par le navigateur).

L'approche statique à l'avantage d'être rapide et les images peuvent être mises en cache aussi bien sur le navigateur que sur des noeuds intermédiaires sur une infrastructure serveur redondante ET l'image est taillée avec qualité.

Au vu des stats, on peut tabler sur une résolution d'écran de 1024x768 MAIS ceci ne correspond pas à la résolution de l'image car la navigateur à une barre de titre, une barre d'onglet, une barre URL, ... ceci prend au moins 80 pixels sur la hauteur, à celà s'ajoute qu'une page web affiche rarement l'image brute, la page peut afficher un menu de navigation, une description de l'image, etc... il faut donc considérer le template utilisé.
Je placerais donc la contrainte en hauteur à 600px, tant qu'à la largeur on peut aller jusqu'à 900px.
Il faudrait donc redimensionner pour que ça rentre dans du 900x600.

Christophe Mely · Décembre 20, 2013, 14:17:03

Bonjour,

J'ai rédigé un petit topo concernant ce sujet sur mon blog : http://www.blog.christophemely.com/?p=199.

Vous y trouverez également, à la fin, en téléchargement une calculatrice sous Excel permettant de vérifier les paramètre de résolution et de définition lorsque l'on veut faire imprimer ses photos. C'est une version Beta, donc vos retours et commentaires seront les bienvenus.

chelmimage · Décembre 21, 2013, 08:58:01

Je me suis livré à quelques élucubrations sur le redimensionnement..
Mon Photoshop element 2 me propose 3 modes de redimensionnement; au plus proche, bilinéaire, bicubique.
Lors du redimensionnement ils tiennent compte de façon croissante des pixels environnants (0, 1 ou 2).
Le mode au plus proche donne des photos piquées mais avec des risques d'aliasing ou de moiré. Le bicubique donne des photos plus douces..
Je me suis dit aussi que la meilleure façon de redimensionner une image en conservant à la photo la netteté max et en demandant au logiciel le minimum d'effort et d'incertitude était de ne lui proposer que des valeurs entières de réductions et que ces valeurs soient des diviseurs des dimensions en pixels des longueurs et largeurs.
Comme les dimensions des photos sont faites pour faire du jpg, multiple de 8, tous les redimensionnements d'images qui consistent à diviser par 2, 4 ou 8, l'image d'origine sont possibles.
Diviser par 3, qui est petit est aussi souvent possible.
Donc diviser par 3X2=6 est aussi souvent possible.
9 est plus rare parce que c'est déjà 3².
12 est plus fréquent il suffit que ce soit divisible par 3..puisque forcément divisible par 4..
Bon j'arrête là.ça fait déjà des petites vignettes même si l'image d'origine est grande..
à noter que certains constructeurs, Leica par exemple, mais pas seulement, pour certains modèles, ont des dimensionnements d'origine en pixels qui ne sont que des multiples de grands nombres premiers excepté 2 et par conséquence 4 ou 8..
Et tout ça, pondéré par le "flou" de la matrice de Bayer, fait que ça reste du domaine du perfectionnisme, peut être inutile, mais en ce qui me concerne je l'applique pour le forum, facilement, parce que les dimensions d'origine de mes photos le permettent.
4032X3024>>>>>1008X756.

chelmimage · Décembre 21, 2013, 14:23:47

J'oubliais la division par 5..
C'est extrêment rare il y a peu de formats existants compatibles:
Le 4000X3000 pour le 4:3
le 3000X2000 pour le format APS mais il est maintenant dépassé
Il vient de sortir le 6000X4000 en 24X36!

chelmimage · Décembre 21, 2013, 22:34:22

En complément, j'ai fait un test de redimensionnement avec les 3 algorithmes disponibles de PSE2.
J'ai choisi des dimensions qui n'avaient aucun diviseur commun, 130 et 97.
donc petits, pour faire les traitements mais je montre les résultats avec un effet de zoom.
On voit que au plus proche escamote l'information de certains pixels de façon à "retomber sur ses pieds" dans le rapport des dimensions.
Par contre, les 2 autres formules font une interpolation avec les pixels adjacents la forme est visuellement mieux conservée, mais le contraste baisse légèrement..à vérifier sur de vraies photos!
e pense que le fait de moyenner avec les pixels adjacents peut également réduire le bruit dans l'image s'il est fin.
Voici le résultat des manips..
En haut c'est l'image d'origine,
en dessous à gauche au plus proche
En dessous à droite le bilinéaire
en bas le bicubique..
Une précision pour la lecture de l'image.
La photo d'origine plus grande est au zoom 400%
Les autres plus petites sont au zoom 500%
Pour faciliter la comparaison.

Sha · Décembre 31, 2013, 18:39:54

Je ne sais pas si ça peut donner une idée : pour mon site, j'ai choisi 72 dpi, 600x400.
72 dpi permet que les photos ne soient pas utilisables ailleurs qu'en affichage écran

Verso92 · Janvier 01, 2014, 18:29:02

Citation de: Sha le Décembre 31, 2013, 18:39:54
Je ne sais pas si ça peut donner une idée : pour mon site, j'ai choisi 72 dpi, 600x400.
72 dpi permet que les photos ne soient pas utilisables ailleurs qu'en affichage écran

?!!!
Rappel : une photo n'a pas de "dpi", par définition.
(choisir 800 x 600 pixels à 300 dpi ou 800 x 600 pixels à 72 dpi n'a pas de sens : c'est "800 x 600 pixels", point)
C'est bien la peine de se casser la tête à expliquer...
http://www.chassimages.com/forum/index.php/topic,199815.msg4362938.html#msg4362938

prestinox · Janvier 23, 2014, 19:07:11

Salut Verso, tu vas ?

C'est pour les tablettes et smartphones que je reste en 800x535 (je crois que c'est ça en 3/2 avec Pixresizer gratuit) même si ça doit faire 533.333333...

Je me demande si c'est la "bonne taille" tellement il y a de résolution différentes sur le marché. La norme d'affichage la plus répandue pour une tablette c'est 1024x768, il ne faudrait pas que le site déborde en largeur. D'un autre côté, il y a des résolutions panoramiques alors, je ne sais plus...

Fait c... d'acheter une tablette pour vérifier ça

.

Si vous avez des infos, ça m'aiderait.

Merci et a+,

Fabrice

Verso92 · Janvier 24, 2014, 06:54:41

Citation de: prestinox le Janvier 23, 2014, 19:07:11
Salut Verso, tu vas ?

On fait aller, Fabrice (bientôt le week-end !)... ;-)

Citation de: prestinox le Janvier 23, 2014, 19:07:11
C'est pour les tablettes et smartphones que je reste en 800x535 (je crois que c'est ça en 3/2 avec Pixresizer gratuit) même si ça doit faire 533.333333...

Je me demande si c'est la "bonne taille" tellement il y a de résolution différentes sur le marché. La norme d'affichage la plus répandue pour une tablette c'est 1024x768, il ne faudrait pas que le site déborde en largeur. D'un autre côté, il y a des résolutions panoramiques alors, je ne sais plus...

Fait c... d'acheter une tablette pour vérifier ça .

Si vous avez des infos, ça m'aiderait.

Merci et a+,

Fabrice

Le mieux, je pense, est de t'aligner sur les définitions les plus courantes, si tu veux viser le public le plus large possible.
Il y a aussi certaines techniques qui permettent, si j'ai bien compris, d'adapter la taille (au moins des photos) à la définition de l'affichage. Mais je ne saurais pas t'en dire beaucoup plus...

prestinox · Janvier 24, 2014, 10:07:21

Hello Verso,

Yep, excellente remarque, c'est basé sur Android Jelly Bean 4.2 en général ou sur le système de l'iPad et la résolution en 7" la plus courante : 1280x800 car elles sont panoramiques.

On retrouve la possibilité d'agrandir les images comme sur un Smartphone (Facebook est l'appli la plus utilisée) donc en gros, c'est là que ça va coincer et pas sur les tablettes. Une résolution de site maxi de 1024x800 semble être un maximum et les images en 800x600 aussi.

Après, on ne va pas refaire nos sites pour les Smartphones d'entrée de gamme mais plus pour ceux qui sont les plus vendus.

Je pense que c'est ce qui doit primer car il ne faut pas oublier qu'on surfe aussi avec des écrans de 23/24" facilement vu le prix. Reste que le format PNG serait préférable au JPEG car non interprété par le navigateur mais moins pratique. Je me trompe ?

Enfin, le respect des teintes sur un écran minimaliste... Faut pas se polluer la vie non plus

Finalement, j'en prendrai bien une (Asus) très bien notée et très abordable pour lire tranquillos. 16Go + 32Go SDHC - 10/12h d'autonomie pour moins de 130€, ça le fait.

Bonne journée,

Fabrice

nidob24 · Janvier 24, 2014, 14:42:27

Petite question idiote en passant :

Combien d'entre nous écrivent leurs sites en "Responsive WebDesign" ?

Christophe Mely · Janvier 24, 2014, 16:00:00

Citation de: nidob24 le Janvier 24, 2014, 14:42:27
Petite question idiote en passant :

Combien d'entre nous écrivent leurs sites en "Responsive WebDesign" ?

Mon site l'est ...

...mais ce n'est pas moi qui l'ai écrit...

le_ffrench · Janvier 31, 2014, 13:38:13

Citation de: nidob24 le Janvier 24, 2014, 14:42:27
Petite question idiote en passant :

Combien d'entre nous écrivent leurs sites en "Responsive WebDesign" ?

J'ai fait plusieurs sites en responsive dont celui ci : http://www.paris-photo-tours.com/, mais ce n'est pas à proprement parler une galerie de photos.

Je m'étais lancé dans la création d'un thème responsive (et optimisé référencement) pour Zenphoto avec Bootstrap, mais je ne connaissais pas assez ce dernier et j'ai beaucoup galéré.

Je pense que le responsive web design résout en bonne partie le dilemme de l'auteur de ce fil. On peut se permettre de mettre ses images à une résolution maximum qui s'adaptera ensuite à la résolution de l'écran sur lesquelles elles sont vues.

Pour le côté purement technique, il y a des points délicats à gérer. Faire des images qui s'adaptent dynamiquement à la largeur de leur conteneur, c'est possible (width:100%;height:auto;), mais ça marchera difficilement si on a beaucoup de formats différents : carré, 4/3, 3/2, vertical, panoramique.