Question

Basically what I am asking is, is there a way to have say a 1000×1000 pixel image and simply have some sort of code, whether html, css, or anything else to only download a resized verison of 100×100 pixels. Is there any way to do this? I would like to know before resizing each of my pictures and uploading them and linking those photos to the original larger version. Thanks.

Answer 1

You can’t do it with HTML/CSS but it is possible with a server side language like PHP. Here’s a script that will allow you to resize images.

The catch is that resizing images can be a server intensive process. You should try to make sure that once you’ve created a resized version of an image, it’s cached on the server for subsequent requests.

Along those lines, the flow should be:

1. Image request comes in.
2. Does the resized thumbnail exist in the server’s cache? If yes, serve the thumbnail.
3. If no, create the thumbnail, place it in the server cache and serve it.

Note: James brought up a good point in the comments. If the images you’re resizing are going to change (updated/edited), you’ll need to keep track of their large image’s last modified date when you create the thumbnail (as part of the filename or in a database).

That way, when you check the cache, you’ll be able to tell if the thumbnail needs to be regenerated.