Ecommerce • 11 min read

Essential eCommerce Image Optimization: 5 Tips

Written on 24 Feb 2020

Overview

Image optimization is one of the most underappreciated factors in running a successful eCommerce website. Today, we’re here with some tips and tricks to help take your store to the next level.

It’s not the first time we’ve talked about image optimization at CodeClouds, but that’s because it matters. Poorly-optimized images are the single biggest contributor to slow load times, and slow load times are absolute poison for your conversion rate: 53% of users will leave a site that takes more than 3 seconds to load. If you’re not taking your eCommerce images seriously, then you’re cutting into your bottom line. Don’t worry, we’re here to help. Today at CodeClouds, we’re going into detail about what images are and how to get the most out of them:

Pick the Right Format

This is a big topic, and is going to need a bit of a breakdown of key terms:

Lossy vs Lossless
This isn’t important on display, but it’s critical while you’re editing pictures to get them right for your site. Whenever you save an image in a lossy format (like JPG) you lose definition, and start to get ‘compression artifacts’—the computer throws away some data during the save to help reduce the file’s size, but this means outlines get blurry and random floating pixels start to appear out of nowhere.
compression artifacts in action

That’s not to say you should never save as a JPG, you just need to be aware of compression and how it’s going to affect the image if you’re doing a lot of saving and editing. JPG has an excellent colour space and tends to have smaller file sizes, it just needs to be what you save your high-definition images into at the end, rather than while you’re still working with them.

There are ways to prevent compression during save/modification of lossy format images, but they vary based on your photo-editing software and are a lot fiddlier than just working in something like PNG or TIFF then exporting to JPG when they’re ready to go live.

Lossy Formats:

JPG
GIF
Most video

Lossless Formats:

PNG
BMP
RAW
TIFF

Raster vs Vector
Raster images are the most common and easily-understood image type on the internet. A raster is composed of pixels: small coloured dots that come together to make a single coherent image. What this means for the eCommerce developer is that if you have a small raster and you want it to be bigger, it’s not going to work—resizing it will make it look extremely ugly and blocky.

Why you use rasters is because they’re more compatible, flexible, and will run almost anywhere. Vector images are comprised of points, lines, fills, and colors on a 2D space, which means they can be scaled to any size before being rasterized. Notably, most fonts are vector files that your browser converts into rasters. See our font rendering guide for more detail.

It’s worth noting that while raster images are harder to resize and edit, they still look good. Almost every image you’ve seen on the internet will be a raster, and I’m sure you’ve seen some gorgeous images. Aside from basic things like logo and images with simple colors, it’s really not possible to convert certain images- like ones from a camera- to vector images in a reliable and good looking way.

Compared to rasters, vectors are a series of mathematical equations rather than a series of pixels. This lets them process things like relative distance, meaning you can resize them easily without distorting the image at all. Vectors are your go-to when file editing logos or diagrams, if you’ve got the software to edit them. Adobe Illustrator (and to a less extent Photoshop) do a lot of work with vectors, and for good reason. The increased complexity of the file is a liability for load times, but it means you can manipulate the image in powerful ways you wouldn’t have access to in a raster.

All vectors are lossless.

There is only one vector format accepted by browsers, and it is:

Raster formats:

Everything except SVG

Okay so, Which is the Right Image Format?

Generally speaking, your choices for web display are between JPG, PNG, and GIF—they’re the big three that are supported by all browsers and eCommerce platforms. Other formats remain useful for editing and storage, and I wanted to create a more complete list of options. Here’s what you’ve got:

JPG: lossy raster, depending on the type, file size, and export options. Awful for editing, great for display. Looks slightly worse than competing formats like PNG, but has a significantly smaller file size for most images, which is critically important in increasing your eCommerce conversion rate. Supported by almost everything.
PNG: lossless raster with support for transparency. Tends to be a little richer in colour than JPG and is better for editing but also means bigger files and slower load times. The one exception to the size and load times is pictures with simple colors like logos or other similar images. Images that contain a lot of space with solid colors or text may actually see a file size decrease when exported as a PNG over a JPG. PNG images are supported by almost everything.
GIF: lossy and allows for animations. Good for icons, favicons, and other small illustrations, but has a limited colour depth (256 bit) that will make HD photography and any other detailed images look awful. Supported by almost everything.
SVG: vector, commonly used in digital art and other editing. As of 2020 there are no cameras that encode into vector format so vector photography is very tricky, and vectors are often restricted to illustrations, lettering, and other art. Graphic designers will sometimes work with a vector in Illustrator and then continue editing the SVG in Photoshop, though many find it easier to convert to a raster before making the switch. Very limited web support.
BMP: a special Windows system format. Lossless, works very well with other Windows programs, has issues trying to work on other operating systems or unsupported browsers.
PSD: the default Photoshop format. Lossless, high-quality, retains “layers” that make editing significantly more powerful but can also send the file size into the stratosphere —I was recently working on a 770MB PSD that crunched down to 13MB after I folded the layers in. PSDs are one of the best choices for editing, but can not be displayed on a web browser without exporting as another format first.
TIFF: Can be either lossy or lossless, depending on your needs and how you configure it. Popular with Photoshop users as a PSD alternative because files remain fully editable with layers intact. Common in publishing and printing, but unpopular on the web due to limited browser support and lack of compatibility with platforms like BigCommerce. Like all layered images, TIFF has a huge file size.
WebP: the new kid on the block, designed by Google. Can be either lossy or lossless. Designed as a “JPG killer” but hasn’t yet really taken off like Google planned it to.

