Have you ever gone to a website (your own site maybe?) that has several small thumbnails but they take forever to load? It’s because people insert an image into the paragraph/article and then resize it to fit their needs by adjusting the pixel width/height in the code. Wrong method buddy! What you’re doing is taking a huge image (let’s say 750×380px) and sizing it down to a thumbnail (45×27px). Yes, the page will show the thumbnail sized image now but it’s loading the entire 750×380px image and eating up your bandwidth!
When you need a thumbnail that links to a bigger image, you should create a separate thumbnail image apart from the full-size image that will appear in the full article layout. Using Photoshop is the easiest way to do this because it does two things, retains the image’s ratio when you re-size & maintains excellent image quality. I’m sure you’ve seen those really grainy or pixelated images when people stretch them out or re-size them down way too much.
(Not familiar with image optimization or photoshop? Let us help)
Hey Joshua,
Good points. It’s super annoying waiting for what looks like a tiny thumbnail image to load and it turns out to be a 2MB image that’s been resized by using the HTML image height and width properties.
The solution is to have a high quality original image and a lower resolution, resampled thumbnail. The problem with that approach is that you now have to keep up with two images.
One way to get around this is to use a dynamic thumbnail script like phpThumb (http://phpthumb.sourceforge.net/ more at http://www.google.com/search?ie=UTF-8&q=php+automatic+thumbnail). These will allow you to upload one high-quality image, and generate a resampled thumbnail when needed.
- Bryce
thanks for the script!