Your website’s performance greatly impacts the user experience and your search engine rankings. One often overlooked aspect of this is image optimisation, even though it’s pretty easy to implement. Ensuring any images on your website are optimised can help reduce page load times, leading to better user engagement and overall site health.
What Image Optimisation Means
The larger the images are, the longer your web pages will take to load. Image optimisation is the process of reducing the file sizes of your images so they don’t slow down your site. The goal is to reduce the image file size without losing image quality visibility – it’s a fine balance to find. While smaller images are a great way to speed up your website, you don’t want pixelated, unattractive images on your site. By following the image optimisation practices outlined below, you can have the best of both worlds. There’s also some fantastic image optimisation plugins and tools to help you along.
Why It’s Important To Optimise Images
If you want your site to deliver the best results possible for your business, it needs to offer users a positive experience by following website performance best practices. Users expect a lot from websites today, especially those run by businesses – large, unoptimised images will slow down your load times and lead to more users clicking off before you get a chance to convert them to paying customers.
Moreover, search engines like Google use page load speed as a factor in ranking websites, making decreasing load times through tactics like image optimisation a core strategy of technical Search Engine Optimisation (SEO). Faster websites offer better user experiences, leading to higher search engine rankings and more visibility to attract visitors.
Images Are Likely Weighing Down Your Site
Images take up a huge amount of page weight. The heavier your web pages are, the longer they’ll take to load. According to a 2019 whitepaper from HTTP Archive, images make up 75% of a total webpage’s weight, on average. It goes to show that if your website loading times aren’t what you’d expect, unoptimised images should always be the first suspect.
Unoptimised images can also affect your website’s Search Engine optimisation (SEO). Aside from the fact that web page loading time is one of Google’s known search engine ranking factors, Google is likely to index your images in Google Images if they’re large files.
Learn How To Optimise Images For Better Web Performance
Now that you have a better understanding of why it’s important to optimise your images for the web let’s get into the nitty-gritty of how to put that knowledge into practice.
1. Choose The Best Image File Type
If you want to optimise images for the web without sacrificing quality or slowing down your website too much, choosing the right file type (or image format) is important to strike that perfect balance. Here are the four file types you can use to format your images:
JPEG Images
JPEGs, short for Joint Photographic Experts Group, are best for photographs and realistic images. They offer a good balance between quality and file size, making them suitable for web use where speed and bandwidth are important. JPEGs work well for detailed images where file size could become an issue. Product images are a great example – the images should have enough detail that users can zoom in and see details without issue, but as you might want to have many products displayed on one page, it’s important that the file sizes are as small as possible.
PNG Images
PNGs, short for Portable Network Graphics, are best for images requiring transparency or those with sharp lines and clear colours, such as logos or icons. PNG files typically have larger file sizes compared to JPEGs but provide a higher-quality image. You should upload images as PNGs when clarity is most important, though they might impact page load times more.
WebP Images
Developed by Google, WebP images are significantly smaller in file size compared to JPEGs and PNGs, with minimal loss in quality. This reduction in file size can lead to faster page loading times and improved website performance.
SVG Images
SVG, short for Scalable Vector Graphics, is based on vectors rather than pixels like JPEGs and PNGs. Vectors are lines and shapes defined by mathematical formulas. This means they can be scaled to any size without losing quality, making them ideal for logos, icons, and complex illustrations that need to look sharp at any size.
Which Is The Best Image Format For You?
When it comes to adding images to your websites, it’s essential to choose the right image format to ensure your site is fast-loading and visually appealing on all devices and web browsers.
JPEG and WebP are great choices for detailed photos since we find they compress well, allowing your site to load quickly. For graphics like logos that require a clear background, PNG or WebP are the way to go since they support transparency while maintaining quality. And if you need high-quality images, SVG is the best option.
It’s important to ensure that your chosen image format works well across all web browsers and devices. While WebP offers excellent quality and file size, it’s not supported on all web browsers. Therefore, testing different formats and settings can help you find the best image setup. Don’t hesitate to try out a few options to see what works best for your site’s speed and looks.
2. Resizing Images Before You Upload Them
One of the simplest yet most effective ways to ensure your images are optimised is to resize the images before uploading them. Original images straight from cameras or stock photo sites often have a much higher resolution and image dimension than necessary for use on your website. This is especially true if you’re uploading raw files from a DSLR camera – unless you plan on blowing these images up and putting them in a gallery, all ultra large images will do is slow your website down.
How To Resize Images
You can resize your images using Adobe Photoshop or free image resizing online tools like Adobe Express or ImageResizer.com. You can also use simple image editing tools on your computer, like Preview for Macs or Paint for Windows, to change image sizes.
How Big Should Your Images Be For The Web?
The optimal size for website images depends on their purpose, but there are general guidelines to help ensure your images don’t unnecessarily slow down your page load times.
Background Images: Aim for a maximum of 1-2 MB for large background images. For full-screen backgrounds, 1920×1080 pixels is a common resolution that balances quality and file size.
Content Images: These include images used within articles, product pages, or galleries. A width of 800-1600 pixels is typically sufficient for most needs, with a file size aim of 500 KB or less.
Thumbnails and Icons: Keep these images small; a maximum width or height of 100-200 pixels should suffice, with file sizes ideally under 100 KB.
Hero Images: For large banners or hero images at the top of web pages, aim for a file size of around 1 MB or less, with a width of around 1920 pixels if they span the full screen.
3. Compressing Images
After you’ve chosen the right file type and resized your images, the next step is compression. This process reduces the file size even further without significantly affecting the visual quality. Compression is key to making your website load faster because it decreases the amount of data that needs to be transferred to the user’s browser.
How To Compress Images
You can compress images using software online tools. Our favourite tools are TinyPNG for PNGs and JPEG-Optimizer for JPEGs. These tools automatically adjust the compression level to reduce file size while maintaining acceptable image quality. If you’re using image editing software like Adobe Photoshop, it also offers options to adjust the quality level when saving images for the web, allowing you to find the right balance between quality and file size.
Do You Need To Compress Images?
Compression should be part of your workflow for all images on your website. Even resized images can often benefit from further compression. For example, a resized hero image might still be over 1MB, which can slow down your site. Compressing this image could reduce its size significantly, leading to better performance without noticeable quality loss to most users.
More Image Optimisation Tips
If your images are saved for web in the correct format, resized and compressed, but you still find your website isn’t loading as it should, there are further steps you can take to improve website speed:
Avoid Animated Images
Animated images, like GIFs, are a great way to make your website more visually engaging. However, this does come at a cost: they can also cause your page to load slower due to their large file sizes. Each frame of a GIF is essentially a separate image, which means that GIFs with high frame rates or large dimensions can be very heavy files.
If you want your website to load quickly, it’s best to use them sparingly. Instead, consider using alternatives such as CSS animations or HTML5 videos, which can provide similar visual effects but are often more efficient in terms of file size and loading speed. CSS animations, for example, are rendered by the browser and can produce smooth animations without the need for large image files. HTML5 videos offer greater compression options and can be a more effective way to include motion on your site, with the added benefit of control over autoplay, looping, and loading behaviour.
If you’re really set on using GIFS, optimise them as much as possible. Limit the number of frames, use a reduced colour palette, and consider compressing them with tools designed for animated GIFs.
Implement Lazy Loading
Lazy loading is a technique that loads images only when they’re about to enter the viewport, improving website loading times. It can reduce server load and improve user experience, making it particularly beneficial for sites with many images, like galleries or eCommerce sites. Implementing lazy loading is easy for WordPress users with plugins like WP Rocket or A3 Lazy Load. The downside of lazy loading, however, is that images might not load in time if a user scrolls quickly.
Use A Content Delivery Network (CDN)
A Content Delivery Network (CDN) boosts your website’s speed by leveraging servers across the globe. When a user loads your page, it delivers images from the server closest to them rather than just one hosting location, reducing load times. Setting up a CDN involves choosing a provider and configuring your site to load images from the CDN. While it can have a big impact, it can also be costly – it also might not be necessary if you don’t have users from across the world rather than one localised area.
Leverage Browser Caching
Browser caching speeds up your website for repeat visitors by storing parts of your site, like images, in their browser. When someone visits your site again, images load instantly because they’re pulled from the cache, not downloaded again, giving you leeway to use higher quality images. To enable this, set how long browsers should keep your images cached. This can significantly reduce load times and make your website faster for returning users. Implementing browser caching involves modifying your site’s HTTP headers, often through your web hosting settings or a plugin, making it an effective way to enhance your site’s performance with minimal effort.
Automatic Image Optimisation With WordPress Plugins
WordPress users can streamline image optimisation using plugins that automate the process. These plugins automatically compress images, resize them and sometimes even convert them to the most efficient formats upon upload. This ensures all images on your WordPress site are optimised for the web without manual intervention. Popular plugins like Smush, EWWW Image Optimizer, and ShortPixel can significantly reduce image file sizes, improve load times, and enhance your site’s SEO. They often offer bulk optimisation options for existing images, making it easy to optimise your entire media library. By installing an image optimisation plugin, you can maintain a fast, efficient website with minimal effort, ensuring a better experience for your visitors and higher search engine rankings.
Our Favourite Image Optimisation Tools
In most instances, we prefer JPEGs for photos on websites. For vector images (like logos), SVG is our preferred option. When it comes to displaying graphs or content that requires better legibility, PNG is our preferred format. JPEGs compress the best, but we have noticed that finer details can be lost.
EWWW Image Optimizer and Short Pixel are two of our favourite WordPress image compression plugins. We have found that their optimisation results are comparable to each other.
We tend to turn off the WebP auto-conversion setting. We found that support for this file type is less comprehensive than for JPEGs and PNGs, meaning the images might not load for some users – which is less than ideal. The goal of good web design should always be to make your website’s user experience consistent for as many people as possible.
