Chargement et redimensionnement des images par le navigateur
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
