It’s pretty obvious that good graphic design is an essential marker for your website’s success. We know that if a website looks great, functions smoothly and is beautifully laid out, then customers will enjoy the experience and stay longer. An important part of this is how long it takes your website, and subsequent pages, to load.
Furthermore, loading speed is an important ranking metric for the Google algorithm. In other words, the faster it loads, the more favourably Google will rank your search result. So, in this era of rapidly shortening attention spans, your site needs to load as quickly as possible. In fact, according to the latest research, our attention span is a mere 8.25 seconds which is shorter than that of a goldfish at 9 seconds!
Image size and format can take a big byte
Selecting the right image format and compression is what’s called ‘image optimisation’. This task is part of good graphic design. Generally speaking, it’s the images on a website that slow it down. Therefore, it’s imperative your images are optimised.
How do I optimise my images?
Firstly, take time to decide if an image is necessary. Is it essential? Remember that the best graphic design is largely the simplest. Secondly, make sure the image is optimised for display on the web. In other words, there’s no need to use an image the size of a billboard, it won’t look any better once it’s reduced to say 500 by 200px. So, unless you’re specifically providing images for print, then keep the bytes as small as possible. Lastly, beyond the universally accepted formats of GIF, PNG, and JPEG, there are two main types of images; raster or vector.
Vector images are generally small in filesize and are resolution-independent which means that they can be scaled without any loss of quality. They often use a smaller number of colours.
Bitmapped or rasterised images can use millions of colours and offer great detail and photo-realism. However, they show pixelation when resized beyond their initial dimensions. In short, you must select formats depending on the intended use of the final image.
NextGen Image File Types
In a nutshell, NextGen image file types are a new way of serving up superb quality website images with amazing compression. All modern browsers have now adapted the technology. Google has made it part of their recommendations for a website’s loading experience (Core Web Vitals).
Now that it has more widely become a web standard we have upgraded all of our websites to the new standard (.webp) as part of our Website Management Plans.
Backwards compatibility also needs to be considered. We still serve up the traditional image formats (PNG, JPG, GIF) to all browsers that do not support the NextGen format to make everyone happy.
Look at the Big Picture
Image optimization could be considered as both an art and a science. A good graphic designer deploys a number of techniques to achieve the best possible image optimisation.
