Ecommerce Design / How To Sell Online

How to Optimize Images for the Web (and more sales): A Guide to Image SEO, ROAS & Conversion

/ 9 min read

SHARE

Most Popular Reads

How much attention do you pay to your store’s image optimization?

Oftentimes brands get caught up on overthinking a logo –– spending days, weeks or even months before they launch a great idea just trying to figure out what symbol is appropriate for a brand they haven’t even started yet.

And then, when it comes time to actually launch, way too many entrepreneurs spend much too little time focusing on great product photography and branded imagery.

Imagery continues to be the catalyst of our era –– the communication vehicle through which people understand value or disregard and move on to the next.

Only video matches the picture’s power in this respect.

And you use your pictures everywhere:

  • On your product pages
  • On your category pages
  • On your homepage
  • In your abandoned cart messages
  • On your blog
  • On your social accounts
  • For your Facebook Advertising
  • For your Google Shopping stream

In fact, the only thing you don’t use images for is Google AdWords. And Google AdWords is often the most expensive PPC you’ll have.

Yes, images are one of if not the most important asset for your ecommerce store. And yet, too often they are neglected –– store owners completely forgetting to optimize images for web.

If you want to improve your conversion rate, your customer engagement, your loyalty and your lifetime value –– well, you need to start by paying more attention to your imagery.

But where to start?

We’re here to help. In this guide we’ll go through the most important concepts for you to understand regarding your images, and show you how you can begin implementing tip to increase conversion –– right now.

Why images are so important

Before we jump in, it’s important to understand why images can have such a big impact on your store. Here’s a high-level view.

  • First impressions count. Images are the first thing your customers see when looking at a product page, and those first few seconds can be crucial in determining if the product is what they are looking for.
  • A picture is worth 1000 words. Images help a customer ascertain the quality and details of a product better than any description. In lieu of being able to feel the product as in a retail store, great product photography lets the user explore the various details of the product up close.
  • Mobile is taking over. As mobile shopping becomes increasingly prevalent, images will only become more important. Users will increasingly use images over text to judge the suitability of the product and even to navigate. While scrolling through dozens of pages and hundreds of images, do you think a customer will read each description first or look at the photo? Having clearer, more appealing product images means your products will get looked at, clicked on and bought more often.
  • Images can actually hurt your website. Using unprofessional or poorly optimized images for web can have a major impact on your shopping experience and even where you rank in search engines. Do your images load slowly? Have you not added meta description? Are people bouncing as soon as they land there? You won’t ever get to Page 1 with that kind of behavior.

With that in mind, let’s walk through how you can make sure you have professional-quality and optimized photography on your ecommerce store.

Start with good photos

Having great ecommerce photography starts with taking the right picture.

Your photography doesn’t have to involve an expensive camera or setup. In fact, you can create your own DIY photography setup that will do the job.

But there are a few tips you can follow to make sure you are starting off with the best possible photos.

Make sure you have the right setup

An ecommerce photography setup doesn’t have to be expensive, but if you’re just getting started there are a few things you should invest in to take quality photos:

  1. A consumer DSLR camera or smartphone. Most smartphones today have a camera that will be more than adequate for taking standard product photos. Using a smartphone also gives you access to hundreds of photography apps.
  2. A light source. Having a light source helps to provide even illumination of your image and will make a huge difference to the quality of your photos. If you’re starting out you might find it easier to work with a natural light source. In this case, using a fill light will help you eliminate the shadows on your image.
  3. A white sweep. The sweep will help diffuse the lighting across your image evenly and make editing your photos later much easier. This can be anything from a white sheet to rolls of paper.
  4. A steady surface. If you’re taking a number of photos, having a steady surface makes it easy to keep your images consistently placed.
  5. A camera tripod. Likewise, having a camera tripod ensures you can get consistently positioned photos every time. It also makes it easy to readjust your products without having to juggle a camera at the same time.

Showcase your products with multiple angles

Look at any successful online store and you’ll rarely see one using just a single photo for any of their images.

Product photography can be used to showcase the best aspects of the product, so it’s important to include a variety of shots.

For example, at online clothing store Olive Clothing, they use a variety of shots to showcase their product.

