How do I remove the background from the photographs?

Home > Blog > Blog: Removing the background from the jersey photographs

Please share this - be social!
Tweet  Facebook  Linkedin  Pinterest 

When I first started this website back in October 2012, I had to make a decision about how best to represent the jerseys in this online collection.  I wanted a uniform look, so the choices were to get the jerseys photographed on a mannequin or simply laid flat on the floor.  

Whilst in my day job, all of the product images for Prendas Ciclismo are shot on a mannequin and then adapted in Adobe Photoshop to look their very best, however not everybody has access to a mannequin.  

It's this that is key, I always wanted to encourage visitors to submit their own photographs of their jerseys so that I had a better selection than just my own personal favourites, so I had to adopt the laid flat approach if I wanted to maintain a consistent look across all garments.

By removing the background, not only do you focus web visitor’s attention on the garment, it also has an added benefit that I had previously not considered – it improves an images loading speed – the example shown below shows an 13% deduction in speed!

Image showing the original files size (118kb) and new file without the background (102kb) with a 13% saving.

In the main, I use Adobe Photoshop for this task, however that’s not the only option. Photoshop used to be a very costly application to buy for the end user, but now they have a subscription option available as part of the Creative Cloud suite. This brings Photoshop (and Lightroom) for less than £10 per month.  There are cheaper alternatives available such as GIMP.  GIMP is open-source and available for both OS X and Windows and despite being free - is more than adequate for most users.

Step 1: Preparation of the image

After copying the photos from the digital camera to a local drive, open it up in Photoshop normally adjusting the brightness, contrast and colour balance.  

Step 1: Altering the the brightness, contrast and colour balance

Step 2: Removing the background.

Whilst there are a number of selection tools available, I personally use either the Magic Wand or the Polygon Lasso tool   The Magic Wand (not illustrated below) is great if you have a high contrast between the garment and background – it certainly saves along of time compared to the Polygon Lasso tool.  However, the Polygon Lasso tool is more accurrate.   I normally zoom in to either 200% or 300% and simply click multiple times until the entire images is selected.  Bear in mind that you have to do this in one go, so make sure you have 5-10 mins set aside.

Using the Polygon Lasso tool

Step 3: Delete the background

With your image selected, you can copy and then paste the image.  Thisgives you a new layer in Photoshop meaning that you can now delete the background layer. Once that is deleted, you are left with a perfect product image with a transparent background.

 

Step 4: Saving for web

Rather than "Save As..." I use the built in "Save for Web..." option.

My own personal perference is to use JPEG High, but as you have a transperent background you can also use the PNG if that offers a better reduction in file size.

 

Summary

That's it!  This will make the subject of your photos stand out plus it will save your visitors waiting a few milli-seconds waiting for the image to download.  The more images you have on your page - the bigger the saving!

If you are interested in web optimisation, GTMetric is an excellent free tool that will tell you how to improve you web pages.  It's a bit techie though.....

The Settimana Ciclistica Bergamasca 1984 Team Jersey featured in the blog post is now available in our online collection of jerseys.

 

Giro del Bergamasco JerseyGiro del Bergamasco Jersey
Research reveals that this wonderful Santini wool team jersey was the leaders jersey for the 1984 Settimana Ciclistica Bergamasca - won by Flavio Giupponi.