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... )
Imprimer
En haut Pages1 2 Toutes
Actions de l'utilisateur