Sizing Images Correctly – Part Two

This post follows on from what we looked at from Sizing Images Correctly – Part One and looks at another issue as to why correct image sizing is important.

Example Perfume Bottle Images

As you can see above there are 3 images of a perfume bottle which in fact are exactly the same image. The image on the far left is an original whilst the image in the middle has had the width pixels increased by 50px and the final one on the left has been increased by 50px in height.

The reason for showing these examples is to show what a difference in terms of perception it makes when images have been resized using HTML in order to fit the current system and layout. If this was potentially a product on an ecommerce site I would automatically as a user be expecting if I purchased the product a fatter or a much taller bottle from viewing the last 2 images.

This may seem a really obvious point to make yet I’ve seen many sites and not just ecommerce ones which contain stretched images just so that it fits nicely within the template and the design. This kind of issue can be avoided by simple spending time cropping each image or adjusting the canvas size which admittedly is a brain numbing as well as time consuming process. Admittedly for sites which contain a large number of product images there are batch image resizing programs available to download. As a worst case scenario if each image needed to be manually resized this is surely worth the effort in order to provide images with the correct perspective.

About The Author

Jacob Wyke is a web developer from the UK who makes complex things simple on the internet. He develops a batch image resizer for Mac OS X called ImageXY which you should try if you ever need to resize anything for the web.

You should also follow him on twitter.