Question

I am building a networking website which allows users to upload images.

When one user (user1) views another user’s (user2) profile page, often the cached images display instead of the new images user2 has recently uploaded.

I can’t set the header to prevent caching, as the design of the site has a common header/menu/navigation for all pages on the site, and this would have a very significant impact on bandwidth/site performance.

My question is thus:

Using PHP, JavaScript, HTML, or inline CSS tags, is there a way to prevent individual images from being cached? Or to ensure they are loaded fresh on each page view?

Answer 1

Ideally, you would set your server accordingly to send the correct headers.

A shortcut method is have your PHP page output a random number or timestamp at the end of the image URL:

<img src="yourimage.jpg?<?php echo time(); ?>" />

Use your templating engine or whatever to separate the PHP from the image where possible.

A third option is to use a PHP script to return the image, and set the headers there.