Resolution et taille des photos pour publier sur un site

Démarré par esolarc, Décembre 05, 2014, 00:18:56

« précédent - suivant »
Imprimer
En bas Pages1 2 Toutes
Actions de l'utilisateur

esolarc

Décembre 05, 2014, 00:18:56
Une petite question car je suis en train de refaire mon site et je m'appercois qu'en mettant des photos à la résolution et taille d'origine l'affichage rame à fond sur mon blog alors que c'est acceptable sur des sites comme Photodeck, Smugmug, 500px ou encore Flickr.

Je voulais donc savoir qu'elles étaient la résolution et taille de vos photos publiées sur votre site web perso ?

D'avance merci.

GregP

#1
Décembre 05, 2014, 09:27:06
Si par exemple tu mets tes photos originales sur Smugmug, elles sont bien enregistrées chez Smugmug dans leur version originales MAIS par contre elles sont vues par les visiteurs dans une version redimensionnée, car en effet la taille originale ferait trop ramer.
De plus, si la résolution d'origine est de 12Mega pixel avec un format 4000x3000, sache que l'affichage moyen des écrans est de l'ordre de 1300x800, il serait donc inutile d'afficher davantage de pixels. A cela s'ajoute un peu de recompression afin que la taille de l'image reste petite et donc un temps de téléchargement réduit.

Pour ton site, si les photos sont dans un layout "responsive", alors tu peux t'orienter sur du 1500x1000 pour quelquechose qui permet de la "haute résolution". Sinon, il faut cibler beaucoup plus petit encore, comme du 900x600.

esolarc

#2
Décembre 05, 2014, 10:07:53
Merci pour ces infos, c'est sûrement le principe de tout ces sites.

Au niveau de la taille je pensais 1980px vue qu'on trouve régulièrement des écrans de cette résolution.

GregP

#3
Décembre 05, 2014, 10:21:32
1980px me parait un peu beaucoup car tout site qui rame trop est en général zappé. Il est tentant de vouloir offrir la plus grande définition possible mais il faut garder à l'ésprit qu'on est sur du web avec des visiteurs qui consomment des images à grande vitesse. Du coup, quelle qualité perd-t-on entre 1980 et 1024 par exemple?
Après, rien n'empêche d'ajouter un lien vers l'image d'origine ou de l'imprimer sur papier dans un grand format. Mon conseil pour le web est de rester en moyenne définition avec des fichiers ne dépassant pas les 150ko.

Philippe Leroy

#4
Décembre 05, 2014, 11:03:49
Citation de: esolarc le Décembre 05, 2014, 10:07:53
Au niveau de la taille je pensais 1980px vue qu'on trouve régulièrement des écrans de cette résolution.

A titre d'info, sur les stats de mon site, du 1 janvier 2014 à Hier :

Première place (40%) = 1024 x 768 pixels
Deuxième place (12%) = 568 x 320 pixels
Troisième place (11%) = 480 x 320 pixels
Quatrième place (5%) = 1280 x 800 pixels
Cinquième place (5%) = 640 x 360 pixels

Jusqu'a la dixième place ça reste des petites définitions de smartphones/tablettes.

Comme quoi les habitudes changent  ;)
Les définitions en 1920 pixels sont à :

29° place - 1920 x 1128 pixels = 0,19% du trafic
58° place - 1920 x 1080 pixels = 0,06% du trafic
Evidement mon site ne représente pas forcément la norme... mais ça donne une idée.

J-F

#6
Décembre 05, 2014, 19:29:14
Bonsoir il faut se méfier des webstats, certains navigateurs donnent de fausses informations pour protéger leur utilisateur . . .
sinon pour ma part je préfère les valeurs du format original de la photo c'est à dire le + souvent 3:2    par exemple 1200x800  1024x682 1500x1000 , mais aujourd'hui 1024x682 ça commence à faire petit lorsque l'on regarde les photos avec un 1920x1200 ou pire 2560x1440 . . .   ça devient vite des timbres poste. . .
le probème est de moins en moins la bande passante car le haut débit se generalise , mais il existe aussi le besoin de protéger ses images en évitant les tailles qui peuvent servir à faire de belles impressions par exemple :)

esolarc

#7
Décembre 05, 2014, 20:39:23
Tout ceci est fort intéressant, merci à tous pour vos informations.

J'ai fait le test avec une de mes photo :

En 1920 x 1281 elle fait 2,8Mo qualité maximum et 810Ko en qualité élevée
En 1280 x  854 elle fait 1,5Mo qulité maximum et 546Ko en qualité élevée

