5568 sujets

Sémantique web et HTML

Chargement images

Bonsoir à tous,
Je viens de mettre mon site en ligne, c'est un site pour un photographe donc principalement à base d'images. Le problème? il est très long à charger. Comment optimiser le chargement? Les images sont déjà en jpg à 72 dpi. Voici le lien: http://www.julesegger.com
Merci pour votre aide,
Charlotte
Bonjour,

sur la première page, une photo fait encore 824 kb....(vignette_18.jpg).

pas de menu mais plusieurs images sur la page de présentation. Alors moins d'images car trop d'info à la fois pour les n'yeux et pis un menu?

sur les pages suivantes, tu mets à l'horizontale beaucoup trop d'images. Même optimisées pour le web, c'est trop, beaucoup trop. Smiley decu

L'ascenceur horizontal, c'est pas top.
je te conseillerais de "morceler", enfin de réduire le nombre d'images par page, cela les mettrait un peu mieux en valeur. Smiley cligne

les ressources sont limitées, les photos en "bouffent" pas mal.

très, très belles images, toutefois. Smiley biggrin
FloydinBremen a écrit :
Bonjour,

sur la première page, une photo fait encore 824 kb....(vignette_18.jpg).

pas de menu mais plusieurs images sur la page de présentation. Alors moins d'images car trop d'info à la fois pour les n'yeux et pis un menu?

sur les pages suivantes, tu mets à l'horizontale beaucoup trop d'images. Même optimisées pour le web, c'est trop, beaucoup trop. Smiley decu

L'ascenceur horizontal, c'est pas top.
je te conseillerais de "morceler", enfin de réduire le nombre d'images par page, cela les mettrait un peu mieux en valeur. Smiley cligne

les ressources sont limitées, les photos en "bouffent" pas mal.

très, très belles images, toutefois. Smiley biggrin


Merci pour tes conseils, cependant c'est l'ami pour qui j'ai fais le site qui veux garder ce design.
Modérateur
Bonjour,

Tu as mis les images en jpeg mais tu ne les as pas optimisées, elles sont sûrement en 100%. J'ai testé avec une de tes images, que j'ai réenregistré en jpg =>

original jpeg 100% => 113 Ko
jpeg 90% => 64 Ko
jpeg 70% => 34 Ko

En dessous on commence à voir trop l'artefact jpeg pour un site de photographie ce n'est pas acceptable. De plus je suis parti d'un jpeg à la base donc qui contient déjà des pertes.

Tu peux aisément gagner jusqu'à un tiers de la taille des images, et ainsi diviser par trois le temps de chargement sans perte importante de la qualité.

Si cela ne convient toujours pas, tu peux encore utiliser je jpeg progressif, technique quelque peu oubliée de nos jours, mais toujours intéressante.
Elfy75 a écrit :
Les images sont déjà en jpg à 72 dpi.

Nope, tes images ne sont pas à 72dpi. Mais c'est un détail.

Sur la home, les vignettes ont un poids correct. Peut-être légèrement optimisables avec ImageOptim mais pas de grand chose d'après mes tests. Tu peux éventuellement gagner en fluidité d'affichage en faisant une grande image plutôt que des vignettes et en utilisant une image map pour les liens, ou encore en faisant 5 images regroupant chacune 4 vignettes (une par ligne) avec là encore une image map. Le tout en veillant bien à enregistrer tes images en JPEG progressif et à les optimiser correctement. Tu diminues ainsi le nombre de requêtes HTTP et permets au navigateur de charger les images en parallèle (les navigateurs modernes font jusqu'à 6 requêtes HTTP en parallèle, quand tu as 20 images ils font obligatoirement ça en 3 ou 4 fois ou plus...).

Pour les pages de galeries:
- Les images peuvent être optimisées plus que ça. J'ai croisé une image de 250ko pour des dimensions de 468×500, c'est clairement excessif. On visera sans doute dans les 100ko par image (après il faut juger de la qualité du rendu, il y a une problématique de qualité et d'image de marque à prendre en compte!). Enfin sur les images actuelles avec ImageOptim je gagne entre 15 et 40% (peut-être des profils ICC embedded à supprimer).
- Les pages étant longues avec beaucoup d'images hors cadre, il faudrait utiliser un script JS de chargement progressif: charger uniquement les images si elles sont visibles ou pas loin d'apparaitre dans le viewport. (On évitera sans doute de se reposer sur une lib JS telle que jQuery ou autre, vu qu'on en a pas l'utilité pour d'autres fonctionnalités et que ça rajouterait un temps de chargement inutile.)
Sujet clos
Aller à