Discussion :

[Beginner.]

Salut,

Lorsqu'une page doit afficher plusieurs fois la même image (pensez par exemple à un treeview) est-ce qu'il est possible d'optimiser quoique ce soit ?

Est-ce que l'image sera téléchargée plusieurs fois (plusieurs requêtes ?) ou bien une seule fois même si elle est affichée plusieurs fois (plusieurs fois la balise <img>) ?

Qu'est-qui est le mieux : utiliser plusieurs fois la balise <img> ou bien du CSS (une class, un pseudo-element,...) ?

Merci.

[Beginner.]

Est-ce que l'image sera téléchargée plusieurs fois (plusieurs requêtes ?) ou bien une seule fois même si elle est affichée plusieurs fois (plusieurs fois la balise <img>) ?

En faisant une recherche j'ai vu que cette question avait été posée plusieurs fois ailleurs sur le web... Apparemment l'image ne serait téléchargée qu'une fois (c'est vrai qu'en regardant le "network" je ne vois qu'une requête avec un status "finished"... Est-ce que l'image est mise en cache ?).

[Watilin]

Est-ce que l'image est mise en cache ?).

Oui, ce serait stupide de la part du navigateur de ne pas le faire. Il n’y a qu’un petit nombre de circonstances dans lesquelles l’image n’est pas mise en cache, ce sont les cas où la mise en cache est explicitement désactivée, soit par le client (à l’aide de la technique du paramètre GET aléatoire), soit par le serveur (à l’aide de l’en-tête HTTP Cache-Control ou équivalent).

[Invité]

LOL....

... Est-ce que l'image est mise en cache ?...

C'est justement à ça qu'il sert !

1- Un exemple, pour t'en convaincre : l'utilisation d'un "sprite" (une seule image, pouvant contenir de nombreuses icônes, par exemple).
L'image est chargée une seule fois (et mise en cache).
Pas à chaque affichage d'une icône.


2- a l'inverse, on peut "forcer" le rechargement d'une image avec une astuce :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="image.jpg?<?php echo time(); ?>" />

[Beginner.]

Merci.

Alors j'ai fait une autre recherche pour comprendre pourquoi j'ai le status Finished au lieu de 304 Not Modified...

Apparemment quand on charge la page sans serveur on a le status Finished et avec un serveur on a le status 304 Not Modified...

[Beginner.]

Qu'est-qui est le mieux : utiliser plusieurs fois la balise <img> ou bien du CSS (une class, un pseudo-element,...) ?

Bon à priori ni l'un ni l'autre, c'est pareil ?

[psychadelic]

Une fois une image chargée, le navigateur l'utilise autant de fois que nécessaire en affichage, que ce soit par du css ou pour la partie body de la page, la partie mémoire est la même.

Si je ne ma trompe pas, si un autre site utilise la même image et qu'on l'ouvre dans un autre onglet, ce sera la même image en mémoire qu'il utilisera.
c'est même pareil en JavaScript si 2 sites utilisent la même librarie (disons jQuery) le navigateur partagera la librairie et fera l'économie d'un second chargement en mémoire.

En revanche, si pour une raison ou une autre la dernière utilisation de l' image n'est plus utile (suppression par code de la présence de l'image) alors celle ci peut très bien disparaître du cache par l'action du ramasse miette.

si malgré tout, on veut conserver une image non présente sur l'interface, il faut la garder dans un élément javascript:

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var imageObj = new Image();
imageObj.src ='images/monImage.png';

le chargement de l'image est bien sur asynchrone, et émet un éventement load, lorsque celui-ci c'est achevé ( imageObj.onload=()=>{ .... } )

[Beginner.]

Merci pour ces précisions.

[Watilin]

Une image est avant tout un fichier, autrement dit une suite d’octets. Pour obtenir ces octets, le navigateur doit utiliser :

• son module réseau si tu es en protocole http: ou https: ;
• son module système de fichiers si tu es en file:.

Ensuite, il fait un certain nombre de vérifications : si le fichier est complet et intègre, si le type MIME (à l’aide du nombre magique) correspond bien à un type d’image, etc.
Fait amusant, on peut servir un PNG en déclarant, avec l’en-tête Content-Type, le type MIME d’un JPEG (au moins sous Firefox, je viens de constater ça).

Enfin, le navigateur doit décompresser les données en un tableau de valeurs de pixels (composantes rouge, verte, bleue et éventuellement alpha), et les stocker dans sa mémoire vive. Tu imagines bien que ce ne serait pas efficace si toute l’opération était répétée quinze fois pour la même image.

Quand ton code demande à ce qu’une image soit affichée, le moteur d’affichage accède à ces données de pixels dans la mémoire du navigateur. Ça ne fait pas de différence que tu utilises une balise <img>, une propriété CSS background-image ou autre.