Donc tout ceci est loin des 150Ko...

esolarc

#8
Décembre 05, 2014, 22:10:27
J'ai regardé sur Smugmug les images affichées dans les pages sont en 1600 x 1068 mais en 72dpi... et ont une taille de 600Ko

Alors que ma photo de test est elle en 240dpi, si je la passe en 72dpi et la réduit à 1600 x 1068 j'obtiens une taille de 630Ko

Inka

#9
Décembre 05, 2014, 22:39:03
Citation de: esolarc le Décembre 05, 2014, 22:10:27
J'ai regardé sur Smugmug les images affichées dans les pages sont en 1600 x 1068 mais en 72dpi... et ont une taille de 600Ko

Alors que ma photo de test est elle en 240dpi, si je la passe en 72dpi et la réduit à 1600 x 1068 j'obtiens une taille de 630Ko

Les dpi n'ont rien à faire dans cette histoire, seule la taille en pixel compte.
Carolorégien

esolarc

#10
Décembre 05, 2014, 23:45:40
Certes normalement les dpi c'est pour l'impression alors que les px c'est pour les écrans non ?

Mais alors comment explique-t-on qu'une photo issu de mon boitier a quand je regarde sa taille sous CS6 :

5976 x 3992px avec 300dpi pour un fichier de 68.3Mo

Et que si je change juste les dpi en mettant 72dpi j'obtiens :

1434 x 958px avec 72dpi pour un fichier de 3.93Mo

Il y a surement un truc qui m'échappe... ???

Inka

#11
Décembre 05, 2014, 23:52:40
Citation de: esolarc le Décembre 05, 2014, 23:45:40
Il y a surement un truc qui m'échappe... ???

Oui, il y a eu rééchantillonnage, si tu gardes la même taille en pixels, tu peux mettre les dpi que tu veux. Si tu changes les dpi sur Photoshop, il y a une case à cocher ou à décocher pour rééchantilloner ou pas.
Carolorégien

esolarc

#12
Décembre 05, 2014, 23:55:12
ET ?

Inka

#13
Décembre 05, 2014, 23:57:16
Carolorégien

esolarc

#14
Décembre 06, 2014, 00:19:19
Citation de: Inka le Décembre 05, 2014, 23:52:40
Oui, il y a eu rééchantillonnage, si tu gardes la même taille en pixels, tu peux mettre les dpi que tu veux. Si tu changes les dpi sur Photoshop, il y a une case à cocher ou à décocher pour rééchantilloner ou pas.

Ok merci je connaissais pas et en décochant en effet pas de changement dans la taille en pixels, ni au niveau de la taille du fichier donc aucun interêt en effet.

wis-titi

#15
Décembre 06, 2014, 12:43:06
Une des données principale pour le poids d'une image pour le net, en complément de la taille d'image, se situe dans la qualité de compression. Il y a en effet une importante différence de poids entre les qualités 100 (maximum), 70 (élevé) ou 58 (moyenne). Cette qualité de compression est à régler en fonction de la qualité d'image que l'on souhaite afficher car celle ci baisse en fonction du réglage.
Une image très détaillée et très colorée reste plus lourde qu'un paysage brumeux à dominante bleu/gris par exemple.
Cdt

esolarc

#16
Décembre 06, 2014, 12:43:17
Pour ceux que cela interesse j'ai vue sur le thème de mon site Wordpress, que je suis en train de construire, que pour les images de fond d'écran et donc plein écran il préconise une taille de 1440 x 900 px.

esolarc

#17
Décembre 06, 2014, 12:44:30
Citation de: wis-titi le Décembre 06, 2014, 12:43:06
Une des données principale pour le poids d'une image pour le net, en complément de la taille d'image, se situe dans la qualité de compression. Il y a en effet une importante différence de poids entre les qualités 100 (maximum), 70 (élevé) ou 58 (moyenne). Cette qualité de compression est à régler en fonction de la qualité d'image que l'on souhaite afficher car celle ci baisse en fonction du réglage.
Une image très détaillée et très colorée reste plus lourde qu'un paysage brumeux à dominante bleu/gris par exemple.
Cdt

En effet je suis donc passé à une qualité de 10/12 avec CS6

Gilala

#18
Décembre 06, 2014, 12:49:54
Beaucoup de tempêtes sont "responsive" maintenant non? Du coup la taille d'écran de l'utilisateur devient secondaire.
Ensuite pour le poids, idem, la majorité des connexions avalent des gros jpg très rapidement.

GregP

#19
Décembre 06, 2014, 17:06:48
J'ai fait un petit test depuis chez moi, via une connexion ADSL haut débit. J'ai activé l'outil "network" du navigateur et j'ai testé les sites smugmug, flickr, piwigo et digicamsoft.
Pour bien faire il faudrait réitérer les tests à différents moments de la journée, les résultats:
smugmug: 29kb/s
flickr: 285kb/s
piwigo: 164kb/s
digicamsoft: 211kb/s
Vous obtiendrez surement des résultats différents, le but n'est pas de comparer les sites entre eux mais d'avoir une idée du débit.
Je préfère exclure smugmug pour le moment et on s'aperçoit que l'on tourne à environ 200kb/s.
Une image de 200k mettra donc 1 seconde, une image de 800k mettra 4 secondes, etc...

Philippe Leroy

#20
Décembre 06, 2014, 18:02:38
Perso, les images sur mon site je les redimensionne en 1600 x 1200 puis "enregistrer pour le web" à 100% de qualité.

Ce qui donne des fichiers d'environ 0,9 Mo à 1,5 Mo.

Elles s'affichent en 1600 x 1200 au maximum, et sont redimensionnées automatiquement pour les écrans (ou fenêtres de navigateur) plus petit(e)s.

Avec l'ADSL qui devient la norme, je trouve qu'elles ne trainent pas trop pour s'afficher. Je viens de passer au VDSL et là c'est vraiment rapide pour l'affichage.
Hormis le poids des images, il faut un bon hébergeur et un bon codage de site pour optimiser la vitesse d'affichage du site et des images.

Verso92

#21
Décembre 06, 2014, 18:31:32
Citation de: esolarc le Décembre 06, 2014, 12:44:30
En effet je suis donc passé à une qualité de 10/12 avec CS6

Gourmand...

Charlie47

#22
Décembre 07, 2014, 16:34:17
Citation de: Verso92 le Décembre 06, 2014, 18:31:32
Gourmand...

Comme tu dis, oui... 50/60% c'est largement suffisant et ça ne se voit pas (preuves à l'appui si nécessaire), surtout sur des tailles d'images de ce format.

esolarc

#23
Décembre 07, 2014, 18:08:16
Je ne serais pas aussi catégorique... je suis en train de refaire toute mes images pour mon nouveau site et dès que je descend en dessous de 9/12 au niveau qualité (donc Elevée) ça se voit, notamment dans les zones floues ou des petit détails clairs sur une façade par exemple, cela se pixelise.

C'est pas énorme mais ça se voit...

Charlie47

#24
Décembre 07, 2014, 19:48:10
Ah j'aimerais bien un exemple, côte à côte de la même image à 9/12 et 6/12  :)
J'avais soumis, sur un site de diaporamas, un montage avec la même image à 4 taux différents allant de 100 à 30.... Les résultats étaient surprenants et en tout cas jamais conformes à la réalité... J'avais aussi, dans la même image, mis une partie à 80 et une autre à 50, et personne n'a pu déceler la partie à 50 ....
Mais je ne suis pas sectaire et preneur d'exemples concrets bien sûr, sachant quand même qu'en regardant un image sur un site, il est impossible de définir un niveau de qualité (peut-être sur des lisières, si, genre ciel bleu sur un relief uni... )

wis-titi

#25
Décembre 07, 2014, 23:13:19
Ok avec esolarc, je confirme que si on descend trop dans la compression en dessous de 70, on constate une vraie perte de définition visible dans les détails et des effets indésirables genre flare sur un ciel bleu. Les essais je les ai fait mais ne les ai pas gardé, 70 est vraiment limite.
Il faut aussi prendre en compte que dans la construction d'un site, il y a une retaille de l'image de base et une redéfinition de la compression lors de l'upload avec la GD ou Imagick (librairies php). Dans le cas où la compression a été laissée à 100 dans la GD, l'image ne subit aucune modif et est donc au tel mais pèse aussi un poids en conséquence ralentissant son affichage.
Pour une image à 800 ou 900 px ce réglage est nécessaire. Si l'image ne dépasse pas 3 ou 400px on peut descendre à 60.
Cette notion est importante pour un site responsive ou offrant un full screen, étant donné qu'au plus l'écran de visualisation sera grand (28 ou 30") et fin (genre Eizo) au plus la qualité de l'image s'en ressentira.
Et comme le souligne Philippe Leroy, la qualité du serveur n'est pas anodine et encore moins celle de la construction du site, c'est un métier. :)

