Choix de la taille d'image pour affichage sur site web

[tittom]

Bonjour  8-)

Je souhaite vous faire part d'une statistique.
Elle me semble très importante pour ceux qui diffusent leurs photos sur site web.

Plus de la moitié des internautes ont une hauteur d'écran qui ne dépasse pas 800 pixels.
Les principales résolutions (*) :
768*1024  27.36 %
800*1280  16.32 %
900*1440  11.08 %
1024*1280  10.92 %
1050*1680  5.82 %
768*1366  4.47 %
600*800  3.28 %

En ce qui me concerne, j'étais en train de concevoir mon site web pour afficher mes photos en 800 pixels de dimension maximale.
Après quelques essais en 1024x768 (1/4 des internautes...) : si on tient compte des barres de menus des navigateurs, il reste seulement 600 pixels disponibles en hauteur.

La hauteur maximale des photos publiées sur un site internet doit donc être de 600 pixels, sinon 1/4 des internautes ne pourront pas les voir entièrement à l'écran.

Il me reste à choisir entre
1. Limiter toutes mes photos à 600px de haut maxi
2. Proposer 2 tailles de photos (compliqué à gérer !)

Pas facile de prendre de bonnes résolutions  

(*) Mes sources (récentes) :  libstat, Journal du net, Stratégies du net

[tryphon4]

Il y a des astuces pour redimensionner l'affichage des grandes photos suivant la résolution d'écran...
C'est alors la page web qui fait tout le boulot: un script détecte la résolution et fait afficher la photo de façon à ce qu'elle apparaisse entièrement.
Suivant le logiciel que tu utilises pour créer tes pages, c'est plus ou moins facile à mettre en place.

[lavacherouge]

Les statistiques varient en permanence celons les courants et les sources. Je me base actuellement sur des donnés qui disent que 45% les écrans sont configurés en 1024 X 800 et moins. Moins c'est 800 X 600 qui est en train de disparaitre, même sur les petits écrans portables ou 1024 X 768. Cela veux dire que toutes pages supérieures à 768 ou 800 pixels de haut ne seront pas visibles entièrement par 55% des internautes. Ce n'est pas à négliger. Dans cette hauteur, il faut prendre en compte l'entête et les barres d'outil du navigateur. Une image bien mise en valeur sur une page avec un bon traitement se lit très bien en 500 pixels de côté.
La solution que je te propose, tu cales ton écran en 1024 X 800 ou 1024 X 768, tu ouvres une page vierge dans ton navigateur et tu effectues une capture d'écran. Tu n'as plus qu'a mesurer l'espace disponible de ta page sur ta capture d'écran.

La solution d'utiliser un script qui redimensionne les images en fonction de la définition d'affichage de l'écran n'a pas de sens pour moi. Quand on crée une page web, on crée une page dans son ensemble pour avoir quelques chose de graphiquement cohérent. Si l'on veux redimensionner un élément, il faut redimensionner l'ensemble de la page, sinon tout est bancale. Si l'on veut proposer deux tailles d'affichage, il faut concevoir deux sites. Dès la page d'accueil, on dirige le visiteur en lui proposant deux directions.

[tittom]

Merci pour vos interventions, tryphon et lavacherouge :)

La solution de laisser le navigateur redimensionner l'image automatiquement a un inconvénient majeur à mes yeux : la qualité d'affichage des images "redimensionnées à la volée" est fortement dépendante du navigateur utilisé.
Voir les tests que j'ai fait ici : http://tittom.free.fr/divers/test_resize/
Si vous ne voyez pas de différence entre les pattes de la girafe sur les images 2 et 3, alors votre navigateur redimensionne proprement les images.
Si vous voyez des carrés de pixels, du crénelage, votre navigateur est un sagouin

Je pense que je vais m'en tenir à une résolution de 500 ou 600 en effet. Ca me paraît suffisant, et plus simple à gérer.

Merci encore à vous deux 

[lavacherouge]

Tu soulève un problème important.
Il faudra effectivement redimensionner tes images dans le format d'affichage maximum.
Si ton format d'affichage maximum est de 800 px tes images seront préparées à 800 px. Celui qui possède un affichage d'écran réduit afichera tes images à 500 px (c'est un exemple) mais avec le poids de l'images à 800px et une lenteur de chargement inutile.
Si tu procède à l'inverse en dimensionnant tes images à 500 px, celui qui possède un grand affichage d'écran les affichera en 800 px mais de qualité médiocre.
Ou alors tu crées différentes tailles d'image et il faut un script qui choisi de charger telle ou telle image en fonction de la résolution de l'écran.

[tittom]

Tout à fait d'accord avec toi. Mais je pense imposer un format (500px max).
En lisant ton message, je ne sais pas si tu as bien vu la conclusion de mon test : c'est bien lors de la réduction de l'image par le navigateur que j'ai constaté un crénelage dans IE et Firefox. Pas en leur demandant d'augmenter la taille. Car on est bien d'accord dans ce dernier cas, il ne peut pas y avoir de miracle ;)

[Gin.net]

Flickr, par exemple, affiche par défaut les images en 500 pixels pour le plus grand côté. Ca donne une idée du format adopté par un site qui a pour vocation le partage de photos

[lavacherouge]

C'est un bon exemple qui démontre que l'on a pas besoin de taille démesurée pour afficher ses images.