Quel Format Standard pour les photos

[Rocky Rider]

Bonjours à tous.

Quel format (dimension en pixel) de photo conseillez vous pour un site web.
Photo qui pourront être postées par les utilisateurs sur leur profil CB, le forum, des articles...
Ce sont des photos qui ont vocation à illustrer une page mais pas à être téléchargée ou imprimée.

Il faut donc une résolution suffisante pour que les photos restent nettes sur des grands écran PC mais pas trop élevée non plus pour ne pas alourdir la page mais surtout pour ne pas saturer l'espace disque.

Pour l'instant j'ai paramètré en 1000x1000 max mais je pensais descendre en 750x750. Vous en pensez quoi ?

En vous remerciant pour vos conseils.

[dolmenhir]

Re : Quel Format Standard pour les photos

Slt,

Il n'y a pas de règle particulière, c'est extrêmement subjectif et intimement lié au site et à sa ligne éditoriale.
D'une manière plus globale, tout dépend de l'usage attendu de la photo.

Pour un article, cela peut être un panoramique avant l'article, donc toute la largeur dans un ratio 16:9 ou 16:10, mais ça peut aussi illustrer un paragraphe, en flottaison à droite ou à gauche.
J'ai tendance à donner 1/3 de la largeur disponible, laissant ainsi 2/3 au texte.
Mais c'est presque du cas par cas, car certains paragraphes peuvent être courts et l'image peut alors empiéter sur le paragraphe suivant.
Penser au côté responsive, particulièrement les smartphones, où certaines résolutions en largeur sont à 320px.
Dans ce cas là, je mets un min-width de 300px, ce qui évite d'avoir une image trop petite cherchant à s'habiller autour d'un texte lui-même contraint, mais qui prendra au contraire la largeur de l'écran.

Pour un profil (CB ou autre), un format carré ou rond, et là encore, côté dimension, ça dépend de la page.
Mais en général, les photos/avatars, sont de dimension modeste et contenue.

Sur un forum, faut 2 formats, l'un pour les images en vignette, forcément petit, et celle du zoom sur l'image, suffisamment large (au moins 600px).

Cette idée de 2 formats peut être utilisé pour certains articles (intro vs complet), comme pour les galeries photos.
Dans ce dernier cas, je laisse souvent le composant, comme SIGE, faire le boulot mais je fixe la largeur là encore en fonction de la largeur disponible et en prévoyant une marge raisonnable entre chaque image.

Comme tu le vois, c'est très subjectif et très personnel.
Faut prendre en compte la ligne graphique, la ligne éditoriale, les contraintes techniques, penser au mode responsive...
Un site de photographe, donnera la part belle aux images, n'hésitant pas à prendre le dessus sur le texte, tandis qu'un site d'information, voir un site corporate, sera plus mesuré.

