Cache Images

Hello,

How can I cache the images used on a web site design.
Some of them are used in CSS others in the HTML.

I got this suggestion when testing a web site with Firebug.

Thanks,
Miguel

shapper wrote:

Hello,

How can I cache the images used on a web site design.
Some of them are used in CSS others in the HTML.

I got this suggestion when testing a web site with Firebug.

Reuse images, use fewer and get variations using the "sliding door"
method where background-position shows different portions of one image
instead of a bunch of little images...


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

shapper wrote:

Hello,

How can I cache the images used on a web site design.
Some of them are used in CSS others in the HTML.

I got this suggestion when testing a web site with Firebug.

Don't browsers usually cache images by default? I find I have to use
Ctrl-F5 in IE or Firefox on Windows to get images to update in the
browser after I've replaced them on the server.

Harlan Messinger wrote:

Don't browsers usually cache images by default?

Yes, unless the URL contains a "?" (which usually means that the image
is being served by some process which extracts it from something other
than a simple file).

This behaviour used to really annoy me on map websites, because my
browser was downloading the map segments on every reference. In the end
I wrote a kind of "Smart proxy" to cache such images regardless. The
maps are now much quicker, but you have to be on the lookout for missing
recent features, such as new roads. (I set my cache timeout to one year)

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

shapper wrote:

How can I cache the images used on a web site design.
Some of them are used in CSS others in the HTML.

Caching isn't a CSS issue. From the cache viewpoint, a resource is something
with a URL, and its data format (internal structure), not to mention
meaning, is irrelevant.

General suggestion: "Caching Tutorial for Web Authors and Webmasters",
http://www.mnot.net/cache_docs/

Note that two identical resources at different URLs (or, to put it in
another way, one resource with several URLs) is several distinct resources
to caches. Therefore, try to refer to a resource (whether a CSS stylesheet,
an image, or whatever) always with "the same URL" in the sense that the
_absolute_ URL, as resolved by browsers, is the same. So it does not matter
whether you write
background-image: url(foo.gif)
or
background-image: url(http://www.example.com/stuff/foo.gif)
if the relative URL foo.gif resolves to
http://www.example.com/stuff/foo.gif. But
background-image: url(http://xxx.example.com/stuff/foo.gif)
or
background-image: url(http://www.example.com/stuff/foo.gif)
is a different issue, even if xxx.example.com and www.example.com are names
for the same server.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Swifty wrote:

Harlan Messinger wrote:
Don't browsers usually cache images by default?

Yes, unless the URL contains a "?" (which usually means that the image
is being served by some process which extracts it from something other
than a simple file).

I'm doing something similar. I have a stylesheet that I'm sharing
between domains and am encoding an absolute path after the "?":

background-image: url(/logo_2.gif?/some_path);

There's a little rewrite bit on the server (in httpd.conf) that fixes
the path so I don't need to maintain two stylesheets.

The downside is the browser fetches the images fresh each time. How
did you set up your smart proxy, if you don't mind telling? Or is this
specific to your local machine?

Jeff

This behaviour used to really annoy me on map websites, because my
browser was downloading the map segments on every reference. In the end
I wrote a kind of "Smart proxy" to cache such images regardless. The
maps are now much quicker, but you have to be on the lookout for missing
recent features, such as new roads. (I set my cache timeout to one year)

jeff wrote:

The downside is the browser fetches the images fresh each time. How
did you set up your smart proxy, if you don't mind telling? Or is this
specific to your local machine?

Sorry, it's very local to my local machine. Instead of visiting the map
webpage, I use a CGI that I wrote myself. It keeps the map segment
images in a local cache. When it gets a cache "miss", it completely
emulates a browser going to the map website, caching the images that it
downloads as it goes along.

I suppose you could do something similar, using a cgi script to
reference your CSS data. Then instead of the "rewrite bit" in the
httpd.conf, you'd have a bit of "rewrite logic" in your CGI.

I'm not entirely sure that browsers are happy caching the output from a
CGI script, if they realise that's what it is; they have a habit of
returning different HTML each time you reference them. There's no reason
to let the browser know that it's referring to a CGI script, though.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

Swifty wrote:

Harlan Messinger wrote:
Don't browsers usually cache images by default?

Yes, unless the URL contains a "?" (which usually means that the image
is being served by some process which extracts it from something other
than a simple file).

Not so. Browser will cache regardless of the URL, it is the cache
control on the server that counts.

Example here is an image from my browser cache showing an image servered
via a php script that I use on my server as counter image


Key: http://www.littleworksstudio.com/ebay/cms/bc.php?harr0002
Data size: 1709 bytes
Fetch count: 2
Last modified: 2009-07-10 18:39:11
Expires: 1969-12-31 19:00:00




--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Jonathan N. Little wrote:

Swifty wrote:
Harlan Messinger wrote:
Don't browsers usually cache images by default?

Yes, unless the URL contains a "?" (which usually means that the image
is being served by some process which extracts it from something other
than a simple file).

Not so. Browser will cache regardless of the URL, it is the cache
control on the server that counts.

What *server* cache control?

My experience is exactly as Swifty mentions, the browser will not
cache unless there is a query string. Browser settings can alter that,
as well as altering the server image header. But the normal is to cache
unless a querystring, that's what I see.

Jeff

Example here is an image from my browser cache showing an image servered
via a php script that I use on my server as counter image


Key: http://www.littleworksstudio.com/ebay/cms/bc.php?harr0002
Data size: 1709 bytes
Fetch count: 2
Last modified: 2009-07-10 18:39:11
Expires: 1969-12-31 19:00:00

jeff wrote:

Jonathan N. Little wrote:
Swifty wrote:
Harlan Messinger wrote:
Don't browsers usually cache images by default?

Yes, unless the URL contains a "?" (which usually means that the
image is being served by some process which extracts it from
something other than a simple file).

Not so. Browser will cache regardless of the URL, it is the cache
control on the server that counts.

What *server* cache control?

GIYF


http://www.google.com/search?hl=en&q=cache+control+server+setting&btnG=G oogle+Search
cache control server setting - Google Search

My experience is exactly as Swifty mentions, the browser will not
cache unless there is a query string. Browser settings can alter that,
as well as altering the server image header. But the normal is to cache
unless a querystring, that's what I see.

As I said, '?' makes no different. The important thing is that the URL
remains the same (and the server does not send out anything in the
header to tell the browser not to cache the resource) . Below *is* a
cached example image and it does have a *?* in the URL.

Example here is an image from my browser cache showing an image
servered via a php script that I use on my server as counter image


Key: http://www.littleworksstudio.com/ebay/cms/bc.php?harr0002
Data size: 1709 bytes
Fetch count: 2
Last modified: 2009-07-10 18:39:11
Expires: 1969-12-31 19:00:00

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com