1

I searched for it and can't find it, sorry if it does exist. Anyway, here it goes:

I was wondering what happens if you double an <img> tag in the same HTML page. Does the image download twice? Does the browser detect that and load it only once? Thanks in advance.

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
Daniel Higueras
  • 2,404
  • 22
  • 34
  • 6
    It will only download once. – JCOC611 Feb 13 '11 at 23:14
  • 2
    It depends on the browser, really. – Phrogz Feb 13 '11 at 23:15
  • 2
    +1 to JCOC611, it downloads it once, caches, and renders it wherever it's referenced. – James Love Feb 13 '11 at 23:15
  • If the server includes a no-cache or similar directive in the response headers, the image shouldn't be cached on any browser. It will vary with the browser whether the image will be shared among doubled <img> tags on the same page. – Ted Hopp Feb 13 '11 at 23:21
  • 1
    As a self-learning exercise, install [Fiddler](http://www.fiddler2.com), setup a test page and track the HTTP traffic generated by various browsers. – BalusC Feb 13 '11 at 23:22

3 Answers3

5

In theory some really stupid browser (or some browser that for some particular constraint doesn't have a cache or have a very small one) can download the image twice.

In practice, all the major browsers in use today have a cache, where every downloaded element (including elements referenced by the page that is being loaded) is usually stored to avoid downloading many times the same thing.

Still, the usage of the cache is regulated by the Expires, Pragma no-cache, Cache-control HTTP headers (and maybe a few more, you can find all the headers here) and their meta equivalent if the object being downloaded is an HTML page.

Long story short, if the web server says that some object must not be cached or has some maximum cache time the browser should obey. In general, for static content the webserver will not provide any cache modifiers unless explicitly told so, so the browser should cache images & co without problems.

Matteo Italia
  • 123,740
  • 17
  • 206
  • 299
0

Unless your images are sent with "no-cache" headers, if the same URL is used for the image both times, users' browsers will likely only download the image once.

However, this answer to a question about Control+F5 indicates that Firefox 3.5 (and higher?) will download resources multiple times if a "hard refresh" is performed.

Community
  • 1
  • 1
ClosureCowboy
  • 20,825
  • 13
  • 57
  • 71
0

That depends on the browser, but the (very) vast majority will recognise it, and download it only once.

If you wanted it to download twice you could always include a query parameter, such as example.com/image.jpg?unique=1 and example.com/image.jpg?unique=2, which the browser should see as separate images.

Adam
  • 5,091
  • 5
  • 32
  • 49