Quelle est la différence entre faire référence à un fichier image dans src d'une balise img et faire référence à une image incorporée directement dans une balise image?

Question

Y a-t-il une différence entre utiliser <img src=pathto.png /> et <img src=data:image/png;base64,encodedpngdata... /> du point de vue du serveur?

Dans le cas de src=pathto.png, le serveur va-t-il encoder l'image et l'envoyer au navigateur?

Answer 1

Le premier exemple référence une ressource externe en spécifiant son URI. Cela entraînera donc une demande supplémentaire à cette ressource pour recevoir les données.

Le deuxième exemple référence également une ressource mais les données de cette ressource sont directement incorporées dans l'URI (voir data URI scheme). Donc, aucune demande supplémentaire n'est nécessaire.

Les deux méthodes ont des avantages et des inconvénients:

     external embedded 
separate request (-)  ✓   ✗ 
cachable (+)    ✓   ✗ 
referencable (+)   ✓   ✗ 
compression (+)   ✓   ✗ 

• données sur les ressources externes
  L'avantage d'utiliser une ressource externe est que ces ressources peuvent être mises en cache et utilisées dans différents documents sans demandes pour chaque apparence de ces ressources.
  Un inconvénient est qu'il prend cette première demande supplémentaire.

• données de ressources intégrées
  Un avantage d'intégrer les données relatives aux ressources directement dans le document est d'enregistrer une demande supplémentaire.
  Mais un inconvénient est que ces ressources ne peuvent pas être mises en cache ou référencées sur plusieurs apparences dans un document ou des documents différents. De plus, il ne peut pas être compressé en utilisant deflate ou gzip. En fait, l'encodage Base64 va gonfler la taille du facteur 4/3.

Voir aussi la première règle de Make Fewer HTTP Requestsles meilleures pratiques pour accélérer votre site Web.

Answer 2

La liaison à une image séparée nécessite une seconde requête pour obtenir l'image, mais permet de la mettre en cache et de la réutiliser sur plusieurs pages sans avoir à envoyer à nouveau les données.

plongement dont il a besoin en ligne que les données soient envoyées à chaque requête de page qui inclut l'image (et plusieurs fois si l'image est utilisée plus d'une fois dans une page)

Answer 3

Dans le cas de <img src="/path/to/image.png" />, le serveur gagné 't encoder l'image. Le navigateur le demandera sur une demande séparée , et le serveur videra juste un en-tête court, puis les données du fichier sur le fil. Dans un serveur HTTP bien écrit, il s'agit d'une opération extrêmement rapide, car la quantité de traitement requise est minime. Le navigateur peut également mettre en cache l'image afin qu'elle n'ait pas à la récupérer plus tard (comme d'autres l'ont dit).

L'incrustation en ligne augmente à la fois le poids de la page et rend impossible la mise en cache de l'image séparément.