Good Image Processing (pt.5) Image Orientation.

Next Post

In this fifth part of my series on good image processing deals with making the most of your products so that your thumbnails and zoomed in views are as effective as possible.

Orientation

So your ecommerce site images up till now have all been loosely similar (rolls of tape, a kettle, cuddly toy, etc.) all filling a block of space in the centre of your master image template. Then you get a pen. Doesn’t sound like an issue but once you scale down a pen from a full image to a thumbnail it can be shrunk to the point of being invisible. This goes for any image that is much longer or wider than the opposite axis.

Try doing a google image search on “Pens”. You’ll see the vast majority of the images a displayed either in groups of pens, a close up of the nib or diagonally, to use the space as effectively as possible.

Here is a quick example with 3 versions of the same image at 400x400 pixels on the top row and below the same image after resizing down to 100x100 pixels.

  • Firstly the pen image is centred with plenty of white space around it, just like most of your product images will be. You’ll notice how lost the product appears as it occupies such a limited sliver of space in the middle of the canvas.

  • Another image uses a zoomed in image of the nib and base of the barrel of the pen. It has a lot more detail and fills more of the canvas with the pen but there’s still a lot of background and you can’t see the whole stem or cap of the pen.

  • Lastly an image of a pen laid diagonally through the canvas. The pen is shown in its entirety and uses the space more effectively than either of the first two images.

image resie in progress


Reducing to a thumbnail

We can now we take these images and apply the resizing down to 100x100pixels

  • As you can imagine the first pen image when resized down to 100x100px virtually all the detail is lost.

  • The second pen image nib is in detail but it still suffers from the fact you get no impression of the cap and full stem.

  • The third fills the space well and even at 100x100px there is a reasonable amount of detail.

 

This is the last in my current series of blogs on image processing however after a short break onto other topics part 6 will return with helpful hints on backgrounds and borders later in the year.


By Alanna at 6 Jun 2014, 14:41 PM