thumnail sizes on product listing pages

11 Apr 2010 - 10:38am
6 years ago
2 replies
917 reads
Jean Schiller

Hi all,

Does anyone know of a guideline for how large a thumbnail image should be on a product listing page?  I know it is dependent on the type of product, but I'm looking for more guidance than that if there is any.

Thanks in advance,



11 Apr 2010 - 12:57pm
Simon Thulbourn


It depends on the site, one could not say what size they should be. It depends on a  few things.

  • Could the user see the product with some detail without having to click the thumbnail
  • Are you cropping the image to be a specific exact shape (such as a rectangle or square)?
  • If you're not cropping, are you creating the thumbnails so they reflect the aspect ratio of the source image?
  • How many thumbnails you're displaying.
  • How you're displaying the thumbnails
As you can see, there are a few things to consider.
— Simon Thulbourn


11 Apr 2010 - 1:28pm

To expand on Simon's first point concerning if the user can see some detail without have to CT you should take into consideration the main demographic of your visitors.  I work on web production for a photo gallery and eCommerce site targeted at low vision/blind users, and since the CMS solution produces more standard thumbnails when uploading photos (135-180px width/height) I have to go in and replace the generated thumbnails with larger thumbnails as well as make some CSS changes since mose of the visitors will require the larger size to view some detail.

Also aside from the size keep in mind the background color used in thumbnails which is more common in eCommerce sites.  I had a client who had used a light blue canvas color and did not save the layered product graphic files, and when they were going through a redesign that featured a completely new color scheme we had to go in and update every single product image with a new canvas color which added scope creep and overage costs to the project.  Some tips we picked up from this case were to a) use a standard white canvas color b) do not include the border in the thumbnail - add it using CSS if needed and c) always save the layered files if you produce the graphics (or request the originals from the client's designer) in case you have a picky client who wants to change the canvas color down the road.

Syndicate content Get the feed