0

I have a feature of "Browse Pictures" where there are thumbnails and when a user clicks it expands.

Now, both these images are stored in separate virtual directories with different sizes, the larger being 200*200 px.

Still it only shows the smaller image when I click it to enlarge, instead of the 200*200 images.

skaffman
  • 398,947
  • 96
  • 818
  • 769
sweta shah
  • 47
  • 5
  • Can you give more details on this and some code samples? :) – zachzurn Jul 21 '11 at 21:21
  • It's not clear to me why you're having a problem. If the images have different names or paths, the browser should be able to tell them apart no problem. Are you generating the images on the fly and giving the same URL to both or some such? I mean if you have an image "thumbnail/sally.jpg" and "fullsize/sally.jpg", the browser should automatically recognize them as two different images and caching should not be an issue. – Jay Jul 21 '11 at 21:27

2 Answers2

5

You can add a random URL parameter to the image's href, so that the HTML rendered looks like

<img src="http://static.example.com/some/large/image.jpg?234234652346"/>

instead of

<img src="http://static.example.com/some/large/image.jpg"/>
Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • 1
    +1. This would work too, but in the interests of performance, it might be wiser just to have ?thumb for all the small images. – Lee Kowalkowski Jul 21 '11 at 21:25
4

It sounds like you don't want to prevent them from being cached as such, but you want to give them different URLs.

If they do have different URLs, then this is not a caching problem.

To prevent caching, you use a cache-control:no-cache HTTP response header when serving the images. (are you using Apache?)

But if you really prevent caching, your data transfer will be higher than it needs to be, every time they visit your gallery, they will be fetching your images.

Lee Kowalkowski
  • 11,591
  • 3
  • 40
  • 46