Optimize Your Images for Better Performance

At NetSuite, we love fast sites. It's really important to us that your site performs well, because as has been shown time and time again: faster sites get more conversions.

We've talked about performance before but another area everyone can work on is image optimization. Put simply, you can save a lot of download time for your shoppers by ensuring that the images they loads are the ones they need to see, and that those images are as lean as they can be.

To assist me in this, I've enrolled the help of Mark Sweeting, who's one of our senior web performance engineers. He's come up with a number of guidelines that I can share with you. In summary:

  1. Consider replacing an image with HTML or CSS
  2. Choose the best file type for your images
  3. Use the correct sizes for your images
  4. Compress your images
  5. Use the browser cache
  6. Design your images so they are easily compressible

With those points, let's take a look at each one of these in some detail.

Use HTML and CSS Instead

One of the easiest ways to improve performance on your site is to cut down the number of HTTP requests that are made. When I wrote about using extending Font Awesome so you could add extra icons, one of the points I made is that using an icon font cuts down on the number of images files you have to use. Doing this fits the 'reduce' philosophy of optimization, namely that to improve loading times you simply cut down the amount of stuff that is loaded.

Think about your strap lines, promotional banners, links and so on: can you replace these with HTML and CSS? If your image has text in it, can you make do without the image and build it with code instead?

This can also have a knock-on effect of improving SEO, because text is searchable and images are not.

Choose the Best File Format

Generally speaking, there are two primary large image formats that you use on your site: PNG and JPEG. They both handle images differently and while they both have compression algorithms, they work differently with different results.

Generally speaking, PNG is best for images with solid blocks of colours such as logos, banners and graphics. JPG, however, is best for things like photos, which have large variation in tone and colour. We'll talk a bit about compression a little later, but here's a cheatsheet:

Image TypeRecommended Format
Banner photographJPG
Product imageJPG
Banner graphicPNG
Site logoPNG

 

Size the Image Appropriately

Or, otherwise, known as "don't let the browser size the image for you". In a lot of cases, the required size of an image is known before you load the image, for example, banners have a maximum width, as do logos, product images, carousel images, etc. You waste bandwidth when you and increase loading times when you force a user to download an image that is bigger than they need.

Let's say that an image is being displayed at 120 x 120 pixels — well, then, use an image that is 120 x 120! Make sure you're not using an image larger than that and scaling it down.

You may not know that you can check whether this is happening, by using the browser's dev tools. Inspect an image and then hover over the element in the Elements tab.

Here you can see that I'm using an image that is 600 x 393 pixels, and it is being resized to 293 x 192 pixels. Perhaps I should use a smaller image?

Well, yes and no. Keep in mind that your site is responsive, so using a smaller image may result in it being inappropriate in larger resolutions. If you use an image that is too small then it may end up being upscaled, which will result in the image losing detail and looking blurry. Do some work and figure out what the largest instance an image will be used in, and aim for that.

NetSuite also has a dynamic image resizing service that can resize images to pre-defined dimensions. After setting it up, you can use the API to request specific image sizes via URL parameters.

Compress Your Images

So we talked briefly about file formats, but a key thing to remember is that it is not down simply to what format you use: it is also important to compress images correctly.

Directly exporting an image from an image manipulation program can result in a poorly optimized image as quite often they are set up to prioritize image quality instead. This approach decreases their suitability for online use. Similarly, using the Save for Web option, common in many image programs, produces poor quality images. You should use a proper way to optimize your images.

Lossy Compression

Broadly speaking there are two types of compression: lossless and lossy. Lossy compression is 'destructive', in the sense that it removes data from the image. After using lossless compression, the image is an approximation as it has simplified the complex content. It's most appropriate for photographs where a small loss in detail is not noticeable by humans. For logos and graphics, however, compression can create noticeable artifacts in the image, such as halos, which are immediately noticeable and undesirable. Thus, you might have worked out that it's more appropriate for JPGs.

Lossless Compression

Lossless compression is where you compress something and no information is lost. PNG is uses lossless compression and it's possible to make a very large image but only take up a small amount of disk space. For example, I created a 6400 × 4000 pixel PNG and it only takes up 78KB — how? The image is entirely black. The same image saved as a JPG with moderate compression takes up 303KB. If I were to do the same test with a photograph, the JPG would win in terms of file size because there is more complexity to simplify.

Color Palette Reduction

Another way to compress images is to reduce the color palette. Colors are stored in an index in the file, which describes every color used in the image. By reducing the number of colors in an image (and replacing them with similar, already used colors), lossless compression can be more effective.

Remove the Metadata

One final compression method is simply to remove the metadata on the image. When you take a photo, digital cameras will attach a whole lot of information to the image. While this can be useful to the designer or photographer who wishes to edit and retouch the photo, it is useless online and can result in significant increases in file size. You should strip all this information out of your images before you put them online.

Compression Tools

Mark has some recommendations for compression tools which you might find useful:

  • MozJPEGhttps://imageoptim.com/mozjpeg — an excellent online compressor for JPGs. It has an API, which is currently free while in beta. It also supports PNG compression.
  • ImageOptimhttps://imageoptim.com/ — a desktop tool for Macs. Make sure to check the Enable Lossy Compression option in the Quality preference to see results comparable to MozJPEG.
  • Image Alphahttps://pngmini.com/ — an excellent tool for compressing PNGs, again only for Mac. It has a slider to adjust the color depth and applies secondary compression via ImageOptim. Also supports transparent PNGs via an alpha channel.

Reuse Images

Resources a user has already downloaded will be stored in their browser's cache. Therefore, before making another request to the server for an image, the browser will first check in the cache to see if it already has it. Try to use that to your advantage.

One possible way to do this is contentious, in my opinion, so use with caution. Imagine a product detail page, which features a thumbnail image, a large image and a zoomed image for five different variations: this is a total of 15 images. The default thinking would be to have 15 different images, three varying sizes of the five variations, but this is 15 HTTP requests. Instead, what you could do is request only the largest of each variation and then use the browser to scale the smaller versions. This would reduce the bandwidth and cut out two thirds of the HTTP requests.

Now the reason I say this is contentious is because the zoomed image is often very large. So large, in fact, it may be better to not load it until it is actually requested by the user. This depends on how optimized your site is. For example, one PDP on my demo site has four colors and loads six of each (it has alternative views). If I include all of the other imagery used on the page then a total of 41 HTTP requests are made for images, to a total of 1.1MB. I could probably make savings here if I wanted to but 1.1MB isn't so bad. My very large images are only 90KB each, but they're quite well optimized.

Design Your Images Carefully

We've talked about how the nature of the image (photographic or solid colours) can influence your choice of image format, but what about a banner advert that also contains bold text on top of it?

In this situation you have a trade off. If you choose JPG and optimize for that, then the background image will look good, the file size will be good, but the text will be fuzzy, or have halos or soft edges. If you go with PNG then the text will be good quality, but to get a good background image, you'll need to significantly increase the size of the image.

So what do you do? Go back to the first recommendation Mark made: consider using a JPG image and then laying text over the top with HTML. The added advantage of this is that the text can be translated via the application, and it becomes searchable.

More Information