Behind the scenes: How we replaced 12,000 rubbish product photos.

Product images are important to our customers. Really important. The vast majority of people visit our website to browse, ogle, and generally render their computers, tablets & phones inoperable as distracted eyes gaze at pretty instruments and dribble seeps in-between keyboard keys and into headphone sockets.

Well… we don’t have any data on how much damage the Andertons website has caused to your electronics (but sorry anyway), but we do know that whenever someone visits one of our products online, almost without exception, the first thing they do is interact with the images.

As recently as 2013, our website ONLY showed product images up to a resolution of 500 x 500px. That’s already ‘too small’ in a world where the screen of an Apple iPhone 4 (2010) displays 640 pixels across its short edge.

To bring our products to life online, we had to up our image game...

Our Challenges

  1. No matter how large the source image, the largest picture we rendered & saved for a product was 500px x 500px
  2. Portrait or landscape, all source images were rendered into squares
    (This creates unnecessary white space)
  3. With 12,000 products listed for sale, we had a lot of work to do…

Hmmm. We’d better hop to it!

1. Size Does Matter

… and with only 500px to play with, we were beginning to develop an inferiority complex. Here’s a keyboard.

A 500 x 500px image. “So, I was wondering, does this one play ‘She’ll Be Coming Round the Mountain’?”

You can clearly see that:

  • 500 pixels is not enough to show any useful detail.
  • You only really get 460 pixels of usable width (to allow for padding).
  • No one has any idea whether the keyboard will play She’ll Be Coming Round the Mountain (and — serious point — pictures really are worth a thousand words; customers can often find all the information they need by looking at a good picture).

In addition to this (somewhat stupidly), when putting pictures into our old system, there was no concept of keeping the full resolution source file. Images were crunched to 500px and 65% JPEG quality, then discarded.

The fix is easy of course. We set a new maximum size of 3000px (how long before this is no longer enough?!) and KEPT the original file no matter how big it was. It’s almost like we were thinking about the future or something!

2. No Room For Squares

It’s a crying square sponge. This is relevant, I promise.

As someone who has had a hand in designing layouts, I must confess that I love a good square! There are no complications in making square product picture work O.K. in any website context. At that point one can concentrate on something more nerdy like coming up with a smart-alec 404 page.

But what about the audience? Well their experience ends up being sub-par. The added white space to match the shorter dimension to the longer dimension becomes an obstacle to using the full dimensions of the screen.

Objects normally shown in landscape like keyboards and drum kits are a good example here. You can see below how much more detail the user can experience if the unnecessary white space is eradicated.

I’ve overlaid the yellow lines to show the edges of the source pictures.

Today: we produce a number of “original aspect ratio” versions of the source image at different sizes. Squares can be pretty awesome in the right context of course, so we still keep a few of those kicking around too!

Yes. Hooray.

3. Lo-res, High Volume

Perhaps the most sizeable problem was that there were 12,000 products but just 3 (bemused) web blokes, none of whom really liked the idea of spending the remainder of their lives airbrushing Thomann watermarks out of drum head pictures (and sorry Thomann, but yeah, we may have ‘borrowed’ one or two of your photographs).

Having discarded every single source image, our best case scenario was that a product had three 500 x 500 pixel square images; that was our starting point. The reality was often worse. The system would upscale any source picture that was less than 500px, so when the only photo that exists of that plectrum holder, or that rubber grommet, weighs in at a healthy 50px per side… Well you get a pretty meaningless result. For example:

Terrible pictures: not that uncommon.

I used to get phone calls from one of the partners at Andertons bemoaning yet another embarrassing situation where a customer was asking him something inane. It would be something truly bonkers like:

“Could you please confirm, is this actually a playable guitar or just a model?”

We’d muse, “how on earth can he not see from the website that — of course it’s a proper guitar!?”, then log on to see yet another indistinct blob that might as well have been a T-Rex, or a football, or a priceless Picasso, or whatever.

I hated those phone calls…

The fix? Brute force, plus a little programming.

We divided to conquer, prioritising more-popular products with each member of the team sourcing images for around 75 products a week.

In tandem, we enlisted our suppliers’ help. Many images are hosted on FTP sites and dedicated image banks so with a little pointer in the right direction, finding images for key products is generally not too hard.

Some manufacturers are really organised. Fender for example have an image bank where you can access the largest possible image of any product, just by passing its SKU into a dynamic URL. We have all Fender SKUs in our system, so it was a piece of pie to write a bit of code to loop through all the SKUs and download the hi-res images. This knocks 700 of the products out of the park in a few hours.

After running the program I watched the slideshow of the gorgeous, hi-res guitar & bass pictures I’d just downloaded. I felt the same excitement I hope our customers feel when enjoying great images. Fender heaven!

Best day of my life…

Andertons Images in 2015

We take this pretty seriously now. For a start, at any given time we can objectively measure and report on the following things:

  • How many images each of our products has.
  • The dimensions and orientation of all the images.
  • The proportion of our catalogue that has no product image at all.

It would be amiss at this point not to mention the web content team and in particular Andy Scrimshaw, who over the last 12 months has chipped away at this project, putting countless hours into sourcing more and better imagery; driving up resolution and number-of-pictures, and driving down negative metrics like single-image products.

It is our aim to have NO products with fewer than two pictures at a minimum of 1000px resolution. Here’s how that’s going so far:

We also now employ a full-time photographer to take photographs of our high end instruments so customers can see exactly the item that they could purchase, as opposed to a stock photo, which in the case of guitars can often be aesthetically very different. [We’ll write more about this in future posts.]

On the website, we have improved the product gallery, making use of full-screen capabilities in newer browsers so that no screen space is wasted. On a large retina screen, with a hi-res image of a beautiful instrument, this has a real ‘wow’ factor. You should check it out! (I like to drop into the Apple store once in a while and call up a PRS Guitar page on a big iMac!)

…And in the future?

We realise that we’re not hosed yet when it comes to imagery — so what’s up next?

Well we know we now have to cater for a wide range of different screens responsively. Understanding compression, resolution and DPI will help us to speedily deliver appropriately-sized image files to users, based upon their device and connection parameters.

We also hope to tackle orientation. If you are holding a smartphone in portrait, it makes a lot of sense to show an image of a guitar, or a microphone stand, with its longest edge matching the longest edge of the screen; but what about a keyboard or a drum kit? This is something we haven’t quite solved yet.

Whilst we keep working, please do go and check out the product images on our website. Let us know which ones are still rubbish, or settle down with a cup of tea and the instrument of your dreams, imagining that it is right there in front of you!

Do you have any suggestions for our website? Want more from Behind the Scenes at Andertons? We’d love to hear from you in the comments.

Andertons Music Co. Is a UK based, rock ‘n’ roll music instrument retailer which has served the community for over 50 years. The brand is known by musicians worldwide, with videos by Chappers & The Captain reaching nearly half a million YouTube subscribers.

About the Author
Andrew Chart heads up the E-Commerce technical team at Andertons. He loves a good JPEG compression algorithm and still wakes up every day thankful that his Fender image crawler program was not interpreted as a DDoS attack.