Different photos can help showcase different aspects.

  • Long-shots showing the product on a model can help the user visualize how the product will look in a real-life situation.
  • Medium shots help them ascertain the overall look of the product itself.
  • Close-ups illustrate the finer details and quality of the product that can really sell its value.

Use a white background for your products

Replacing the background of photos with a white background ensures that you will have consistently great-looking images, no matter their order on your site or how you use them across the web.

White backgrounds are standard on almost every online store, and there are a few very good reasons for that:

  1. Your products will POP on a white background
  2. Your images will look consistent on collection pages
  3. It will save you money and time in editing
  4. You can easily reuse or replace the background on any of your photos
  5. Marketplaces like Google Shopping and Amazon now require white backgrounds

Using white-background images makes products easy to compare. Source: jenis.

You can use software such as Photoshop or Pixlr to manually replace the background of your product photos with a white background, or let services like Pixc do the work for you.

Save your images with the right dimensions

Paying attention to the dimension of your image is crucial.

  • If too large, you will cause issues with your page load time.
  • If too small, your images will look grainy (i.e. poor quality).

Use pixels to measure the dimensions of your images. Your iPhone will have something in the range of a 12 Megapixel camera, which just means that the photos it takes consist of twelve million pixels. The photos produced by the 12mp camera will be 3000px x 4000px.

For ecommerce photography, that size is unnecessary. On BigCommerce, for instance, the optimal size for your product photos is 1028px by 1028px, while your other photos should be under 1000px on both sides.

Keeping your images square will ensure they display correctly and look good regardless of whether the contents of the photo are longer or taller.

When your images are sufficiently large enough in dimension, then the same image can be scaled down to be used in your thumbnails or in collection images. And, if you have product zoom enabled, you can display a much higher-resolution image.

Images can be scaled down to different sizes. Source: Martha Stewart Cafe Shop

If you don’t have access to software that can resize your images, like Photoshop, don’t worry. Services like Pixlr and Canva can help you with basic editing and resizing needs.

Improve page load speeds by using the correct image format

It’s easy to just choose the default save option when you’re creating your images, but knowing the difference between file formats and settings can have a massive impact on your site.

Your BigCommerce store allows for three different image formats: JPG/JPEG, GIF or PNG. Each of these have different benefits and drawbacks.

  • GIF files are lower in quality, but also in file size. If you need to create an image specifically for small icons or thumbnails, then you probably want to use a GIF. They’re also the only format available that supports animation (though keep an eye out for APNG). However, as the image size gets bigger, GIFs become less efficient at processing colors.
  • PNG files support a wider range of colors, and are also the only format that supports transparent backgrounds. However, this all comes at the cost of a larger file size. If you need to edit a photo multiple times, you’ll want to export it as a PNG file.
  • JPEG images are the most common format used by digital cameras and online. They support a wide range of colors, but the JPEG compression settings allow you to strike a balance between image quality and file size.

JPEGs offer a good balance between file size and quality, while GIFs offer poor file size for more complex images. Image Source: Brook Lark

Experiment with quality settings

In most cases, JPEG will be the file type of choice for your images. It offers a high-quality image at reasonable file sizes.

One of the great benefits about the JPEG file type is the ability to choose the level of compression that you would like. Adjusting the compression settings enables you to reduce the file size, at the cost of image quality.

Have a look at this example where the same photo has been saved using different levels of compression:

The result of using high, medium and low JPEG compression. Image source: Alex Jones

When not to use JPEG

While JPEG is the most popular format for web images, there are a few cases where it’s best to use a higher resolution file type like PNG. For example:

  • When your image is mainly lines, icons or sharp images: JPEG compression may blur the line between the image and the background and make the contrast less apparent.
  • When the image will undergo multiple edits: The compression will slightly alter the image each time, and after several edits it may noticeably distort the image.

Compress your images with this free tool

As we’ve already discussed, images will typically range in file size from a few dozen kilobytes in their compressed form up to a few megabytes, depending on the file type and level of compression you have used.

If you’re unfamiliar with the Byte data unit, each Byte is equal to 1024 of the previous one. So to clarify:

