Make browser cache the image

I have an image on my site which is rather big (about 200kb). I have no plans to change it in near future. How can I tell browsers to ca开发者_运维百科che it?

---

Setting correct headers helps you a lot.

Expires: Thu, 15 Apr 2012 20:00:00 GMT

Setting this header tells the browser when to refresh this resource. See http://www.web-caching.com/mnot_tutorial/how.html for more information.

ETag: "10c24bc-4ab-457e1c1f"

The ETag is sent to the server, on second visit. If it still has the same, it sends a 304 - not modified.

See http://developer.yahoo.com/performance/rules.html for more information, Chapter Configure ETags

---

By default the browser caches the image (unless you tell it not to), and asks the server if it has chaged before downloading it again. If the image is static, the server will be able to correctly answer that the image has not been modified, and the browser will download it only one time.

You can avoid the browser from asking the server if the image was modified by setting and Expires and Cache-Control headers.

For example with apache, with the mod_expires enabled:

<FilesMatch thefilename.png>
    ExpiresActive On
    ExpiresDefault "access plus 1 year"
</FilesMatch>

This will set the Expires and Cache-Control headers so that the browser will not check if the image was modified during 1 year after it has first downloaded the image.