Dans tous les cas, la hauteur sera fixée de manière empirique par un "height: auto" afin de garder une image correctement proportionnée (sauf sur certaines galeries ou portfolios où on peut se permettre de "cropper" les vignettes...

Dol.

[_Ovb]

Re : Quel Format Standard pour les photos

...mais pas trop élevée non plus pour ne pas alourdir la page mais surtout pour ne pas saturer l'espace disque...

Salut, la seule chose que je puisse ajouter à ce que disait très justement dolmenhir c'est que ce point précis ne va pas dépendre de la taille en pixel de ta photo. Bien entendu une photo de 5000x2000 sera plus lourde que 150x150 mais ce que je veux dire c'est que cela va surtout être lié au dpi (précision de la photo) et à son format (compression de la photo).

Tu peux avoir des Raw de la taille d'un timbre plus lourd qu'une affiche en jpg

Pour moi ces deux paramètres vont plus jouer sur le poids de ta photo que réellement sa taille.
Ne peux-tu pas également mettre une limite sur le poids (xx Mo) de l'image uplodée ?

[lomart]

Re : Quel Format Standard pour les photos

Bonjour,

Pour définir la taille idéale d'une photo, il faut se baser sur des stats de résolution d'écran

http://www.libstat.com/pages/resolution.htm

On voit que la hauteur moyenne des écrans tourne autour de 800-900. A cela, il faut retirer la hauteur des barres d'outils.
Donc inscrire une image dans un rectangle de H750 x L1000 me semble un bon choix. A doubler si vos visiteurs sont principalement sur des écrans haute résolution (retina).
On peut également fournir une image haute résolution à télécharger (ce que propose http://hunyadi.info.hu/levente/en/sigplus)

Après comme le souligne Dolmehnir, il faut utiliser des vignettes au maximum. L'important étant le poids de la page dont la photo n'est qu'une composante.

@_Obv

ce que je veux dire c'est que cela va surtout être lié au dpi (précision de la photo) et à son format (compression de la photo).

L'indication DPI qui est l'acronyme de "Digit Per Inch" traduit en français par ppp "Pixels Par Pouce", n'a de sens que pour exprimer la résolution (ou qualité) d'un media de sortie indépendamment de sa taille: Un écran de PC fait du 96dpi alors qu'un écran retina est dans les 220. Donc pour définir la taille d'une photo pour le web, on se base sur la dimension affichée sur l'écran de l'internaute.

En ce qui concerne les RAW, la question ne se pose pas, vu qu'ils ne sont pas supportés (heureusement) par les navigateurs.
Le RAW n'est pas un format d'affichage, mais un format de travail qui contient plusieurs versions de la même image à des expositions différentes

[_Ovb]

Re : Quel Format Standard pour les photos

@_Obv

L'indication DPI qui est l'acronyme de "Digit Per Inch" traduit en français par ppp "Pixels Par Pouce", n'a de sens que pour exprimer la résolution (ou qualité) d'un media de sortie indépendamment de sa taille: Un écran de PC fait du 96dpi alors qu'un écran retina est dans les 220. Donc pour définir la taille d'une photo pour le web, on se base sur la dimension affichée sur l'écran de l'internaute.

En ce qui concerne les RAW, la question ne se pose pas, vu qu'ils ne sont pas supportés (heureusement) par les navigateurs.
Le RAW n'est pas un format d'affichage, mais un format de travail qui contient plusieurs versions de la même image à des expositions différentes

Je parlais ici uniquement du poids de l'image qui elle influe sur la rapidité de chargement du média...
J'ai cité le format Raw à titre d'exemple général, je ne parlais pas uniquement du mon monde Web.
J'aurais pu faire la même comparaison entre le jpg, le png, le tiff ... (1x, 2x, 7x pour le rapport)

Par contre effectivement le ppp ou dpi n'influe pas sur le poids, je viens de le découvrir grâce à toi.

Après j'ai entendu dire que Google préférais le png et que de ce fait pour une plus grande visibilité ce format était conseillé plutôt que le jpg... Peux-tu me le confirmer et m'expliquer le pourquoi du comment ?

[lomart]

Re : Quel Format Standard pour les photos

C'était juste pour être précis

J'aurais pu faire la même comparaison entre le jpg, le png, le tiff ... (1x, 2x, 7x pour le rapport)

Détrompe-toi, j'utilise souvent le png qui peut être plus léger et de qualité supérieure à un JPG
J'en parlais récemment dans ce post : http://forum.joomla.fr/showthread.ph...=1#post1098546 ou une image de 930x507 fait 25ko en PNG et 180ko en JPG compressé à 80%
C'est aussi pour cela que je préfère générer mes images et vignettes manuellement.
Ma méthode :
Copie d'écran, scan de document : format PNG compressé avec FileOptimizer sur PC ou en ligne sur http://compresspng.com/fr/
Paysage, personnages, bref le reste : JPG avec le taux de compression maxima: http://lomart.fr/8-blog/23-vjc-pour-...ser-vos-images. Attention aux grands applats clair comme les ciels.

[dolmenhir]

Re : Quel Format Standard pour les photos

j'ai pas eu écho de la préférence de GG pour le png, mais il est vrai que ce format a la côte sur le web.

mais pour résumer (c'est une question de ratio poids/qualité) :

• Une photo > JPEG.
• Un graphique avec peu de couleurs (moins de 256) > PNG 8 bits (ou GIF)
• Un graphique avec beaucoup de couleurs > PNG 24 bits
• Une image animée > GIF animé.

Dol.

[lomart]

Re : Quel Format Standard pour les photos

Après j'ai entendu dire que Google préférais le png et que de ce fait pour une plus grande visibilité ce format était conseillé plutôt que le jpg... Peux-tu me le confirmer et m'expliquer le pourquoi du comment ?

Jamais entendu parlé !!
Peut-être parce que le PNG n'est pas un format destruteur comme JPG. Pour rappel, une compression à 80% veut dire que l'on ne conserve que 80% des infos. Après 10 enregistrements, il ne reste que 10% des infos. Avec le PNG, l'image a toujours la même qualité.
Par contre, cela irait à l'encontre de son exigence de page légère...

[dolmenhir]

Re : Quel Format Standard pour les photos

Détrompe-toi, j'utilise souvent le png qui peut être plus léger et de qualité supérieure à un JPG
J'en parlais récemment dans ce post : http://forum.joomla.fr/showthread.ph...=1#post1098546 ou une image de 930x507 fait 25ko en PNG et 180ko en JPG compressé à 80%

C'est tout à fait vrai tant qu'il s'agit d'un graphique faible en détail (type infographie, avec formes et couleurs "simple").
mais dès que les détails augmentent (photos) alors le jpeg l'emporte.

[lomart]

Re : Quel Format Standard pour les photos

mais dès que les détails augmentent (photos) alors le jpeg l'emporte.

C'est exactement ce que je disais

[dolmenhir]

Re : Quel Format Standard pour les photos

Voici de quoi illustrer les propos
2 type d'images de même dimension ((410x399 px)
- simple avec peu de détails
- plus détaillée (et c même pas une photo)

Voici son poids selon le format employé

- gif transparent - 10 ko
- png 8 transparent - 9 ko
- jpg qualité maxi - 37 ko
- png 24 transparent - 17 ko
- png 24 non transparent - 16 ko


- gif transparent - 83 ko
- png 8 transparent - 74 ko
- jpg qualité maxi - 165 ko
- png 24 transparent - 198 ko
- png 24 non transparent - 176 ko

[lomart]

Re : Quel Format Standard pour les photos

Jamais entendu parlé !!
Peut-être parce que le PNG n'est pas un format destruteur comme JPG. Pour rappel, une compression à 80% veut dire que l'on ne conserve que 80% des infos. Après 10 enregistrements, il ne reste que 10% des infos. Avec le PNG, l'image a toujours la même qualité.
Par contre, cela irait à l'encontre de son exigence de page légère...

Mea culpa, j'ai dis une grosse bêtise. La preuve ici : http://lomart.fr/references/64-forma...enregistrement

J'espère qu'avec le pensum que je me suis imposé, je serais pardonné

[fynhooft]

Re : Quel Format Standard pour les photos

Bonjour,

@lomart
Superbe explications sur le format des images.
J'ai vu que tu avais indiqué mon site GIMPons comme référence pour les tutoriels GIMP. Je t'en remercie.
J'en ai profité pour mettre une nouvelle version du site. J'attends vos éventuels commentaires sur le forum.

J'ai mis un lien sur ton site dans Ils ont référencé GIMPons

[lomart]

Re : Quel Format Standard pour les photos

@ fynhooft

Merci pour le compliment sur mon article. Il me semblait nécessaire de disposer d'un comparatif exhaustif pour fixer les idées et en remettre d'autres à leur place.

[Pegggy]

Re : Quel Format Standard pour les photos

Bonjour, En général, ll n'y a pas de règle particulière, Pour vous donner une idée format JPEG compressé