When I’m auditing websites, image optimisation has often been ignored more than anything, particularly technical SEO-wise.
Even on the visual side, there is much to consider to make products look as appealing as possible to visitors.
Well optimised images help websites in general organic search as well as in the image vertical – images can have a big negative impact on speed, for example. When visitors reach a website, the visual side of images can have a huge impact on conversion rates.
Studies involving high profile names such as Amazon and Shopify have proven a fast website leads to increased revenue, so as images are a huge part of most e-commerce websites, 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 necessary.
Some physical shops have their own signature smell, and there are businesses based on adding scents to retail stores. You’ve probably noticed that Subway smell if you’ve been anywhere near their sandwich franchises. Studies have shown this attack on the senses can increase our desire for a product and increase sales.
Online stores are also having to deal with an increasing number of returns, often processed at their own cost.
How do you create that same desire in an online store, while reducing returns?
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 product photography comes in.
The more attractive a product looks to customers, the better conversion rate will be. And images are far more likely to elicit an emotional response than words.
Before starting, 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 changes.
High-Quality Photos, Not Stock
I’ll get the stock photo hate out of the way first…
Many studies show 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.
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 photos of smiling customers increased conversions.
Show Products in Use
Most studies agree a product’s main photo should show the product alone, but including additional images showing the product in use can encourage purchases. This makes it easier for customers to see the product’s benefits and imagine it in their life.
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 with 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) with a dog and child, but the point is the photo of the full car says more about the boot’s size 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):
Any people in the photos should represent the target market for the product.
If you sell baby related products, show a baby with the product. Charles Darwin talked about the instinctive reaction humans have to faces of infants, and more recent studies confirmed this.
You may also like – 10 Google Search Operators to Mine Search Results
Big Photos = Good (When Requested)
So says Nielsen Norman Group. Many studies have reported larger product images increase conversion rates.
Be mindful of fitting the photos in with your site design, and take into consideration the longer download times for 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 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 require closer examination or have intricate details – fabric texture or a handmade item, for example – and completely inappropriate for others. I’m not sure how a close-up of a plain steel spoon is much use to a customer. Again, this is something I’ve seen.
An alternative to clickable is zoomable images. This interaction can also make a customer feel more engaged than if they were looking at one static image.
Engaged visitors are more likely to buy.
To encourage further interaction, some websites offer an alternative image on category pages when the cursor rolls over a product. E.g. for clothes, the model showing a different pose or a close-up.
Most importantly, make sure images don’t interfere with user experience. Frustrated website visitors are likely to look elsewhere.
Be Consistent
Many e-commerce stores display products on a white background. This helps customers focus on the product itself and easily compare differences between thumbnails.
If you have similar products photographed on different backgrounds, some products centred in the photo and others offset to the left, it’s difficult to compare products like-for-like.
Personally, I think some backgrounds and 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 as a contemporary fashion store, maybe it works for them. If they haven’t tested it already, I’d suggest they try consistent-looking photos with the products to the fore or even a close-up on rollover. Below, it’s difficult to scan and compare products:
Somehow I ended up looking at dresses, but anyway, Missguided is a contemporary fashion store too. Although the models’ poses vary, the photos have a consistent look, making it easier to judge each item’s merits:
For some stores, a white background is more of a necessity. E.g. Amazon have thousands of different sellers, so simple guidelines to keep the product photography consistent help avoid the issues mentioned above.
Product photos can be consistent without using a plain background. 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 at a glance.
Show Variations
If you’re selling cars or clothes 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 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 (something else Nielsen Norman Group have researched).
At pavers.co.uk, for example, products in different colours can easily be seen from category pages by rolling over a smaller thumbnail:
Alternate Views/3D/360°
Highlight a product’s best features.
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 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 consumers would examine in a physical 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° rotating images of products.
DueMaternity.com reported a 27% higher conversion rate for 360° spin images, compared to standard photos, and Golfsmith.com between 10% to 40% better conversion rate for products with a 360° view. However, these studies are a few years old so it would be interesting to see if 360° images could have the same impact today.
Creating 360° 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, though if some products are 360° and others are expected to be, it could lead to an inconsistent user experience.
For property, in many locations the 360° view might exist 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 visited.
Augmented Reality
Ikea’s augmented reality app made the news in 2013, making it possible for customers to virtually place items in their home 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. Reports stated other large retailers (including Littlewoods and Very) were considering their own augmented reality catalogues. We are still waiting for those two, though Argos have launched their own augmented reality app for some products.
For clothes, virtual dressing rooms are yet to take off but will probably become commonplace. Zugara are one company working on this technology; with a webcam you can position clothes over your body:
Augmented reality is becoming standard in one area. Many glasses retailers have a virtual “try on” option that requires a webcam photo or upload of a straight-on headshot, which tends to work quite well. Inkhunter (for tattoos) and Diamond Hedge (for rings) are other good examples.
Outside of glasses, tattoos and jewellery, Sephora Virtual Artist, for ‘trying on’ makeup, is another example. But although Pokemon Go proved augmented reality can be a huge success, there is some way to go until augmented reality solutions for e-commerce are usable enough to become commonplace.
Avoid Auto-Scrolling Image Carousels
Some conversion experts hate these as much as stock images. Many studies have reported 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 “It’s just plain annoying for users to lose control of the user interface when things move around of their own accord.” I find them hugely annoying for that reason.
Don’t Mislead Visitors
This can happen unintentionally e.g. showing a shirt with a tie when only the shirt is for sale. In the buying process, you don’t want to put the smallest doubts in a potential purchasers mind.
Saying that, it can work the other way. Photos of sliced ham with garnishing can perform better than the same photos without garnishing. As with everything – test – find out what works best for the 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 by an average post (e.g. comparing Pins to Tweets). But before you pin every product, read Shopify’s Pinterest articles.
Most people dislike being overtly sold to, so it’s best to think of social network posts as adverts that don’t look like adverts, keeping a look out for trends to relate products to. Use Throwback Thursday (#tbt) on Instagram, for example, to post retro product photographs or adverts (below is Michelle Obama sharing a picture of herself and Barack on the left):
Many brands do well by encouraging customers and fans to share content related to their products. In the fashion industry, for example, photos of customers wearing the products.
While some social channels work better than others for visual reasons, there’s no reason why you can’t utilise them all. Wise Merchant’s Ecommerce Startup Guide gives some great examples of using social to promote brands.
What if My Product Isn’t Physical?
For 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 too. 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 the product is digital-only.
Summary
Great product images can be are one of the most effective ways of turning potential customers into customers.
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 a 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 a website getting referenced more often and becoming the go-to place.
A summary of the most important points:
- Accurate, detailed images can help reduce returns
- Use high-quality photos that appeal to the target market
- Don’t use stock photos
- Show products in use on additional photos
- Show a product’s benefits
- 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 a product’s best features
- 360-degree views may help
- Could augmented reality be the future?
- Avoid auto scrolling carousels
- Don’t mislead visitors
- It’s okay to show physical representations of digital products, but don’t mislead
- Be social if appropriate
- Images or the way they’re implemented shouldn’t negatively impact user experience
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
Although they’re getting better at it (e.g. face recognition, Google has recognised cats for years, Google Lens is improving and Bing is researching too), search engines can’t always accurately see what is in an image. It’s important to give them all signals at your disposal to tell them what images are about.
Due to a lower optimisation from the competition, it’s often easier to increase traffic via image searches. However, 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 – please comment if there is).
It’s more about making sure a website as a whole is optimised, and images are a big part of most e-commerce websites. To quote Google’s Ilya Grigorik in a lengthy guide about image resizing and compression, “Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website…”
Descriptive Filenames
The filename that comes straight from 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, include it in the filename too.
As with all SEO, 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. Google’s algorithm is clever enough to know the meaning of words – they know a shoe is footwear, and a lady (in most cases!) is also a woman.
For an idea of what words to use in filenames, find out how customers describe the 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 a product has more than one photo, filenames should be marked up in a way to distinguish them e.g. for an Aston Martin car’s photos:
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 coding HTML5 by hand, the 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 remaining content is about bacon, but it’s worth mentioning the context an image is placed in is a factor in it ranking.
Just as red shoe images (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 and help it rank. Though captions shouldn’t be the same as alt attributes as people using certain accessibility devices will have the same text read 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 they use size as a ranking factor.
Aim for whatever fits with the website design, and always think about user experience. Consider the option to view larger images with a lightbox effect, for example.
Lightboxes need to be implemented in a search-engine-friendly way. Some setups create extra pages on a website and cause all sorts of problems.
As I mentioned in the Conversion section 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 HTML tag’s width and height attributes. The image should be resized to fit the position on the webpage.
To be W3C compliant and optimise the load time and web page rendering, width and height attributes should be specified.
Updated HTML5 example code:
<img src=”womens-low-heel-red-shoe.jpg” alt=”Women’s low heel red shoe” width=”640″ height=”480″>
A big issue I regularly see on e-commerce sites is massive images inserted into a page e.g. a 3MB 4000×3000-pixel sized image shrunk to fit within the page content. If search engine crawlers are spending time crawling unnecessarily large images, they will probably spend less time crawling the rest of the website, with a potential negative impact on keyword rankings. Which leads to the next recommendation…
Compressed
File size should be reduced as much as possible while retaining image quality.
The “Save for Web” option in Adobe Photoshop optimises an image for Internet display (for JPEG, 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. 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. While JPEG is suitable for photos, the GIF format is more suitable for images with blocks of colour and small colour scales (such as many logos).
Aside from Photoshop, other image editing tools are available (alternativeto.net/software/adobe-photoshop/). Some for free, such as GIMP, while others compress images online.
Some software or plugins can optimise images as you upload them to a website – the Smush.it WordPress plugin, for example (free for WordPress, with paid versions for other CMSs such as Magento available).
Be aware of compressing too much. Product images are the main selling tool online. 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 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 when combined when a webpage has multiple larger-sized images:
- 100% quality photo is 57kb.
- 70% is 15kb.
- 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.
Many images contain extra unnecessary data, such as camera settings. This data should also be removed during compression.
While tools such as Google PageSpeed Insights recommend next-gen image formats such as WebP, they’re not widely supported. We only recommend them if compatible formats are shown to non-compatible browsers.
Responsive Design Compression
For responsive design, smaller images should be served to devices with lower resolutions.
Only load one version of each image. I see many websites that hide different sized images with CSS. The version that displays is based on the device resolution but the ‘hidden’ images still download to the browser.
Different sized images can be uploaded or a server-based solution such as Adaptive Images (only PHP-based) can re-scale images based on the device browsing the website.
This optimisation could have a big positive impact, as Google have ranked all new websites mobile-first as default since July 2019, with older websites gradually moving to mobile-first.
Unique
Depending on the niche, this may be an impossible or overly-expensive task, but as is the case with written content, ideally product images should be unique to your website.
High Quality
As mentioned in the conversion tips, high-quality professional images sell 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 have considered in their image ranking algorithm for many years.
Content Delivery Networks
Some websites store images on content delivery networks (CDNs). Often this places the images on a domain other than your own, so links to those images would benefit the CDN’s domain. It is possible to use a CDN and still have the images appearing to be hosted on your own website. This is ideal as it makes it easier if the CDN is changed in future. It’s also recommend by Google’s John Mueller, who says “there’s no SEO bonus for having them (images) on the same host/domain.”
However, usings CDNs for images can benefit organic traffic as they’re generally used to speed up website load times, especially for websites that have a user-base outside the country the website is hosted.
Browser Caching
When a webpage is first downloaded to a device, everything on the webpage needs to be downloaded. Caching stores files on a device, so repeat visits to the webpage (or website when files are reused) don’t need to download those files again.
The below screenshot from webpagetest.org is an example of how much difference browser caching can make. The requests (number of files downloaded) has reduced from 131 to 55 on the repeat visit with the bandwidth required only 24% of the first view.
Can Search Engines See Your Images?
Avoid embedding important images with technology search engines may not be able to access e.g. Flash, lazy loading setups or JavaScript. Google is now very good at executing JavaScript, but they’re not guaranteed to get it right.
If JavaScript is unavoidable, an alternative that can be viewed without JavaScript is recommended (at least for the main images), such as also displaying JavaScript-loaded images between <noscript> tags. Even better, use progressive enhancement. The popularity of JavaScript frameworks has made this a bigger issue; render pages on the server (rather than in the user’s web browser).
Disable JavaScript in your web browser and see what happens to a website. At maplin.co.uk and many other websites, images disappear:
The lack of images will be a usability issue for some visitors too. 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 of our clients don’t think the 1-2% is worth optimising for, but it could impact a much larger percentage of revenue if the search engines can’t access website content.
Consider Deferring or Lazy Loading Images
Lazy loading defers load of non-critical resources, so they’re only loaded when needed. Image-wise, this means deferring images that appear below the fold (outside the browser window when the web page initially loads). We recommend deferring images that appear a certain pixel height below the fold, as often, users scroll down but images take too long to download.
Lazy loading is worth its own blog post – there are many technical considerations. See Google’s Lazy Loading Images and Video for further information.
My favourite method for deferring images is at varvy.com.
Avoid Using Images for Text or Spacing
This text is written into the HTML, and despite being much longer than the image example, uses 130 bytes of bandwidth to download.
Exceptions for text are logos.
Use CSS to control spacing. Also use CSS in place of images for gradient, shadow and other effects where possible.
Image Sitemaps
Depending on the website’s size and authority, an image sitemap can be beneficial to inform search engines of images. E.g. a website with 100 products within 2 clicks of the homepage is unlikely to need an image sitemap.
However, if images can’t be accessed through crawling, an image sitemap helps search engines discover images they might not otherwise find.
I haven’t seen it tested, but an image sitemap could be a small ranking factor if search engines use the additional markup such as caption and location.
I generally consider image sitemaps low priority. More information on image sitemaps: support.google.com/webmasters/answer/178636?hl=en
Other Considerations and Further Reading
That covers the main technical considerations of onsite image optimisation. If you’re a glutton for punishment, look at serving images from cookieless domains, encoding tiny images with Base64 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 also recommend separate folders for thumbnails and full-size images or a separate directory for each category of images.
In 2008, Bill Slawski discussed a Microsoft patent for ranking images: www.seobythesea.com/2008/05/how-do-images-get-ranked-in-image-search/. More recently, a Google patent for recognising landmarks:
www.seobythesea.com/2019/05/google-image-classification/.
Useful Links
Screaming Frog SEO Spider – my favourite SEO auditing tool. Image-wise, it can crawl and show filenames, alt text and file size.
Web Developer extension for Chrome – my favourite Chrome extension. It annotates alt attributes and other image details onto a webpage, along with other non-image-related usefulness.
Summary
Optimising images with the following considerations will help images and the website as a whole rank better in search engines:
- Descriptive filenames
- Descriptive alt attributes
- Appropriate context
- Larger sized
- Resized to page content rather than resized with HTML
- Compressed (remember the extra considerations for responsive design)
- Unique
- High quality
- Content delivery networks can help in some circumstances
- Appropriate cache time
- Ensure search engines can crawl images
- Defer or lazy load images
- Avoid using images for text or spacing
- Image sitemaps may be useful
