Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 4 sur 4
  1. #1
    Invité de passage
    Inscrit en
    février 2007
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : février 2007
    Messages : 6
    Points : 1
    Points
    1

    Par défaut 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

  2. #2
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 473
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 473
    Points : 3 093
    Points
    3 093

    Par défaut

    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.

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  3. #3
    Invité de passage
    Inscrit en
    février 2007
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : février 2007
    Messages : 6
    Points : 1
    Points
    1

    Par défaut

    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!

  4. #4
    Invité de passage
    Inscrit en
    février 2007
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : février 2007
    Messages : 6
    Points : 1
    Points
    1

    Par défaut

    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

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •