When I’m auditing websites it’s often image optimisation that has been ignored more than anything, particularly from a technical SEO point of view and even on the visual side – there is a lot to consider to make products look as appealing as possible to visitors.
Well optimised images will help your websites in general organic search as well as in the image vertical – and when visitors reach your website the visual side of your images can have a huge impact on your conversion rate.
Studies involving high profile names such as Amazon and Shopify have proven that a fast website leads to increased revenue, so as images are a huge part of most e-commerce websites, some of the technical recommendations regarding speed can help conversion too.
I’ll start with conversion recommendations but you can skip straight to the technical guidelines if you prefer.
Product Images for Conversion
In physical stores you can feel products, play with them, smell them, see the size and shape and even hear them if you need to.
Some physical shops have their own signature smell and you’ve probably noticed that Subway smell if you’ve been anywhere near one of their sandwich franchises. Studies have shown this attack on the senses can increase our desire for a product and increase sales.
How do you create that same desire in an online store?
Smell-O-Vision still hasn’t taken off (though technology is progressing) so you have to rely on the visual-side – and that’s where your product photography comes in.
The more attractive your products look to customers, the better your conversion rate will be. And images are far more likely to elicit an emotional response than words.
Before I start I should mention that while the below suggestions will work for many and are often best practice, they won’t work for all! There is value in A/B testing any changes.
High Quality Photos, Not Stock
I’ll get the stock photo hate out of the way first…
Look how fake we look. You can also see us looking fake on hundreds of other websites
Many studies have shown that standard stock photos are ignored – they can look bland and reduce trust. So if you have a generic smiling photo of someone enjoying a generic bowl of soup – replace it with a more realistic photo of someone enjoying your bowl of soup and see if more people buy.
While avoiding stock, it’s also important to use high quality, professional-looking images. To quote Norman Nielsen Group, “Invest in good photo shoots: a great photographer can add a fortune to your website’s business value.”
Highrise found that photos of smiling customers increased conversions.
Show Your Products in Use
Most studies agree that the main photo of a product should show the product alone, but also that including additional images of your product in use can encourage purchases – it makes it easier for customers to see the benefits of the product and imagine it in their life.
Any people in the photos should represent the target market of the product.
Although it looks like it’s about to get hit by a skateboard, the photo on the left shows off a Gorillapod’s capabilities better than the photo of it on a white background:
The old adage “show, don’t tell” applies – does your product description of a suitcase describe how much can fit in it? Show this in a photo! If your product is impressively small, show a size comparison. That goes for any product where scale is important. If a product is unusual or potentially difficult to use, show it in use in a series of simple steps.
Not that I advise packing your boot (trunk) like this but the point is the photo of the full car says much more about the size of the boot than the photo of an empty car (P.S. can you tell this is a stock image? Although stock wins in looks this time – the image on the right isn’t crisp or clean enough):
If you sell baby related products show a baby with your product – Charles Darwin talked about the instinctive reaction humans have to faces of infants, and recent studies have confirmed this.
Big Photos = Good (When Requested)
So says Nielsen Norman Group. Many studies have reported that larger product images increase conversion rates.
You should be mindful of fitting the photos in with your site design, and take into consideration the longer download times of larger images – which is where clickable images come in – according to the Nielsen Norman study mentioned above, users like a clickable image – though can get annoyed if the image isn’t at least twice as large as the original. Some e-stores I’ve visited manage to make the clickable images smaller than the original - if the images are smaller or not significantly larger, don’t bother having clickable images!
Larger images are especially useful for products that people like to examine closely, or have intricate details – the texture of fabric or a handmade item, for example – and completely inappropriate for others – I’m not sure a close-up of a plain steel spoon would be much use to a customer. Again, this is something I’ve seen.
An alternative to clickable is zoomable images. This sort of interaction can also make a customer feel more engaged than if they were looking at one static image.
If visitors are engaged they’re more likely to buy. <Tweet this!
To encourage further interaction some websites offer an alternative image on category pages when the cursor rolls over a product – for clothes the model showing a different pose, or a close-up, for example.
Most importantly, make sure images don’t get in the way of user experience. You don’t want to frustrate potential customers as they’re likely to look elsewhere.
Be Consistent
Many e-commerce stores display products on a white background – this helps customers to focus on the product itself and easily compare differences in a list of thumbnails.
If you have a lot of similar products photographed on different backgrounds, some products centred in the photo, some offset to the left, it makes it difficult to compare the products like-for-like.
Personally I think the some of the backgrounds and bits of added attire on models at Not Just A Label (pictured below) distract from the product and don’t always show the product at its best – in this case the dresses – but this is a contemporary fashion store so maybe it works for them. If they haven’t tested it already I’d suggest they try consistent-looking photos with the products more to the fore, or even a close-up on rollover. At the moment it’s difficult for the eyes to scan and easily compare product to product:
Somehow I ended up looking at dresses, but anyway, Missguided is a contemporary fashion store and although the models have various poses, the photos have a consistent look which makes it much easier to judge the relative merits and styles of each item:
For some stores it’s more of a necessity to keep a white background e.g. Amazon have hundreds of different sellers so it makes sense to have simple guidelines to keep the product photography consistent and avoid the issues I mentioned above.
Product photos can be consistent without using a plain background of course – footballs look attractive on a bed of crisp green grass, for example. If you have clothes on a mannequin or model, for the main product listings keep the product at a consistent angle in each photo. If the product photos are taken in context, keep the context similar so products are easy to compare and see at a glance.
Show Variations
If you’re selling cars or clothes and they’re available in different colours, for example, customers should be able to easily switch between the colours on the product page. Seeing the products in their preferred colour will give potential customers a much stronger sense of what it actually looks like and make them more confident to buy.
Avoid pop-up windows that need to be opened and closed for each view as it can be tiresome for visitors (that’s another thing Nielsen Norman Group have researched).
At pavers.co.uk, for example, I can easily see a product in different colours from the category page:
Alternate Views/3D
Highlight the best features of your products. <Tweet this!
This recommendation has been partly covered above – “Show Your Products in Use” and “Big Photos = Good (When Requested)”. A Nielsen Norman study I mentioned also found that visitors like alternate views, “In our testing of product pages with detailed information about individual products, users paid even more attention to the product photos. People often liked alternate views and clicked the links to download enlarged photos.”
Alternate views may work better for products that consumers prefer to examine in a physical retail store, or larger items with more intricate details such as cars (from different angles, the interior etc.), and is completely inappropriate for some products – would you need to see a pencil from every angle? Console games and books are another exception, unless they’re a special edition with extra physical products, such as a fold-out book or hand-crafted artwork.
Alternate views can be taken to the extreme by creating 360-degree rotating images of products.
DueMaternity.com reported a 27% higher conversion rate for 360-degree spin images, compared to standard photos, and Golfsmith.com between 10% to 40% better conversion rate for products with a 360-degree view. However, these studies are over 3 years old so it would be interesting to see if 360-degree images could have the same impact today.
Creating 360-degree views can be expensive or difficult, and if implemented improperly, may negatively affect website load speed and user experience. Usually the 3D should only become active if requested by the user. If you have a huge catalogue of products this is one recommendation that may be worth testing on a small number.
If you deal in property, in many locations the 360-degree view might have been created for you already. Some property websites embed Google Street View into their page, which enables prospective buyers to get a feel for the location before they’ve even visited.
Augmented Reality
Ikea’s augmented reality app made the news in 2013 – customers can virtually place items in their home before buying to see if they will be the right fit:
Whether the augmented reality app has increased sales (the publicity it generated aside) is yet to be revealed. It was reported that some other large retailers (including Littlewoods and Very) were considering their own augmented reality catalogues but we are still waiting…
For clothes, virtual dressing rooms are yet to take off but will probably become commonplace one day. Zugara are one company that have been working on this technology; with a webcam you can position clothes over your body:
An augmented reality of sorts is becoming standard in one area – many glasses retailers already have a virtual “try on” option that requires a webcam photo or upload of a straight-on headshot.
Avoid Auto-Scrolling Image Carousels
Some conversion experts hate these as much as stock images. Many studies have reported that auto-scrolling image carousels are an annoyance to users and actually reduce clicks and conversions.
One such study, by Nielsen Norman Group (yes, them again), mentioned various reasons including banner-blindness, reduced accessibility – and to quote them “It’s just plain annoying for users to lose control of the user interface when things move around of their own accord.”
Don’t Mislead Visitors
This can happen unintentionally, for example showing a photo of a shirt with a tie when only the shirt is for sale – in the buying process you don’t want to put even the smallest doubts in a potential purchasers mind.
Saying that – it can work the other way. Photos of sliced ham with garnishing have been shown to perform better than the same photos without garnishing. As with everything – test – and find out what works best for your target market.
Be Social
Visual social networks can work well for e-commerce stores. A November 2013 study by Piqora placed Pinterest as the most valuable network in terms of the sales generated from an average post (e.g. comparing Pins to Tweets). Before you go and pin all of your products, read Shopify’s “Six Strategies to Leverage Pinterest”.
Most people don’t like to be overtly sold to so it’s best to think of your social network posts as adverts that don’t look like adverts, and keep a look out for trends you could relate your product to – Throwback Thursday (#tbt) on Instagram for example – could be used to post retro product photographs or adverts (that was Michelle Obama sharaing a picture of herself and Barack on the left):
What if My Product Isn’t Physical?
If you sell e-books or download-only software, for example, it makes sense to show a physical representation of a book or software box as it makes the product seem real in a customer’s mind. For software screenshots can be used instead. As long as you’re not misleading the customer (e.g. a picture of a book that looks like it has 200 pages when the e-book only has 10 pages) and it’s clear that the product is digital-only.
Summary
Great product images can be one of the most effective ways of turning potential customers into customers. <Tweet this!
I’ve mentioned this already but it’s worth repeating that this isn’t a one size fits all approach – different things will work for different websites and different products. On copying the most popular websites see Nielsen Norman Group again – “Although successful websites typically have high usability, average sites can hurt their business by copying design elements that don’t work well in other contexts.”
High quality images can help your store establish credibility – they are there to show the product is what the customer wants.
Having the best selection of images on the Internet for a particular product could even lead to your website getting referenced more often and becoming the go-to place.
A summary of the most important points:
Use high quality photos that appeal to the target market
Don’t use stock photos
Show products in use on additional photos
Show the benefits of products
Smiling customers increase conversions
Natural positive reaction to faces of infants
Big photos are good (when requested)
Interaction can increase engagement and therefore sales
Be consistent
Keep images in line with your brand or the brand the store is representing
Show product variations (e.g. colour, size)
Use alternate views to highlight the best features of products
360-degree views may help
Could augmented reality be the future?
Avoid auto scrolling carousels
Don’t mislead visitors
Be social if appropriate
It’s okay to show physical representations of digital products, but don’t mislead
Images or the way they’re implemented shouldn’t negatively impact user experience
Have you tested any of the above? Has anything surprising worked or not worked? What have I missed? Add a comment below or carry on reading for technical guidelines.
Useful Links
Here’s a short video with advice on taking good quality product photos on the cheap (make sure the background doesn’t distract from the product):
The Ultimate DIY Guide to Beautiful Product Photography: www.shopify.co.uk/blog/12206313-the-ultimate-diy-guide-to-beautiful-product-photography
DIY Ecommerce Guide to Gorgeous Product Photography: www.prestashop.com/blog/en/diy-ecommerce-guide-to-gorgeous-product-photography/
Image SEO Technical Guidelines
So that was the visual side, now for the technical.
Although they’re getting better at it (e.g. face recognition, Google can spot cats and Bing are researching too) search engines can’t usually see what is in an image. So it’s important you give them all of the signals at your disposal to tell them what your images are about.
Due to a lower standard of optimisation from the competition it’s often easier to increase traffic via image searches, however it’s worth mentioning that increased traffic from image search won’t necessarily lead to an increase in sales (I haven’t seen this myself and don’t know of any studies that report it – leave a comment if there is). It’s more about making sure your website as a whole is optimised, and images are a big part of most e-commerce websites.
Descriptive Filenames
The filename that comes straight out of a camera (e.g. IMG_3639.jpg) is useless when search engines are trying to index content appropriately.
You should describe the product featured in the photo e.g. for a woman’s shoe that’s red and has a low heel – “womens-low-heel-red-shoe.jpg” is an appropriate filename. If the brand is important you can add that to the filename too.
As with all SEO you should avoid keyword stuffing – hundreds of images named in the format “women-womens-ladies-girl-girls-red-rouge-shoe-footwear.jpg”, for example, is the sort of thing that could lead to a search engine penalty one day. Google’s algorithm is clever enough to know the meaning of words anyway – they know that a shoe is footwear, and a lady (in most cases!) is also a woman.
To get an idea of what words to use in your filenames find out how customers describe your products. Looking at the keywords customers use to find your website in analytics and/or PPC software is often a good way. Including model numbers is fine if visitors search for them.
If you have more than one photo of the same product, filenames should be marked up in a way to distinguish them e.g. for various photos of an Aston Martin car you could use:
aston-martin-vanquish.jpg (for the main image, which is used for the product throughout your website if appropriate)
With further images going into more detail:
aston-martin-vanquish-side.jpg
aston-martin-vanquish-rear-bumper.jpg
aston-martin-vanquish-red-leather-interior.jpg
aston-martin-vanquish-leather-trim-dashboard.jpg
You get the idea!
Filenames should be lower case with words ideally separated by hyphens.
Descriptive alt Attributes
Similar to filenames, the image alt attribute should be descriptive, but this time using proper capitalisation, grammar and punctuation. To quote Google:
“It provides Google with useful information about the subject matter of the image. We use this information to help determine the best image to return for a user’s query. Many people-for example, users with visual impairments, or people using screen readers or who have low-bandwidth connections—may not be able to see images on web pages. Descriptive alt text provides these users with important information.”
To take the previous shoe example, alt=”Women’s low heel red shoe” is fine.
If you’re coding HTML5 by hand your image tag would look like this so far:
<img src=”womens-low-heel-red-shoe.jpg” alt=”Women’s low heel red shoe”>
Appropriate Context
You’re unlikely to try and sell red shoes on a page where the rest of the content is about bacon, but it’s worth mentioning that the context an image is placed in is a factor in it ranking.
Just as images of red shoes (properly described with filenames, alt attributes etc.) can help a page about red shoes to rank, written content about red shoes will help an image of red shoes to rank. This is where all other SEO best practices come in, such as optimised title tags and other user-friendly text.
A caption within the same HTML container as the image will be seen as closely associated, hence helping it rank – though captions shouldn’t be the same as alt attributes as people using certain accessibility devices will have the same text read out to them twice. A caption could add further useful details about a product, rather than the short product description that’s usually appropriate for alt attributes.
Larger Sized
Larger images usually rank higher in Google Image Search, and Bing have mentioned that they use size as a ranking factor.
Aim for whatever fits in with the website design and always think about user experience. The option to view larger images can be considered, with a light box effect for example.
Light boxes need to be implemented in a search-engine-friendly way as some of them can create extra pages on a website, which can cause all sorts of problems.
As l mentioned in the Conversion section of these guidelines above, larger product images can lead to an increase in sales.
Resized
Don’t upload an image at its original size and shrink the dimensions with the width and height attributes of the HTML tag – the image should be resized to fit the position on the webpage.
To be W3C compliant and optimise the load time and rendering of webpages width and height attributes should be specified, though responsive design is changing this so we’ll have to see if W3C keep those requirements…
Updated HTML5 example code:
<img src=”womens-low-heel-red-shoe.jpg” alt=”Women’s low heel red shoe” width=”640″ height=”480″>
One of the biggest issues I’ve seen with images on e-commerce sites is the insertion of massive images onto a page e.g. a 3MB 4000×3000-pixel sized image shrunk down to fit within the page content – if search engine crawlers are spending time crawling unnecessarily large images they will probably be spending less time crawling the rest of your website, with a potential negative impact on keyword rankings. Which leads into the next recommendation…
Compressed
File size should be reduced as much as possible while retaining the quality of the image.
The “Save for Web” option in Adobe Photoshop optimises an image for Internet display (a slider gives a choice between 0-100% quality) and removes extra metadata, further reducing file size. I find 70% is usually more than enough to compress an image without a visible loss in quality for general photos – however slightly higher might be required if there is a large block of similar colour or a big colour contrast e.g. a dark coloured product on a white background, and 55% is often acceptable.
Aside from Photoshop, other image editing tools are available (alternativeto.net/software/adobe-photoshop/) – some for free, such as GIMP.
Some software or plugins can optimise images as you upload them – the Smush.it WordPress plugin for example (free for WordPress, with paid versions for other CMSs such as Magento available).
Be aware of too much compression – product images are your main selling tool so if sharp, very high-quality images are important in the niche you’re optimising for – the extra file size may be worth it.
Take the following images of my camera of choice – one was saved from GIMP at 100% quality, another at 70% quality, and another at 30% quality. Can you spot the difference?
At 70% very slight compression artefacts can be seen around edges (such as by text) and at 30% it becomes much more obvious. The file-size savings are potentially huge though, especially for a sizable number of larger-sized images. The 100% quality photo is 57kb, 70% is 15kb and 30% only 9kb. In this case 70% quality is about the minimum I’d recommend, but products with softer edges or less fine detail can get away with more compression.
Responsive Design Compression
For responsive design smaller images should be served to devices with lower resolutions.
Different sized images can be uploaded or a server-based solution such as Adaptive Images (currently only PHP-based) can re-scale images based on the device browsing the website.
This type of optimisation could have a big positive impact as on mobile devices mobile-friendliness is a Google ranking factor – and they recently introduced a “Mobile-friendly” label to their search result pages.
Unique
Depending on the niche this may be an impossible or overly-expensive task, but as is the case with written content, ideally your product images should be unique to your website.
High Quality
As mentioned in the conversion tips, high quality professional images will sell your products better than lower quality photos (such as blurry or out-of-focus shots). Professional-looking images can also rank better in search engines – something Bing say they consider in their image ranking algorithm.
Content Delivery Networks
Some websites store their images on content delivery networks (CDNs) – often this places the images on a domain other than your own – so this is something to be aware of as links to those images would benefit the domain of the CDN and not your own. It is possible to use a CDN and still have the images appearing to be hosted on your own website.
CDNs can benefit your overall organic traffic as they’re generally used to speed up website load times, especially for websites that have a large worldwide user-base.
Can Search Engines See Your Images?
Avoid embedding your important images with technology that search engines may not be able to access, for example image carousels that use JavaScript or Flash – if you do, have an alternative that can be viewed e.g. display the images between <noscript> tags. Google’s Matt Cutts has recently stated that Google now interpret most JavaScript code (see video below), but that might not apply to other search engines, and it’s best to make content on your website as accessible as possible.
Disable JavaScript in your web browser and see what happens to your website. At maplin.co.uk the product images disappear from category pages:
The lack of images will be a usability issue for some visitors – around 1-2% of Internet users have JavaScript disabled or browse with a non-JavaScript device.
The UK Government Digital Service found that 1 in 93 visitors to the gov.uk homepage were not getting JavaScript enhancements. This link explains how the figure was calculated if it’s a test you’d like to run: gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/
For the costs and development time involved most clients I speak to don’t think the 1-2% is worth optimising for.
Image Sitemaps
An image sitemap can be beneficial to inform search engines of images, though it depends on the size and authority of the website – if there are only 100 products for example, and they’re all within 2 clicks of the homepage, the website is unlikely to need an image sitemap.
However, if images can’t be accessed through crawling then an image sitemap can help search engines discover images they might not otherwise find.
I haven’t seen anyone else suggest or test it, but there’s a chance an image sitemap could be a small ranking factor if any search engines use the additional markup such as caption and location.
I’m yet to recommend image sitemaps to a client, but here is more information on them if you’re interested: support.google.com/webmasters/answer/178636?hl=en
Other Considerations and Further Reading
That covers the main technical considerations of image optimisation, but if you’re a glutton for punishment you can look at serving images from cookieless domains and detecting User Agents (e.g. to avoid serving thumbnail images to GoogleBot so they only see the large versions).
Google even say “Consider structuring your directories so that similar images are saved together” – they recommend separate folders for thumbnails and full-size images or a separate directory for each category of images.
In 2008 Bill Slawski looked at a Microsoft patent for ranking images: www.seobythesea.com/2008/05/how-do-images-get-ranked-in-image-search/
Useful Links
Screaming Frog SEO Spider – an SEO auditing tool – in terms of images it can crawl and show filenames, alt text and file size.
Web Developer extension for Chrome – annotates alt attributes and other image details onto a webpage, along with a load of other non-image-related useful things.
Summary
Optimising images with the following considerations will help images, and more importantly the website as a whole, rank better in search engines:
Descriptive filenames
Descriptive alt attributes
Larger sized
Resized to page content
Compressed (remember the extra considerations with responsive design)
Unique
High quality
Content delivery networks can help in some circumstances
Make sure your images can be crawled by search engines
Do you have any image success or failure stories? What did you learn? Has anything surprising worked or not worked? Have I missed anything? Add a comment below!
The post How to Increase Conversions & Traffic with Product Images appeared first on Inside Online.