Chargement et redimensionnement des images par le navigateur

[martinn7]

Salut à tous!

Sujet probablement déjà abordé, mais je n'ai pas retrouvé de réponse satisfaisante.

Imaginons le cas d'école suivant: une page internet avec un div principal où sera affiché une image de grande taille, et en dessous une série de thumbnails. L'idée est que lorsque l'on clique sur un thumbnail, l'image correspondante s'affiche dans le div de grande taille.

Dans ma conception, on charge toutes les images de grande taille, on les superpose les unes aux autres, et avec un peu de CSS et js on peut faire tourner le truc correctement.

Il existe deux solutions pour le chargement des thumbnails:
- charger les mêmes images mais redimensionnées par le navigateur
- charger de nouvelles images plus petites au format et dimensions adaptés

Mes questions sont les suivantes:
- Si une image est dupliquée dans la page, quelque soientt les dimensions, le navigateur doit-il la télécharger deux (ou plus) fois?

Si la réponse est oui, la seconde solution s'impose.
Si la réponse est non, alors la première solution peut s'avérer viable. Mais l'est-elle réellement sachant qu'on laisse le navigateur faire le boulot de redimensionnement? Quel temps de chargement cela implique-t-il, peut-on le comparer au temps de téléchargement des images?

- Le fait d'indiquer les dimensions d'une image dans le code HTML ou CSS va-t-il ralentir le chargement d'une page si les images insérées sont déjà aux bonnes dimensions? (je pose cette question pour savoir si on peut mettre une petite sécurité en place au cas où, par exemple, quelqu'un d'autre aurait la possibilité d'updater le site avec des images potentiellement aux dimensions non conformes, le mieux étant de faire le redimensionnement offline, j'en suis bien conscient)

En espérant avoir été clair!

Bonne journée

[Muchos]

Si une image est dupliquée dans la page, quelque soientt les dimensions, le navigateur doit-il la télécharger deux (ou plus) fois?

Elle n'est téléchargée qu'une fois. Par exemple, avec cette page de test, son rapport de chargement (voir Timeline) nous le prouve.

Le fait d'indiquer les dimensions d'une image dans le code HTML ou CSS va-t-il ralentir le chargement d'une page si les images insérées sont déjà aux bonnes dimensions?

Non, au contraire. En effet, le navigateur charge d'abord le code html, puis le code css et enfin les images. Que la taille soit dans le html ou le css, c'est intéressant parce que le navigateur prépare mieux la mise en page en définissant à l'avance la place des images.

Dans ma conception, on charge toutes les images de grande taille, on les superpose les unes aux autres

Je ne suis pas convaincu de cette conception. Pour moi, il faudrait des images réduites à l'origine dans la partie thumbnail, et lorsqu'on clique sur l'une, le JS appelle l'image en version grande correspondante. Qu'en penses mes camarades ?

Dans tous les cas, l'optmisation des images est ici prépondérante.

[martinn7]

Salut Jonathan,

Merci pour la réponse. Je pense que tu as raison quant à la conception, Je me suis inspiré d'un slideshow, et effectivement si les images sont nombreuses cela semble lourd à charger. N'ayant que deux images par produit, je suis allé à la solution la plus simple pour gérer les fadeOut au changement d'image. Probablement pas la meilleure!

[martinn7]

Nouvelle question, mais à l'échelle d'un site cette fois, et non plus d'une unique page.

Imaginons qu'une même photo, celle d'un produit, soit disponible en 3 tailles sur 3 pages différentes:
- grande taille dans le slideshow homepage
- medium dans la page listant les produits
- thumbnail et grande taille dans la page de présentation dudit produit

Quelle optimisation?
- Stocker trois images aux formats adéquats sur le serveur, que le navigateur chargera sur chaque page?
- Charger l'image full size une bonne fois pour toutes en homepage et tabler sur le fait que le cache du navigateur rendra la navigation sur les pages suivantes plus rapide

Merci d'avance