I am using an image as my site background that is of size 2.7MB. Because of its image size alone it takes 7+ seconds for the page to load.

Question: Can/How do I cache this background image at user's browser caches that it is not downloaded every single time?

Basically, i understand that first load will be slow but if cached - subsequent loads would be faster then.

closed as off topic by Chapabu, Clive, user842, googletorp Nov 12 '12 at 22:24

Questions on Drupal Answers are expected to relate to Drupal within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 4
    Not Drupal question. – kalabro Oct 25 '12 at 7:59
  • 1
    2.7MB background image lol revise your strategy... – Alex Gill Oct 25 '12 at 9:16

The default drupal .htaccess settings should have your browser cache this image for 2 weeks. If this is not working I recommend installing the mod_expires module & the mod_headers module on your server. If 2 weeks is not long enough, you will need to modify your .htaccess file to set the expires & cache control headers for this file. An example of that below:

<FilesMatch "my-big-image\.jpg$">
  <IfModule mod_expires.c>
    # Enable expiration.
    ExpiresActive On

    # Cache this file for 1 year after access (A).
    ExpiresDefault A31556926
  <IfModule mod_headers.c>
    # Make this file publicly cacheable.
    Header append Cache-Control "public"

At a bare minimum, you can try adding this line to the bottom of your .htaccess file. This doesn't require any apache modules to be installed and it should have your sever send back a small 304 instead of a large 200.

FileETag MTime Size

First of all a 2.7MB background image doesn't do any good for anyone (especially for mobiles). So you really need to compress this. Have a look at "save for the web" in Photoshop or similar applications.

To make clients cache this you need to configure the expires headers. Have a look at "Expires or a Cache-Control Header" of http://developer.yahoo.com/performance/rules.html

Not the answer you're looking for? Browse other questions tagged or ask your own question.