Way to force caching on a large background image

force caching

[gouldtv]

I am creating a touch-screen kiosk application using a web-server backend, and a full-screen kiosk front-end.

I'd like to cache 2 things: A large 1.2 MB 1680x1050 JPG image that's in the background, and 1 small .WAV file for a click sound-effect.

After doing some digging around, it seems like I should be able to tell the browser to pull these items from cache if I modify the .htaccess file like this:

# Turn on Expires and set default to 0
ExpiresActive On
ExpiresDefault A2592000

# Set up caching on media files for 1 year (forever?)
<FilesMatch "\.(gif¦jpg¦jpeg¦png¦wav)$">
ExpiresDefault A29030400
Header append Cache-Control "public"
</FilesMatch>

However, after implementing this technique, I'm seeing no improvement whatsoever. I don't mind that it takes awhile to download the first time, but I'm finding that on each screen with the .WAV click sound effect, the browser is re-downloading the WAV file each time. I am able to see this by using Firebug and looking through the NET logs.

How can I force Safari 3 to cache these 2 elements and not pester the server for them?

[tedster]

Hello gouldtv, and welcome to the forums.

This might be a server issue rather than a Safari browser issue. I'm assuming you are using an Apache as a local server. Does it have Module mod_expires installed?

[thecoalman]

I had a problem in the past where IE6 wouldn't cache a background image specified in the CSS, not sure exactly why as others reported that is not the case. Never went back to check but I was thinking about it and the thought occurred to me it might be relative URL's...

In any event I just added it to a hidden a div at the end of the html document, If it's the browser causing it that should fix it.

<div style="display:none;">
<img src="yourimage.jpg">
</div>

Having said that 1.2MB is quite large for an image if your using .jpg . I'd optimize it. Saving as .jpg at 75% quality or what many applications will refer to as "save for the web" or something similar should get it down around 500K without much if any noticeable loss in quality. If its a simple image with blocks of color or text that doesn't need a a large color palette you can reduce it even further with .gif with no loss in quality.

Same thing with the .wav , use an MP3 .