1024 Bytes (b) = 1 Kilobytes (kb). 1024 Kilobytes = 1 Megabyte (mb). 1024mb = 1 Gigabyte (gb).

You don’t have to remember this, but just consider that you typically want to aim for photos that are under 100kb to reduce the time it takes for everything on your page to display.

An iPhone 7’s typical photo file size is around 3mb, which translates to 3072kb, or more than 30x optimal image sizes!

Now imagine that you have a gallery of ten photos all of this size on your page, and you start to understand why compressing your images is important.

Most image editing tools will allow you to adjust the level of compression for your JPEG files. But if your image-editing software doesn’t offer good compression options, or you aren’t sure on the level of quality loss that will be suitable for each image, you can use another tool to make your photo size smaller.

TinyJPG is one such service that is free –– a free image optimizer –– and will accept both JPG and PNG images.

Instead of you having to guess the right balance between quality and file size, services like TinyJPG analyze the image for you to determine the smallest possible file sizes while still maintaining optimal image quality.

TinyJPG shows you your original image versus the optimized image.

Even if you already compress your images when saving, you’ll be surprised how much of an impact running them through a service like TinyJPG can have.

Help people find your images with better, AKA image optimization

Images are a fantastic source of organic content that can help your rank better in Google.

There are a few things you should be doing to make sure that you’re getting the most out of your image content.

Use informative file names

Image names are the first piece of information you can provide to Google to let them know what your image is about.

The default file name that comes from your camera and looks like a string of numbers does nothing to describe what the photo is actually about.

When naming your images, describe the contents of the photo and use dashes instead of spaces. BigCommerce does not allow spaces in their image file names.

Include appropriate alt text

Alt text is intended as an accessibility feature, and that’s how it should be approached. If the user is vision impaired, or if the image can’t be loaded, the alt text is what will be displayed.

But alt text is also used by Google to gain a better understanding of what the image contains. That makes it a valuable spot to include the relevant search term that people looking for your product would search for.

Provide context around your image

The content that surrounds your image is also important. Search engines act the same way as your users do, by using the content throughout the page to build up a bigger picture of what the page is about.

This can be particularly valuable on product pages where you can use unique descriptions to better describe the product in the photo.

Use images to improve the experience

You can also go above and beyond and create a great user experience by doing the following with your images:

  • Use good-quality, non-blurry photos. With smartphones and free editing software available, there’s really no excuse for not having good-quality photos. It makes for a better experience, and people are more likely to link back to pages with better photos.
  • Place them higher up the page. People don’t always scroll down to the bottom of the page, so make sure your images are higher up the page where readers will have the chance to see them.
  • Specify the width and height of each image. If the browser knows how big the image will be, it can load the rest of the content in place while it waits for the image to finish downloading. This can reduce the amount of time it takes for your page to load and create a better user experience.

Providing extra SEO information and optimizing your images to provide the best browsing experience will help increase the amount of organic traffic to your site and improve the amount of time shoppers spend once they’re there.

Use Open Graph to show the right image on social media

The final thing you can do to get the most out of your images is make sure that when someone shares a link to your website the correct image is shown.

By using something called the Open Graph protocol, you can make sure that your best product image is shown, rather than a generic logo or unrelated image.

The image you want to use is specified in your page’s header section, similar to how you might specify the title tag and description for the page.

This is really easy to set up on BigCommerce product pages. Go to your product detail page, other details, and then set it up right here.

You might find that for certain BigCommerce pages, such as your homepage, you may need to create a separate HTML Head file where you can specify which image will be used.

Final word

Improving your ecommerce store images is one of the most effective ways to create a better shopping experience for your customers. Better images can help customers be sure of the products they are buying, help you rank better in search engines and lower your site’s load time.

With the advice you’ve been given in this guide, you have everything you need to start optimizing your store’s product images to bring in more traffic and make more sales.

Recommended Reads

Want more insights like this?

We’re on a mission to provide businesses like yours marketing and sales tips, tricks and industry leading knowledge to build the next house-hold name brand. Don’t miss a post. Sign up for our weekly newsletter.

Subscribe

Leave a Comment

Less Development. More Marketing.

Let us future-proof your backend. You focus on building your brand.