le_ffrench

#26
Mars 10, 2015, 13:51:24
Je me permets de répondre sur un fil un peu ancien pour quelques inputs.

Sur un site consacré à la photo, les visites sur tablette et mobile peuvent être moins nombreuses car les gens le consultent plus à tête reposée, devant un grand écran.
Sur le mien, elles ont décollé suite au passage en responsive : 35% de tablettes et mobiles au lieu de 20% avant.
Mais les résolutions les plus utilisées restent celles de desktop/laptop/grande tablettes

Le fait d'utiliser un template responsive ne dispense pas de se préoccuper de la taille des images, au contraire ! La plupart des galeries en ligne ne chargeront qu'une seule taille et adapteront la largeur à l'affichage (avec les CSS des images : max-width:100%). Mais le problème après c'est le poids et le fait que dans la plupart des galeries on travaillera sur une seule résolution. Il faut rester raisonnable car tout les utilisateurs mobiles ne verront pas le site en 4G/Wifi.

Si vous uploadez des images sur un FlickR ou autre, vous pouvez les mettre à la qualité que vous voudrez, le site les retraitera par la suite : resize et compression. Donc à moins de les mettre directement sur un site, pas la peine de sauvegarder en qualité 12 en espérant être au top !

Diffuser des images de très grande taille rend plus difficile l'utilisation d'un watermark : il parait vraiment très gros et gênera les utilisateurs. Paradoxalement, c'est là qu'il sera le plus utile. Poster une photo en grande taille sur le web, c'est donner beaucoup plus de possibilités de la récupérer/recadrer, voire même de l'imprimer.
J'ai trouvé une de mes photos imprimée en quart de page sur un magazine et elle n'était qu'en 800 x 600 !

Bref, ma reco est la suivante : définir une taille max d'affichage par support (ton site, FlickR, 500px) et créer les profils d'export correspondants.

Une dernière chose : la taille des images n'est pas la seule raison pour des temps de chargement longs. Un WordPress bardé de plugins et hébergé sur un mutualisé sera bien plus lent que des galeries en ligne qui tournent sur des serveurs bien plus performants.
Deux outils pour analyser et avoir des pistes d'optimisation :
http://www.webpagetest.org/
http://gtmetrix.com/

RV

#27
Mai 08, 2015, 13:20:36
Bonjour à tou(te)s,
à titre d'exemple, le choix fait pour focale31 :
Toutes les images uploadées sont automatiquement redimensionnées en 800 x 600 pixels (800 px de largeur pour les horizontales, et 600 px de hauteur pour les... verticales). Les images de taille inférieure ne sont pas redimendionnées (ouf...)
Le tout sans compression afin de conserver tous les détails autant que faire se peut.
La version mobile du site affiche le même jpg mais aux dimensions adaptées au support (smartphone, tablette).
Depuis peu le quota de chacun(e) prend en compte le nombre de photos et non plus leur poids (un petit "cadeau" permis par une augmentation du stockage sur le serveur Nuxit - http://www.nuxit.com).
En moyenne le poids d'une image est de l'ordre de 150 à 200 Ko.

Hervé
Webmestre de focale31
http://www.focale31.com

hubert35

#28
Mai 16, 2015, 21:12:57
Sur mon blog dans mes derniers articles les photos sont en 900 x 600 ou 600 x 900 et je limite le poids à250ko . Je résultat me convient mais cela n'engage que moi.
http://hubert35.net

Auvergnat63

#29
Mai 20, 2015, 07:40:54
Perso j'hésiterais à dépasser 800 à 1000 px (grand maxi) non pas à cause du "poids" des photos mais à cause d'un piratage éventuel de mes photos

GG_

#30
Mai 29, 2015, 23:19:50 Dernière édition: Mai 29, 2015, 23:31:56 par GG_
Moi je trouve qu'on n'apprécie pas aussi bien des images de petite taille.
C'est pourquoi j'ai refait mon site en proposant des images pleine page et même plein écran.
J'ai fixé la taille à 1000 pixels de haut max, j'ai donc des images horizontales de 1500x1000 et des verticales de 670x1000 pixels.
J'ai ajusté le taux de compression pour avoir un poids entre 100 et 300 KB.
Je trouve que l'affichage des images de cette taille passe bien une fois re-échantillonnées pour être affichées sur un écran en 1920x1200 pixels.
Mettre des images de grande taille et sans copyright moche est un choix.
Imprimer
En haut Pages1 2 Toutes
Actions de l'utilisateur