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!
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.
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.
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.
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.
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.
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.....