IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Performance Web Discussion :

Chargement et redimensionnement des images par le navigateur


Sujet :

Performance Web

  1. #1
    Futur Membre du Club
    Inscrit en
    Février 2007
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 6
    Points : 5
    Points
    5
    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
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    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.

  3. #3
    Futur Membre du Club
    Inscrit en
    Février 2007
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 6
    Points : 5
    Points
    5
    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
    Futur Membre du Club
    Inscrit en
    Février 2007
    Messages
    6
    Détails du profil
    Informations forums :
    Inscription : Février 2007
    Messages : 6
    Points : 5
    Points
    5
    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

Discussions similaires

  1. Modifier des images par programmation : C ou Flash ou ?
    Par R.L. dans le forum Développement 2D, 3D et Jeux
    Réponses: 7
    Dernier message: 11/05/2007, 16h17
  2. redimensionner des images
    Par moabomotal dans le forum Modules
    Réponses: 4
    Dernier message: 21/11/2006, 12h12
  3. redimensionnement des composants par l'utilisateur
    Par osoumayaj dans le forum JBuilder
    Réponses: 2
    Dernier message: 05/10/2006, 11h15
  4. Comment empécher l'enregistrement des images par le navigateur ?
    Par zouetchou dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 16/08/2006, 00h14
  5. [Traitement d'image] Redimensionner des images
    Par mireilleturrel dans le forum Webdesign & Ergonomie
    Réponses: 3
    Dernier message: 15/05/2006, 12h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo