Website Design Options - Automatic Image Resizing

If you're selling products on the web, you need to incorporate pictures. Whether you're selling something as artistic as handmade religious jewelry or something as technical as phone headsets, a bunch of details about the product and a price are not going to catch a visitor's interest. So it follows that when you're building an e-commerce website, you will be including a place for pictures.

Here's the thing; it's a lot of hassle for everyone if you have to hand-code in every new item. If the phone headset site finds a new distributor and gets a hundred new types of headsets in, or the religious jewelry site comes up with a new rosary necklace every week or so, they'll need to be able to add the new products. That's why you've created a fancy database-driven CMS, so they can add in the information and it automatically populates to the website.



But what happens when the new phone headset distributor sends a bunch of 1,500 pixel images when your system is designed to display 100 pixel thumbnails and 500 pixel normal images? What happens when the religious jewelry pictures are all high-resolution images that will take far too long to load? When the site layout is based on the idea of the images being a certain size, and then new images are introduced that aren't that size, problems occur.

Now, you might be saying, "Oh come on, this is easy, just include a width=whatever height=whatever in your image tag and call it a day." If so, hit yourself. I'll wait.

See, the reason you see those attributes added to the images so often is, the great majority of the time, because it helps with getting the images indexed in the search engines. It's not to actually set the image size. If you try to set the image size with them, the quality is dramatically reduced. And, if you're sizing down, you wind up dealing with full-size loading time for a part-sized image.

Your next option is to get the client to make sure any images it uploads are properly sized. Not too likely. Aside from the very real possibility that they'll forget what sizes to use, make a mistake, just not bother, or try to do it with Paint or something equally ludicrous, that's just giving them more work, and one of your jobs is to minimize the amount of work and complexity they have to deal with for running their website.

So how do you get these phone headsets to fit in the proper format, and these religious jewelry pieces to load in an acceptable amount of time? Well, it just so happens that there's some php code that can resize images automatically on the server. It's not perfect for enlarging, but it does a pretty clean reduction, and it's not too hard to code up a loop that will run through existing images to size them, and then add the resizer to the backend of the admin - right by where the image uploads works. Personally, I prefer setting some variables to determine the size and folder of the image, and then having it size the image in the chosen ways (a thumbnail, standard view size, and full size, for example), and save each to their own folders, keeping a single image column in the database.

So, when working on admin systems for e-commerce sites, from phone headsets to religious jewelry, expect there to be pictures. Prepare for them for the first batch of uploads and for future updates by including dynamic image resizing. It will make things easier on you and the client, and result in a cleaner, nicer-looking, and more easily updated website.