Another January done, how many of you have stuck to your new year diet/health and fitness/gym memberships? This year, I’ve decided to share my top tips for web performance and to kick things off I’m going to show you how to shed some kilo(byte)s from your pages and keep the weight off long-term, guaranteed - none of these fads!

Before we start, here’s a quick disclaimer: Web performance is a large and complicated area. The aim of these tips is to briefly explain some simple fixes that can be applied to real-world CMS setups to help you get the best performance.

Today, I’m looking into how we can slim down our image and graphic assets to enable maximum speed, improved appearance and even boost your search ranking.

The weigh in

The end of last year saw the average bytes per page on the top 1000 websites on the internet weigh in at 2.3MB, with images accounting for a whopping 1.2MB of that weight.

The last few years have seen an explosion in rich media across the web. Screens have increased in resolution and graphics processors are now more powerful than ever, in even the smallest of devices. The once limited browsing landscape is now able to support multiple high-resolution images and video formats and allows for complex animation and interactivity.

The side effect of such amazing content? Bloated page weights, which lead to poor performance.

And, with increased use of mobile devices, sometimes with limited connectivity, it is more important than ever to make sure your web content can be delivered to users quickly.

Making the healthy choice(s)

A healthy diet is about making the right choices so, first of all, let's assess the choices we’re making for our website images.

The most common mistakes I see when dealing with image assets on content managed sites are the wrong format and file size of image being used.

I follow these simple rules:

  • JPEG is the best format to choose for use in most cases, e.g. banners, galleries and content images.
  • PNG for sharper graphics and transparent elements (alternative to vector graphics where support is not available).
  • GIF for very simple animations or clips.

Once you have chosen the correct format it is essential to resize and optimise the file to best suit your needs.

Here you can see an example of a PNG image originally 900kb.

test1

As this is a photo we can change the format to JPEG using an image editor like Photoshop.

Here’s that same image now reformatted into a JPEG.

test1

The result of changing the format to JPEG is that it takes our weight down to 240kb. Oh, we’re cooking now… but we can do better than that!

Image and graphics tools like Photoshop and others offer the ability to further optimise images. For JPEGs we can (and should) choose the ‘Save for web’ option (found under ‘Export’). This allows us even further control over the quality and size of an image. For example, if I choose ‘Medium’ quality and choose ‘Progressive’ we can drop our weight down even further, now to a skinny 86kb.

And, all of this with minimal impact on the overall appearance of the image.

Here’s a look at the final JPEG optimised to medium quality:

test1-optimised

Progressive images allow image data to be rendered before all of the data is received giving a sort of blurred pixelated version of the image until fully loaded.

Progressive loading example

Healthy alternatives

But, what alternatives do we have for our other fatty graphical assets?

Now that modern browsers have finally caught up we are able to use browsers to create and manipulate graphics. SVG, or scalable vector graphic, is an XML based version of a vector shape or illustration. Basically a code version of a graphic that details the paths, shapes and fill colours that a browser can render.

Due to better CSS can also be used to create shapes, gradients, images filters and text effects.

See the Pen CSS Elements by Ally Reid (@ally_reid) on CodePen.

After Digital Logo in SVG

See the Pen SVG by Ally Reid (@ally_reid) on CodePen.

Animated SVG Example

See the Pen SVG CSS Animation by Ally Reid (@ally_reid) on CodePen.

Getting Lazy

I appreciate though that sometimes having a large number of images on a website is unavoidable. Even with the best optimisation on all of them, the total extra weight that they add during network requests can still grind a page to a halt.

With a little bit of JavaScript we can tell the browser not to load the images until they are about to become visible within the user viewport.

If you look in the example below on the right-hand side you can see the the browser requesting images as the page is being scrolled. It loads an additional 679kb in from 6 image requests (I’ll have a word with marketing about the PNG in there 😜).

lazy

If that had been part of the initial page load we would have definitely seen a big delay in loading time. With this technique we have a better experience for users and still get to load the images we want.

Fighting temptation

Ultimately the quickest way to save kilobytes is to just remove any unnecessary images from your pages. Just ask yourself, do I really need this? Perhaps that huge hi-res hero image banner could be a bytesize vector graphic?

With some or all of these techniques used on your website, I can guarantee that you will see the weight drop off and, even better, stay off! So, let’s get those slimmer web pages today, all together: Yes, I CAN!!!!!

Yes I Can!!

Of course, images are not the only asset slowing down your pages. In the next post, we’ll discover how we can get third-party resources and scripts to perform better for us. Hello slim city!