image optimisation

Image Optimisation

Gareth Jones | April 13th, 2019

Images are awesome.

A single image has the power to transform a piece of text into a rich and engaging experience. They have the power to bring content to life, to enforce a message, to make copy more shareable and to better communicate your brand.

Put simply, Images matter.

Here at Canvasflow we get asked a lot about images – what formats to use, max dimensions and how to ensure quick loading. From my experience it appears that for many, images optimisation is still considered an afterthought. It gets done if and when we find the time.

I understand this – clients would much rather do the fun stuff like writing an epic article or communicate an important message. It is also highly likely that the impact of un-optimised images is not understood.

In a time where slow loading content not only negatively affects the user experience but can result directly in loss of revenue, it’s critical to understand what impact images have on your content.

Why optimise images?

You work hard to create engaging content and spend time promoting and distributing it, so the last thing you need is for potential visitors to abandon it before it even loads!

With up to 40% of visitors clicking the back button if a page takes longer than three seconds to load, and with half of your visitors likely to be on slow connections, you need to ensure content is optimised.

And we already know what largest offender of slow page loads is – your images.

Understanding image impact

So, how can you tell if images are causing your content to be delivered slowly? There are many tools but one of the most straight forward is to use Page Weight – a simple to use tool developed by the team at imgix which highlights how unoptimised images affect your site’s overall weight and speed.

Page weight

Enter the url of a page or website and let Page Weight go to work. If you find unoptimised images are a problem, here’s what you need to know to fix them.

Image optimisation basics

There are many factors that help determine if an image should / can be optimised, but in general If your image is over 1 MB there are saving to be had.

When it comes to optimising images there are a many different factors you need to be aware of. The main three are file type, size and compression.

Let’s take a closer look at each of these.

Choosing the right file type

JPG, PNG, GIF … there are many image types and it’s technically ok if you save your images in any format, the image will display fine. There are pros and cons of each format, but for most cases you can remember the following:

  • JPEG – best used for photographs where people and places are featured – produces a relatively small, efficient file size.
  • PNG – best for graphics, logos, text-heavy designs and if you require transparent backgrounds (which is probably essential if you are working with a logo).
  • GIF – use *only * if you require animation.

It’s worth mentioning there are many new image formats which offer advantages over the traditional formats. These provide considerable savings in file weight and improved visual quality, but because universal support these is still lacking, they are not yet recommended for mainstream consumption.

This situation would change if Apple started supporting WebP.

Image Size

In the world of print, high resolution images are always a good thing but as we have seen above, on the web, large images slow down access to your content.

The exact file size required for an image will change depending on how and where it’s being used. As a rule of thumb, if your image is 5000 pixels wide, it’s way too big. You can easily resize it to 2048 pixels wide, 1200 pixels wide, or even smaller depending on how you plan to use it.

Just remember that when you resize an image, make sure not to keep the proportions the same so not to distort the image.

Your graphic program will show you the size of your images, but you can also find the file size and image size right on your computer. If you’re on a PC, right-click on the image file, choose “Properties” and then the “Summary” tab. On a Mac, Ctrl+click on the image file and choose “Get Info.”

Image Compression

When it comes to optimising your images, nothing reduces file size more than advanced image compression. Luckily for you there are a wide range of tools to choose from.

Most image editing software will save files with JPEG compression since it has the best file size reductions. While image quality may be slightly reduced, using lossy image compression reduces huge images to web-friendly sizes.

For many who use Photoshop, its Save for Web feature is seen as the be-all and end-all of image optimisation, but there are tools that can compress significantly further and still appear identical to the human eye.

Here are some fantastic free tools which make it easy and quick to crunch your images.

Desktop Tools

Need to process images offline? Take a look at these tools desktop apps:

ImageAlpha / ImageOptim

For Mac users these are two super easy to use, free desktop tools that will significantly reduce the file size of your images.

ImageAlpha is a lossy PNG compressor which works wonders on shrinking PNG files, while ImageOptim performs advanced compression while also striping unnecessary metadata from your files.

JPEGmini

For JPEG files, JPEGmini app, is available for both Mac and Windows.

The free version allows you to optimise 20 images per day and can do wonders for your file sizes.

Cloud Tools

If you’re more SaaS than desktop, these should be your go to tools:

Kraken

Although primarily a paid for tool, Kraken also provide the ‘freemium option’ which allows you to upload some images for free. You are restricted by images 1MB in size but the intelligent lossy optimisation offered provides amazing results. They also let you download multiple optimised files in a single zip which is cool.

Optimizilla

Optimizilla Uses a smart combination of the best optimisation and lossy compression algorithms to shrink both JPEG and PNG images to the minimum possible size while keeping the required level of quality. You can process up to 20 images at once and have control over the level of optimisation you need.

Compressor

Compressor is a powerful online tool which drastically reduces the size of your images and photos whilst maintaining a high quality – with almost no difference before and after compression. With support for 4 file formats, they also offer a tool to preview the visual difference of optimised images.

TinyPNG

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files by selectively decreasing the number of colours in the image. The effect is nearly invisible but it makes a very large difference in file size! They offer support for up to 20 images but with a max 5mb file size restriction.

Summing up

Ensuring the delivery of optimised content should be of paramount importance, and (in my humble opinion) considered core to all digital content production.

There are many tools available that provide insight into how significant savings can be achieved, and numerous free tools to help realise these.

Here are a few points to take away.

  1. Size matters. Start optimising your images.
  2. Always remember that not all visitors have high-speed internet. By not considering the impact images play could have a massive impact on readership and revenue.
  3. Whenever possible, test the images you are currently using with the tools available so see what saving can be made.
  4. Pay attention to image dimensions and resize unnecessarily large photos or images to an appropriate size.
  5. Ensure the correct format is selected for each image used.
  6. Take advantage of simple to use but effective image compression tools like ImageOptim, JPEGmini or Kraken.

Go with TheFlow, stay in the know

Subscribe to our monthly newsletter TheFlow and stay up to date with everything Canvasflow