Why Image Optimisation Matters for Website Performance
Slow-loading images are the most common cause of poor web performance. A website that looks polished can still frustrate visitors if images take several seconds to appear. Beyond user experience, image file sizes affect search engine rankings, conversion rates, and bandwidth costs. For UK businesses running websites on shared hosting or cloud servers, unoptimised images can strain server resources and increase page load times noticeably.
Optimising images involves three main decisions: choosing the right format, keeping file sizes as small as possible while maintaining acceptable quality, and delivering the correct image size to each visitor's device. Getting these right means faster pages, lower bounce rates, and better results from search and email marketing efforts.
Understanding Image Formats for the Web
Different image formats serve different purposes. Using the wrong format is one of the easiest mistakes to make and one of the easiest to fix.
JPEG Files
JPEG images use lossy compression, which reduces file size by discarding some image data. They work well for photographs and complex images with many colours. A JPEG saved at 80% quality usually offers a good balance between visual appearance and file size. Saving at 100% quality produces larger files with little noticeable improvement on screens.
JPEG files do not support transparency. If you need transparent backgrounds, JPEG is not the right choice.
PNG Files
PNG files support transparency and use lossless compression, meaning no image data is discarded. They are better suited for graphics, logos, screenshots, and images that need sharp edges or text overlay. PNG files are usually larger than equivalent JPEGs, so avoid using PNG for photographs unless transparency is required.
WebP Format
WebP images typically deliver 25 to 35 percent smaller file sizes compared to JPEG and PNG while maintaining equivalent quality. They support both lossy and lossless compression and include transparency support. Most modern browsers support WebP, making it a practical choice for most websites today.
When converting existing images, WebP is usually the first format to consider. Tools like cwebp from the WebP project or image editing software can convert JPEG and PNG files to WebP with straightforward commands.
cwebp -q 80 input.jpg -o output.webpAVIF Format
AVIF offers even smaller file sizes than WebP and is gaining browser support. It handles photographs and graphics with good results. However, AVIF encoding is slower, which matters when processing many images at once. For websites that serve a high volume of image-heavy content, AVIF can be worth testing alongside WebP.
SVG Graphics
Scalable Vector Graphics use XML code to define shapes and lines. SVG files are typically very small for simple graphics like icons, logos, and illustrations. They scale perfectly to any screen size without losing quality, which makes them ideal for responsive websites. If a graphic can be expressed as an SVG, it is usually the best choice.
Target File Sizes and Quality Settings
Setting clear targets helps maintain consistent performance across a website. These are general guidelines that work for most business websites.
- Hero images and banners: Keep files between 100 KB and 250 KB. For large hero sections, aim for the smaller end of this range.
- Product and portfolio images: Aim for 50 KB to 150 KB depending on the level of detail shown.
- Thumbnails: These should rarely exceed 30 KB.
- Background textures: Usually achievable under 100 KB, sometimes much smaller.
These targets assume WebP format. JPEG files at similar quality will typically be larger. If an image exceeds these ranges, compression or dimension reduction usually helps.
Responsive Images and the Srcset Attribute
Screens come in many sizes and resolutions. A visitor on a mobile phone does not need the same image dimensions as someone viewing the same page on a 27-inch monitor. Delivering the same large image to all devices wastes bandwidth and slows load times unnecessarily.
The srcset attribute allows browsers to choose the most appropriate image version based on the visitor's screen size and pixel density.
<img src="image-800.webp"
srcset="image-400.webp 400w,
image-800.webp 800w,
image-1200.webp 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
33vw"
alt="Description of image"
width="800"
height="600">This example tells the browser about three image versions at 400, 800, and 1200 pixels wide. The sizes attribute tells the browser how much of the viewport the image will occupy at different screen widths. The browser then downloads only the image it needs.
Generating multiple image sizes requires either a build process, a CMS plugin, or a server-side script. Many content management systems handle this automatically when configured correctly.
Preventing Layout Shift with Explicit Dimensions
Cumulative Layout Shift (CLS) measures how much a page moves unexpectedly as it loads. Images without defined dimensions are a common cause of poor CLS scores. When a browser loads a page and encounters an image without width and height attributes, it cannot reserve space for that image. Content below the image then shifts once the image loads.
Setting explicit width and height attributes on image tags reserves the correct amount of space before the image downloads. This keeps the page stable and improves both user experience and Core Web Vitals scores.
<img src="photo.webp" alt="Team meeting in progress" width="1200" height="800">The attributes specify the natural size of the image, not necessarily the displayed size. CSS can still resize the image for layout purposes while the browser reserves the correct space based on the HTML attributes.
Lazy Loading Images
Lazy loading defers the loading of images until they are about to enter the visitor's viewport. Images below the fold do not need to load immediately, which reduces initial page load time and saves bandwidth for visitors who do not scroll far.
The loading attribute provides native lazy loading support in modern browsers.
<img src="photo.webp" alt="Portfolio project screenshot" loading="lazy" width="800" height="600">Images that appear above the fold, such as hero images or featured graphics, should not use lazy loading. Deferring these critical images can make the page feel slower to visitors.
Image Compression Tools and Workflows
Several tools help compress images without significant quality loss. Choosing a consistent workflow makes it easier to maintain optimised images across a website.
- Squoosh: A browser-based tool from Google that supports WebP, AVIF, and other formats. Good for one-off conversions and comparisons.
- ImageMagick: A command-line tool available on most Linux servers. Handles batch processing well and supports a wide range of formats.
- Sharp: A Node.js library suited for processing images in build scripts or server environments. Works well for automated workflows.
- CMS plugins: WordPress, Shopify, and other platforms offer plugins that compress images on upload. Check that a plugin supports WebP output if that is your target format.
For websites that publish content regularly, automating image processing saves time and keeps performance consistent. A simple script can resize, compress, and convert images as part of a publishing workflow.
# Example using ImageMagick to resize and convert to WebP
magick convert input.jpg -resize 1200x800 -quality 80 output.webpRunning this command in a folder containing source images converts them to WebP format at reduced dimensions and 80 percent quality. Adjust dimensions and quality based on your specific requirements.
Content Delivery Networks and Image Caching
A CDN stores copies of website assets, including images, on servers distributed across multiple locations. When a visitor requests an image, the CDN serves it from the nearest server rather than the origin server. This reduces latency and improves load times, particularly for visitors outside the primary geographic region.
Many CDNs also offer on-the-fly image optimisation. They can resize, compress, and convert images based on the visitor's device and browser without requiring changes to the source files. This feature can simplify image management for websites that serve diverse audiences.
Common Image Optimisation Mistakes
Avoiding these mistakes keeps image performance under control.
- Uploading images at full camera resolution: A phone camera might produce a 4000-pixel-wide image. Serving that directly to a website visitor is unnecessary and slow. Resize images to the maximum display width before uploading.
- Using PNG for photographs: PNG files are much larger than JPEG or WebP for photographic content. Reserve PNG for graphics that need transparency or sharp edges.
- Forgetting to compress: Even images that seem small may compress further. Running images through a compression tool before publishing often reveals unnecessary kilobytes.
- Not using WebP: If a website still serves only JPEG and PNG files, switching to WebP can noticeably improve load times without reducing quality.
- Missing alt text: Optimised images still need descriptive alt attributes for accessibility and search engines. Write brief, accurate descriptions that convey the image purpose.
When to Review Image Optimisation on Your Website
Regular checks help maintain performance over time. Review image settings when launching new pages, adding photography, or updating site design. Pages with high traffic or high bounce rates often benefit from a closer look at image loading performance.
Tools like Google PageSpeed Insights and Lighthouse highlight images that contribute to slow load times. These reports identify specific images that could be compressed, resized, or converted to better formats.
If your website uses a CMS and you are unsure whether images are being processed correctly, testing a page in an incognito browser with throttled network speed can reveal problems that are not obvious on a fast connection.
Related practical reading
These related guides can help you connect this topic with the wider website, server, security, and support decisions around it.
- SSH Config Tips That Save Hours of Time - useful background for related technology decisions
- How to Build a PHP Webhook Receiver: Complete Implementation Guide - useful background for related technology decisions
Keeping Image Performance Consistent
Image optimisation is not a one-time task. New content, updated photography, and design changes can introduce unoptimised images over time. Building simple checks into a publishing workflow helps catch problems before they reach the live website.
If your website needs a full review of image performance or you want help setting up an automated image processing workflow, prepare details of your current setup, the platform you use, and the types of images you publish most. This gives a clear picture of what needs attention first.