User Friendly Background Images For Your E-Commerce Site

Ian Pullen
By Ian Pullen / February 28, 2017

We’ve recently been helping out handmade business owner who’s been preparing their WordPress site for a relaunch.

One thing that struck us when we first looked at the site with its new theme was the background image.

Actually, it wasn’t so much the image that struck us as the time the image was taking to load.

The Problem

Rather than instantly filling the page, the background image was slowly loading, filling the screen from top to bottom.

screen-shot-2016-10-19-at-10-48-09-am

So here’s what the image looks like. When we took a look at it, we found it had a filesize of 5.2MB. On a very fast internet connection, that would still load quite quickly, but for slower connections (our connection is 6MB), there is a delay as it loads.

This is going to be even worse for mobile users.

Not only will it probably load very slowly, most mobile users are charged for how much they download. So someone visiting this page would lose 5MB of their data allowance just to add a pretty background image.

Actually, most web hosting packages also have limits on the amount of data a website can transfer to their users. So it’s possible a large file like this could increase costs for site owners too if lots of visitors are having to download it.

Obviously this isn’t great for anyone.

The Options

We need to reduce the filesize of this background image. This is actually quite easy.

There are basically two or three ways that we can reduce the filesize of an image.

  1. Reduce the dimensions of the image
  2. Change the file type
  3. Compress the image

Let’s consider what each of these options mean.

Reduce the dimensions of the image

The image we’re looking at measures 3,000 pixels wide by 3,000 pixels tall. That’s a big image and we’d rarely need images that large on our websites.

However, this is a background image and while many visitors may use a small screen mobile device, others may be using screens 1,920 pixels wide or even larger.

For that reason, reducing the dimensions of the background image isn’t an option we want to use in this case.

Change the file type

Different image file types have different qualities making some better for specific uses than others.

Most commonly online, three image file types are used.

  1. GIF – best for animations
  2. PNG – best for graphics and when transparent areas are required
  3. JPG/JPEG – best for photos and small file sizes

GIF and PNG files are generally larger than JPEG files, but not invariably so. If an image contains very few colors, a JPEG may be larger, but when there are many colors, a JPEG will usually be the best choice for small file sizes.

Compress the image

All three file formats offer options for compression, but JPEG is probably the easiest to get to grips with.

Compression of JPEGs and GIFs can decrease the image quality, so it can be a bit of a juggling act between file size and quality.

PNG compression doesn’t reduce the image quality, but it may increase the time it takes for an image to display.

The Fix

In this case, the image contains quite a range of different colors. There is also no animation or transparent areas. For this reason, we chose to convert the file to a JPEG and take advantage of file compression too.

If you have an image editor on your computer, such as Photoshop or GIMP, you can use that to change file types and compress images.

Alternatively, you can use an online service. We’re using Online Convert for our image.

Firstly select the image file on your computer for upload. Secondly, adjust the “Quality settings” drop down. I set this to “Best compression” as this is a background image and I expect that to give sufficient quality. If this was a main image, I might select one of the higher quality settings, like “Good” or “Pretty Good”, but these would produce larger file sizes.

I’ve ignored all of the “Optional settings” as I want to keep the file the same size and not make any visual changes.

back-img-2

Then it’s just a matter of scrolling down and clicking the “Convert file” button.

It will take a few moments to upload the image and then convert, especially if it’s quite large.

back-img-3

When it completes, the download should automatically start, but click the link if necessary.

The file I downloaded was 527KB in size, reduced from 5.2MB. The new image is 10% of the original size, but the quality looks just as good.

Do you have problems with images on your site loading very slowly? Give this a go and see if you can make your site turbo charged.

Do you have questions about your site?

If you’re having difficulties with your site, please get in touch and describe your problem and we’ll try to help. Just leave a comment below or use the contact form. We look forward to helping you.

Useful weekly tips delivered direct to your inbox!

Sign up to our FREE weekly newsletter and receive useful and actionable tips to help you grow your business and follow your dream.

About the author

Ian Pullen

I'm a graphic designer, web developer, photography enthusiast and writer with articles and images published in print and online.