Optimising website imagery can play a significant role in preventing slow website loading times and enhancing the online customer experience.
If you are a business owner, you will know how important it is to facilitate an excellent customer experience.
This holds just as true, if not more, for the digital experience and in particular, your website’s ability to meet and exceed customer expectations.
As one the biggest points of contact for you and your customers, your website must be able to deliver a high-quality user experience from beginning to end.
However, in the case of many businesses this user experience is impeded by slow loading times. More often than not the root of this problem is large, unoptimised images inhibiting the pace at which web pages can load on a browser.
In this article, we will help you to understand why images should be optimised for websites before exploring some of the most commonly used file types and how you should go about preparing your images for upload.
Why do you have to Optimise Website Imagery?
Improves Page Load Speed
To put it simply, large images can impede page loading times, and lengthy loading times impede customer patience.
For instance, research carried out on consumer attitudes to website loading speeds revealed that poor website performance deters a massive 70% of consumers from purchasing from an online retailer.
Despite the fact that 70% of web traffic now originates from mobile devices, businesses often neglect to properly cater for the user experience on these devices.
It is imperative to consider how website imagery will load on mobile devices.
Once more, a slow-loading website can present a secondary issue of eating into consumers’ data plans.
Prevent Server Bloating
There is a vast range of website hosting servers to choose from, with all capabilities and price ranges.
However, one consistent feature of all hosting providers is that storage space is a finite resource.
If you are consistently uploading 20MB images, you are going to hit your storage limit very quickly.
Improve SEO
The im
portance of keywords in SEO is well documented but, did you know that optimised website imagery can play a significant in boosting your SEO ranking on search engines?
The main reason optimised website imagery enhances your SEO is that much of Google’s SEO ranking strategy has become much more focused on the quality of websites and their ability to answer a query, rather than solely considering how much a company spends on advertising or how many keywords they stuffed their content with.
This level of sophistication in Google’s algorithm means that if your website is slow, unnavigable and has a poor user experience, it will struggle to crack those top search results.
Easier to Backup
Like anything with so many moving parts, most websites will encounter technical problems.
Hence why we routinely emphasise the importance of always having a recent and up-to-date backup of your website should any serious issues be encountered.
Large image files will slow down the process of backing up a website significantly.
However, by simply optimising your website imagery, you can greatly speed up this process, giving you one less thing to worry about.
The Process
Understand the Difference Between File Formats
The first consideration to make when choosing website imagery for your website is the file format.
Whether designing websites or creating print graphics, using the correct image file format is essential for the best quality output while ensuring the best experience for users.
There are two types of images commonly used in both web design and print design, vector and raster images.
Vector Images
- Made up of mathematically described lines and shapes
- Can scale infinitely with no loss of quality
- Typically used for logos, icons, charts, infographics etc
- Can be animated on the web by using code to manipulate the shapes (Here’s an example!)
- Does not require a lot of data to describe complex shapes, so can be kept quite small
- Does support transparency but, creating soft shadow/blur effects can be problematic if not handled with care
Common Vector File Formats
.AI
Adobe Illustrator – the graphic design industry-standard software for vector images.
.eps
Encapsulated PostScript – an old printing industry format, not widely used anymore.
.svg
Scalable vector graphics that are web standard
Portable Document Format
- Can include a mix of vector and raster images
- Designed to be fully compatible across operating systems
- Ideal for sharing the likes of documents and art proofs
- Can only be viewed in a web browser in a new window, making it impractical for displaying within a web page/template
Raster Images
- Made up of individual pixels, each pixel contains information about its colour, opacity and position
- Can only be scaled up to their max pixel width. Any further scaling will see the image quality deteriorate
- Typically used for photographic images or images with soft edges, shadows and blurs
- Cannot be manipulated with code in the same way as vectors and thus, cannot be used for animation
- Can be compressed to reduce file size, however, high-resolution images tend to be rather large in file size, making them an issue for achieving fast loading times
- Some Raster file formats support transparency, making them very useful for where soft transparent edges, shadows, and blurs are needed
Common Raster File Formats
.jpg
- Joint Photographic Experts Group
- Good for photographic images but not much else
- Can be compressed to reduce file size, however, heavy compression can damage image quality. This is often referred to by the term ‘Lossy Compression’
- The widely used standard format for websites
- High-quality JPEGs are also ideal for print design as they help to keep file sizes manageable in complex documents
- Should not be used for logos or icons
.png
- Portable Network Graphics
- Supports transparency, making them ideal for images with soft edges, blurs and shadows
- Can be compressed or optimised by reducing the amount of colour, but once again users should be aware that doing so can lead to a loss in quality
- Should not be used for photographic images as they can become impractically large in this format
.gif
- Graphics Interchange Format
- Only really useful for super-simple icons or graphics
- Only supports up to 8 bits per pixel and up to 256 indexed colours, making for a limited colour range
- Allows basic frame-by-frame animations. Consequently, this is a popular format for memes!
.webp
- A new format developed by Google specifically for use on the web
- File sizes are much smaller than JPEG or PNG and support transparency
.tiff
- Tagged Image File Format
- Supports incredibly high-resolution images
- Supports transparency, but its files are gargantuan in size so it is not widely used outside of the likes of professional photography
- Not suitable for web use as files are far too big
.jxl
- JPEG XL
- A brand new image format for the web
- Has better compression than WebP, JPEG, PNG and GIF
- While it is not yet supported it will almost certainly become the standard in the coming years
Prepare Images for your Website
Crop
Modern website Content Management Systems like WordPress will automatically crop your images to suit specific sizes based on the templates in use.
However, it might be best to roughly crop your image before uploading it so you can ensure that important details are not cropped out.
While most websites are extremely clever and intuitive, even the best ones cannot determine what the important details are in an image.
Downsize
If your image was captured on a modern digital camera or smartphone, the chances are it is way bigger than it needs to be for the web.
The most common browser screen size at the time of writing is 1920 x 1080 pixels. If your image is bigger than this, it is likely carrying an extra file size that it simply does not need, especially if it is not going to be used at 100% full-screen.
Even after factoring in the ‘retina’ screen with double pixel destiny, it remains unnecessary to prepare images at a bigger size than 1920 x 1080 unless you are especially concerned about quality.
If that is the case, we recommend doubling up, so 1920 x 1080 becomes 3840 x 2160, but bear in mind the images will be very large and slow to load, especially on slower connections.
The smaller you can make the images, the faster your web pages will load.
Additionally, smaller images mean you will need less web hosting disk space, potentially saving you money as a result.
“Save As”
Now that you have an understanding of all the different image formats, you may be wondering how to know which one to use and when!
To help you, ask yourself the following questions.
Is it a photographic image?
JPEG is your best bet.
Is it an image with transparency i.e it has soft edges, shadows, or blurs)?
Make it a PNG.
Is it an icon or logo?
SVG is ideal, but if not, a PNG will do absolutely fine for the web.
Start Optimising your Website Imagery
Now that you are ready to begin converting and compressing your images, let us quickly show you how!
There is a wide range of tools that you can use to optimise your website imagery, helping to ensure your website is running as smooth as possible.
The tool we recommend using is TinyPNG as it is an easy-to-use tool that can very quickly reduce the file size of any .webp, .jpeg or .png images.
Simply upload the image you want to compress to TinyPNG, hit compress and when the compression is complete download the image back onto your device. Now your image is optimised and ready to be published on your website.
We hope that this guide has helped in giving you a greater understanding of optimising your website imagery.
Now that you have read this article, why not read our other articles for more web development, graphic design, and digital marketing insights?
Do you need help with your Web Design strategy? Contact us today to get your project started.