How does a double <img> tag work?

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.