-1

One can source images on a webpage with usual urls:

<img src="some-image-url" >

or,

with data uris:

<img src="data:......." > // data:[<mediatype>][;base64],<data>

That is similar to having a script inside the HTML document or having a script linked with a script tag with the script's url.

Does second one makes page use much more memory, since it has lots of string data in the document in the img tags' src attributes?

sçuçu
  • 2,960
  • 2
  • 33
  • 60
  • I think I could not have been able to ask what I actually want. I will edit it. – sçuçu Apr 06 '17 at 08:25
  • 2
    Are you asking whether browsers cache `data:...` URIs? Why would they? They don't have to be downloaded separately, hence there's nothing really to cache. The `data:...` is being sent every time as part of the HTML. – deceze Apr 06 '17 at 08:27
  • 1
    Take a look at: [base64 encoded image size](http://stackoverflow.com/a/11402374/1561148) – tgogos Apr 06 '17 at 08:37
  • @tgogos I think this gives the answer to my question you can post it. I think it should be cleared if the url linked image is counts as the page's used memory or not, too. Combined with this it makes the answer in my opinion. and why this down vote for god's sake. – sçuçu Apr 06 '17 at 08:55
  • I haven't down-voted your question :-) – tgogos Apr 06 '17 at 09:04
  • :) I did not mean anybody, anyway, down votes; they are part of the game always – sçuçu Apr 06 '17 at 11:35

1 Answers1

1

Transferring images as data: URIs does two things:

  1. It sends the images together with the HTML page, so they don't have to be downloaded separately and are available immediately to the browser. It removes the lag incurred from a separate HTTP request to get the image.
  2. It sends the images together with the HTML page, every single time, so they cannot be downloaded and cached separately and increasing the size and download time of the HTML document.

"Resource" or "memory" use of the browser will vary by browser and is relatively insignificant. Using external image URIs will be slower the very first time the image is loaded because it needs to be fetched separately, but will be faster on all subsequent requests since it can be cached. Transferring the image as data: URI will equally slow down the HTML document on all subsequent requests. That's the important difference.

deceze
  • 510,633
  • 85
  • 743
  • 889