Name Your Files (and configure your alt text)

I’ve banged this drum before, but it’s one of the easiest SEO tricks in your arsenal and it makes collaboration and teamwork easier: name your files after the thing that’s in them. Have you got a photo of a banana? Banana001.jpg. A woman in high-rise jeans from the summer collection? HighRiseJeansSummerCollection2020.png.

The benefits of this are:

It makes it easier for crawlers to identify the content of your page, giving you an SEO bump
It makes life easier for people using screen readers
It means the file is easier to find if you need it again in future, both for you and anybody else on your team
It’s so easy

I am serious about that point: the cost/benefit ratio on naming your files properly is incredible, but people still aren’t doing it. I’m often asked exactly how to name files well, but that comes back to the same bullet points above:

What do you want a crawler to think the page is about? What are your keywords?
If you required a screen reader, what file name would be useful to you to help understand the page’s content?
If you need the file later, what name will make it easier for you to find? What name will make it clear for the rest of the team what the image is of?

Find a balance of those three factors, and you’ve got the perfect file name.

If you’re using Alt Text (which you should) the same rules apply, and it’s good to note that screen readers prefer alt text: if it’s there, they’ll read it instead of the file name. Alt text also allows your language to be a bit more natural: “A Woman in High Rise Jeans from the ExampleCo Summer Collection 2020” has more keywords than the file name and is easier for users to parse at the same time.

Making an Image Sitemap

We’ve previously talked about XML Sitemaps as a way to improve your store’s Google Ranking, but did you know you can add an image sitemap as well? Remember: the better the Google crawlers understand your content, the more likely you are to appear in relevant searches. Your Image Sitemap isn’t just a way to help crawlers navigate, it’s a way to help them see—they can’t read images, but they can read text describing those images, and it’s often the critical context they need to help get you onto the first page. You can include the following image data in a sitemap:

URL location (mandatory, any good sitemap generator will include by default)
Title
Description
Caption
Licensing

Thumbnails Matter

One of the simpler image mistakes people make while setting up an eCommerce store is to not consider what the item will look like as a thumbnail, despite the fact that an overwhelming majority of users will see this view first and only see a larger image once they’ve clicked on the thumbnail.

If you’re running an eCommerce platform that lets you choose thumbnails this is fairly easy, but some platforms will simply pick the first image from the product screen and run a scaled-down version, in which case you need to make sure that first image looks good at smaller sizes.

That usually means:

Image centered
White or light grey background
Minimal other elements
Focus on general shape/recognition > detail

If you look at the featured product results on a SERP, you’ll see the top thumbnails Google selects all follow these rules:

eCommerce Image Optimization-featured product results 1

There are exceptions, but Google definitely has a preference for this sort of thumbnail, and you significantly increase your odds if you make yours look as much like this as possible. They also just look good: it’s easy for users to recognise what they’re seeing at a glance, and that makes them more likely to click through.

Get a Professional

You can do a lot of eCommerce optimization in an hour or less, just reading on the internet; we’re blessed to have access to information networks like this. Some things though, still take a professional. If you want to hire eCommerce developers with proven eCommerce experience, then you’re in the right place. CodeClouds offers affordable development packages on a monthly basis, suitable for everybody from single small business owners to massive enterprises. Let our brilliant developers take your site to the next level!

If you’re on an eCommerce research kick, check out our Great Big Guide to eCommerce Platforms, and our breakdown of Cialdini’s Principles of Persuasion (for eCommerce). If you want to get really involved in your optimization and want a secret algorithmic weapon at your disposal, you might want to read up on TF-IDF for SEO.

Share this article

134 reads

Contents

1.Overview

2.Pick the Right Format

3.Name Your Files (and configure your alt text)

4.Making an Image Sitemap

5.Thumbnails Matter

6.Get a Professional