Utiliser DATA dans un src d'image

Bonjour,

Je voudrais, pour certaine image, les préchargé en une seule fois sur la page
(par exemple, l'image 'loupe.png" est utilisé à plusieurs endroit dans la page, je voudrais utiliser l'aller-retour serveur pour charger à chaque fois l'image)

J'ai regardé du coté des sprites css mais cela me semble rigide
il semblerait que je ne peux pas utiliser une image en 64x64 et utiliser celle-ci dans différentes taille (16x16, 32x32...) a partir de la même image
Détrompez moi si j'ai faux

Je réfléchissais à m'orienter sur un traitement de mon image en utilisant une balise data:
exemple :

Code:

---

<img src='data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" style="width:16px;height:16px" />

---

L'idée serait de charger mes images dans des variables JS et et les utiliser de cette manière. De ce fait je n'aurait plus de multi aller retour serveur et cela me semble assez pratique à manipuler.

Quelqu'un utilise cette méthode ?
Est ce une bonne méthode ?
Y en a t'il une autre plus simple ?

Merci
Sylo

Si tu utilises 25 fois la même image sur ta page, le navigateur ne va pas la chercher 25 fois sur le serveur...
Si tu utilises la même image sur 25 pages de ton site, le navigateur ne va pas la chercher 25 fois sur le serveur...
C'est le principe même de la notion de cache navigateur.

Pour t'en persuader, ouvre la console de développement du navigateur sur l'onglet réseau.

Concernant les URI en data: (et précision, on ne parle pas de balise dans ce cas) c'est une technique comme une autre qui est valable pour les petites images (parce que dans la vraie vie, les data URI, c'est beaucoup plus gros que dans ton exemple) mais ça alourdi beaucoup le code et c'est moins facile à maintenir quand tu dois changer l'image en question.

Merci Bovino,
Tes éclairages sont clair pour moi
Donc j'abandonne mon idée et en reste à ma méthode de base
Merci
Sylo