7 Quick Tips for Optimising Your Images

Why are images important?

Ok, I know this one might seem obvious, but many people don’t realise just how important bold images are for e-commerce. They’re usually the first thing your viewer is looking at, and instantly define your products and your brand.

Bonus read: How to build a DIY photography studio during your lunch break

Despite being so crucial, images and video are a burden on a website. They can severely slow down loading time, which has two big effects. First, it annoys viewers who are quick to give up and decide to go elsewhere. In fact, according to research from Google 53% of viewers will abandon a page that takes more than 3 seconds to load.

Second, search engines are no more patient. Google hates dealing with slow websites just as much as a New Yorker hates walking behind slow people. In SEO terms, having images that slow you down will bump you further down The List.

HTTP Archive shows an average of how much room images take up on an average website.

So how do you fix this? Luckily, optimising your images for the web is a simple process that has two main threads: Image size and SEO tricks. Here are some quick tips to get images that are fully optimised for e-commerce.

Improving image size

1. Choose the type of file you’re using

The two most common photo file types are JPEG/JPG and PNG. In really basic terms, PNGs handle simpler images very well and tend to be higher file sizes. JPGs on the other hand, are smaller but still have a fair bit of detail. If you compress them to be too small, they’ll lose quality, but can be used everywhere, while some older browsers can’t run PNGs. Gifs are short animated files, or a series of photos and video stuck together into one. All three types of popular image files usually need compression or resizing of some sort to be optimised.

P.S. looking for more technical terms? Check this post out.

Bonus Read: How to create a Gif for an email newsletter

2. Use the Image Optimizer app with Shopify

You can install the Image Optimizer app to your Shopify store, which works directly with images you upload onto Shopify products or blogs. It’s $5 a month for up to 1,000 photos with higher priced advanced plans. It’s easy, straightforward, zips right in and will tighten up your images so they take up less space or are resized.

3. Don’t go above 2MB

As a rule of thumb, your total page weight shouldn’t be more than about 2MB, including images and all ads/fonts/HTML etc. You can check it here to see how much messing around you need to do.

4. Compression tools: To loss or not to loss

One concept to understand with image optimisation is lossy or lossless compression. Lossless compression means that when you shrink an image, you’re not losing any quality. Lossy means you shed data as you compress. Why would you ever choose lossy if you could choose lossless? Basically, it’s a tradeoff between size and resolution. But even lossy compression can still be high enough quality if you go for a medium compressor.

A really user-friendly compressor I came across was Short Pixel. They offer both lossy and lossless compression, with up to 1000 photos a month for free.

Otherwise, there are a ton of basic online compressors out there. CompressJPEG is an easy free one. Here’s an example of an uncompressed file at 1.8MG, and a 91% compression using CompressJPG that turns it into 149K. Huge difference in size, but awesomely, barely any difference in quality.

Before and After image compression

Bonus read: Using (free) stock photos with Shopify Burst

5. Optimise your photos directly as you edit them

In your image editor, you have the option to resize and compress photos directly. The most popular photo editing software is and has been Adobe PhotoShop for years. There’s also a cheaper desktop photo editing software called Affinity that has pretty much all the same features, plus loads of editors you can use online.

Bonus read: Photo editing software to help you create shiny, gorgeous product photos

6. Shrink the silent killers - backgrounds and thumbnails

Background images, like borders and banners, can take up more space than you expect. The best file type for borders and simple patterns is PNG-8. You should also consider any wallpaper-type backgrounds, and try shrinking them as much as possible. Doing this throughout your site should increase speed as a whole.

Your thumbnails (the mini versions of your larger product images) are important but can usually take a bit of slicing down. Compress thumbnails as much as possible - it’s usually fine to have lower quality images for these.

7. Use all the words you’ve got to improve SEO

You have the chance to utilise image filenames and alt text to the best of your advantage. When you save your files, create a name that has at least one keyword and is written in clear, plain english. Womens blue shirt with ruffles is much more useful for SEO than Imagefile-013958.jpg.

Alt text is the caption that comes up when a mouse hovers over an image. When a browser can’t render a full image, it displays the alternative text instead. You have a bit more space with these, so you can put in a short description and any serial numbers. Be warned though, do not overstuff your keywords. Search engines try to avoid descriptions that seem spammy, so anything like “womens blue ruffle shirt buy now free shipping quality cheap gift” is going to work against you.

Alt text is part of your Meta Data. It helps Google figure out what your picture is showing, making it easier to come up on Google Image Search.

Looking for more optimisation help?

Elkfox is a Shopify Expert that helps e-commerce companies get ahead with better optimisation of images, SEO and design. Talk to us if you’re interested in learning more about how we can work with your business to drive sales with a beautiful website.