How does browser caching handle hotlinked images + 204 responses?

Question

I've seen a few conflicting answers across the net and I'm trying to understand this at a fundamental level. Say I have an image hotlinked (yes, with permission) on my site:

<img src="externalserver.com/catpic.png">

1. Assuming all relevant parties have browser caching enabled, will this image be cached (aka are images from external sites even cacheable)?
2. If the external server decides to serve a different image at the same file location, say with an .htaccess re-write, will the cache be broken?
3. If the external server decides to serve the same image with a ?randomquerystring thereafter, will the cache be broken?
4. If the external server responds with an HTTP Status Code 204 instead of actually serving the image, what happens with caching?

Thanks! Happy holidays y'all.

Answer 1

It all depends.

1. User agent may cache images. Whether it will or will not cache images depends on how server set Cache-Control or Expires header. For more information look at Cache-Control header page at MDN.
2. User agent may or may not get fresh resource. It depends on Cache-Control header, Expires header, whether resource is stale, whether server uses validator and whether it performs weak or strong validation. For more information look at HTTP conditional requests page at MDN.
3. Server doesn't serve resource with ?randomquerystring. Rather, client may request resource with a ?randomquerystring. ?randomquerystring is called a cache buster. User agent will perform new request, but I heard that some proxies may ignore cache buster of that type and still return cached response.
4. User agent propably will respect Cache-Control and Expires headers. Relevant excerpt from RFC 2616:

A response received with any other status code (e.g. status codes 302 and 307) MUST NOT be returned in a reply to a subsequent request unless there are cache-control directives or another header(s) that explicitly allow it. For example, these include the following: an Expires header (section 14.21); a "max-age", "s-maxage", "must- revalidate", "proxy-revalidate", "public" or "private" cache-control directive (section 14.9).

For more information about HTTP caching in general check HTTP Caching article by Ilya Grigorik.