Product images are one of the most important aspects of an e-commerce site, and yet I am continually amazed at how little effort is put into them by store owners. There is nothing worse than landing on a beautifully designed e-commerce site, only to be disappointed by low-quality images. Even worse is waiting 30 seconds for a 2MB image to load. Phone cameras and Instagram have made everyone think they are professionals these days, but not everyone has the skills or patience to create and optimize that perfect product image.
In this article I’ll walk you through what it takes to create beautiful, optimized product images for your site, no matter what you are selling. Note that this doesn’t cover actual photography techniques, as that is well outside my skill set. This is more about what types of images you should shoot, and what to do with the final images once you have them.
Use the right image type for your products
The first thing you need to do is figure out what you are trying to convey to the customer, and this can vary greatly depending on what you are selling. If you are selling perfume, you will likely want to provide some sort of props to help convey the scent. If you selling a complex piece of machinery, a 360 degree view of the product would be a great help to the potential customer. For clothing, you will want to use ‘lifestyle’ images to show real people wearing their products in a ‘real world’ environment. The idea is for the customer to imagine themselves in the photo, wearing the clothing and feeling great.
Conveying a feeling through product images
Shopping online still has some limitations versus purchasing an item in a physical store. We still haven’t figured out a way to convey taste, smell or feel through a computer screen, although people are working on it! In the meantime, we have to do our best through the use of product images.
The best way to do this is to use some props in your photos. Selling a strawberry flavored lip balm? Throw some strawberries in the photo. Want to convey the feeling of being at the beach with your sea salt face scrub? Bring your Iphone and products to the beach and get shooting! Props and lifestyle images are much more effective than a simple shot of your product on a white background. Take a look at the side by side images below. Which one does a better job at conveying the product? Which one makes you want BBQ?
Here’s another example using soap. You can almost smell the lavender in the second image, while the first one doesn’t do much of anything at all.
Finally, here’s a ‘lifestyle’ image. Which one do you think inspires someone to buy a North Face jacket?
Professional vs DYI Photography
Unless you have photography training of some sort, you will likely want to hire a professional to shoot your products. Not only will they have better equipment, but they will also understand how to best capture your products. I’m not saying you CAN’T do it yourself, but generally speaking an Iphone and a white sheet aren’t going to cut it. There are some great lightbox kits on the market, but if you don’t have the skills to use it properly you are going to waste hours and hours on a mediocre image at best. This is one of the most important aspects of your web site, so spend the money and do it right.
Technical Specs for Product Images
Once you have all of these great images, you need to format them properly so that they look and work correctly on your site. Too many people simply upload the raw images they get from their photographer and wonder why it takes 10 seconds for their product detail page to load. The images have to be formatted properly, so let’s go over each of the aspects.
In order for all of your images to line up properly on your site, they all need to have the same proportions. By that I don’t mean the size, I mean the ratio of width to height or aspect ratio. I usually have to go over this a few times to explain it, so here an illustration that may convey it a little better than I can. 1:1 means the width is the same as the height, 2:1 means the width is twice the height, etc. That High School geometry is coming in handy after all!
Here’s what happens when you don’t use the same aspect ratio for all of your images:
See how the titles don’t line up? The images are all the same width, but the height is different on each one so it throws everything out of alignment. Not the end of the world, but it just looks sloppy. Ideally all of your images would be square, or have the exact same aspect ratio.
Optimizing your product images
Another common mistake is not optimizing your images for the web before uploading them to your store. Here are some tips for creating optimized images:
- Resolution should be set to 72dpi. Most photographers send images at 300dpi which is way too large.
- JPG format only, avoid PNG, GIF and TIFF as they create very large files. PNG can be used if you require transparency in the image, or if you have a lot of text (not recommended)
- Use the same aspect ratio for all of your images (1:1, 2:1, 4:3, etc) It doesn’t matter what size you choose, as long as they are all the same
- Use the ‘save for web’ feature in Photoshop or your preferred image editor to optimize the images. Set the ‘quality’ selector as low as you can without sacrificing quality. I usually use 60 or 70 in Photoshop. You can also use a service like Kraken.io to optimize your images for you.
- If you want your customers to be able to zoom in to your images or view a larger version, you’ll want to upload an image that is between 1500 and 2000 pixels wide as the ‘main’ image. Your shopping cart software should automatically create smaller versions for the category thumbnail and product detail page. The large version will only be used if someone clicks on the zoom/expand option on the product detail page.
Here’s an example of an optimized image vs one that isn’t. The one on the left is the original, which is 105k in file size. The one to the right is 43k in file size, but there is no noticeable loss in quality. The speed improvement between the two when the page is loading would be noticeable both to the customer, and to Google!
Just when we thought we had the image thing all figured out, Apple comes along and introduces Retina Display devices. In a nutshell, screens on iphones and ipads have twice the number of pixels a normal device has. That means that the image above would look great on a normal screen, but pixelated on a retina display. There are a number of ways to handle this, from delivering a different image for high-resolution displays to serving a large image and scaling it down for lower resolution screens. There are pros and cons to each method, and you should work with your web developer to see which one will work best for you.
Image Effects on the Product Detail Page
Depending on what types of products you are selling, you may need to offer more than just a standard image on your product detail page. Some options include:
- Zoom – there are a few options here such as zooming in on hover or opening a larger version of the image in a lightbox. MagicZoom is built in to Pinnacle Cart as an option, as is MagicThumb.
- 360 degree rotation – this works great when you have a complex product that the customer needs to see in ‘3D’. Here’s a demo of it in action.
- Secondary images – adding additional views of a product may be necessary as well
- Swatches/variant images – if your product has multiple colors available, you may want to provide color swatches or image switching when a customer chooses a different option. We have an add-on for Pinnacle Cart that does this. Here’s one of our clients uses this quite a bit.
Don’t skimp on your product images
Hopefully this helped convey the importance of high-quality product images for your site. While this doesn’t apply to every site out there, most sites will see a significant benefit from high-quality, optimized product images. Not only will your site look more professional, studies and A/B testing have shown that high-quality images increase conversion rates, which of course means more revenue for you. Professional photographers are not cheap, but can you really afford to NOT to hire one?
Questions? Comments? Feel free to drop us a line!