Image Optimisation: The Complete Guide

Images make up the largest share of bytes on most web pages. Unoptimised images are the single biggest drag on page speed, and fixing them is the highest-impact performance work you can do. A typical business website with unoptimised images can reduce its page weight by 50 to 80% simply by choosing the right format, applying proper compression and serving appropriately sized files to each device.

This guide covers every format, tool and technique you need. Whether you run a WordPress site, a custom-built application or an e-commerce store, the principles are the same. We will compare formats, walk through compression tools, explain responsive images and lazy loading, and show you how to measure your results.

Image formats compared

The format you choose directly affects file size, visual quality and browser compatibility. Here is how the main options compare for real-world use.

JPEG is the universal standard for photographs and complex images with many colours. It uses lossy compression, which means it reduces file size by discarding some image data. The amount of compression is controlled by a quality setting, typically ranging from 1 to 100. For web use, a quality setting of 70 to 85 produces a good balance between file size and visual quality.

PNG uses lossless compression, meaning it preserves every pixel of the original image. This makes it ideal for screenshots, logos and images with text or sharp edges. However, PNG files are typically 2 to 5 times larger than JPEG for photographic content, making it a poor choice for photographs.

WebP is Google modern image format that supports both lossy and lossless compression. Lossy WebP files are typically 25 to 35% smaller than equivalent JPEG files at the same quality level. Lossless WebP files are about 25% smaller than PNG. Browser support has reached approximately 96% globally, making WebP a safe choice for most websites.

AVIF is the newest format and offers the best compression of any widely supported format. AVIF files are typically 30 to 50% smaller than JPEG at equivalent quality. However, browser support is still growing at around 80%, so you must provide a JPEG or WebP fallback. AVIF also supports HDR and wide colour gamut, making it future-proof for high-end displays.

SVG is a vector format designed for graphics, icons and logos. Unlike raster formats, SVG files contain mathematical descriptions of shapes rather than pixel data, so they scale infinitely without losing quality. SVG files are also text-based, which makes them compressible and indexable by search engines. Use SVG for any graphic that is not a photograph.

For most business websites, the optimal setup is to serve WebP images with a JPEG fallback using the HTML picture element. If you want maximum compression and can manage the fallback, add AVIF as the first option with WebP and JPEG as fallbacks. Use SVG exclusively for icons and logos.

Compression tools and techniques

You do not need expensive software to compress images effectively. These tools produce excellent results at no or very low cost for most use cases.

Squoosh. A free browser-based tool from Google. Upload an image, adjust quality and compression settings, and see real-time before and after comparisons. It supports JPEG, PNG, WebP and AVIF and lets you fine-tune compression parameters for each format. The visual comparison slider is particularly useful for finding the quality level where file size drops significantly but quality remains acceptable.

ImageMagick. A command-line tool that batch-processes entire folders of images. A single command like mogrify -format webp -quality 80 *.jpg converts every JPEG in a directory to WebP at quality 80. Ideal for developers who need to automate image processing in deployment pipelines or content workflows.

ShortPixel and TinyPNG. API-based compression services that integrate with WordPress and other CMS platforms. They apply smart lossy compression that reduces file size by 60 to 80% with minimal visible quality loss. ShortPixel offers both lossy and glossless compression options and can automatically convert to WebP.

Figma and Sketch export. If your images originate from design tools, export them directly to WebP or optimised JPEG rather than exporting to PNG and then compressing. Design tools allow you to control compression settings during export, eliminating an entire step from your workflow.

The key principle is to compress aggressively but check the results visually. A quality setting of 80 for JPEG and WebP is a safe starting point. For hero images and banners where quality matters more, try 85 to 90. For thumbnails and background images where quality is less critical, 50 to 70 may be perfectly acceptable.

Responsive images with srcset

Serving the same 3000-pixel-wide image to a mobile phone wastes bandwidth and slows the page significantly. The HTML srcset and sizes attributes let you specify different image files for different viewport widths, and the browser automatically picks the most appropriate one based on the user device and screen resolution.

Generate three to five versions of each image at different widths. Common breakpoints are 480 pixels for mobile, 768 for tablets, 1024 for small desktops, 1920 for large screens and 2560 for retina displays. The actual widths depend on your site layout and how much space each image occupies in the design.

In the srcset attribute, list each image file with its width in pixels followed by a w descriptor. The sizes attribute tells the browser how much of the viewport the image will occupy at each breakpoint. For a full-width hero image, the sizes value might be 100vw. For a content image that occupies half the page on desktop, it might be something like (max-width: 768px) 100vw, 50vw.

The combination of srcset and sizes eliminates the most common performance problem on mobile: downloading desktop-sized images on phone connections. For a typical business site, implementing responsive images reduces mobile data usage by 40 to 60% for image-heavy pages.

Lazy loading for performance

Native lazy loading is built into modern browsers and requires no JavaScript library. Adding loading=lazy to your image tags defers loading until the image is about to enter the viewport. This reduces the initial page weight and speeds up the time to interactive, especially on pages with many images.

Always apply lazy loading to images below the fold. The first visible image, typically the hero or banner, should load normally with loading=eager or no loading attribute. Critical above-the-fold images should never be lazy-loaded because they are needed immediately for the initial render.

For images loaded via CSS backgrounds, lazy loading requires a different approach. You can either switch to inline images with loading=lazy or use the Intersection Observer API to load background images when they enter the viewport. Most modern JavaScript frameworks provide components that handle this automatically.

CDN and automated image optimisation

An image CDN takes optimisation further by automating resizing, format conversion and compression at the edge of the network. Upload a single high-resolution source image, and the CDN automatically generates the appropriate format, size and quality level for each visitor based on their device, browser and network conditions.

Popular options include Cloudflare Images, Imgix, Cloudinary and Bunny CDN with image optimisation. These services are most valuable for e-commerce sites with large product catalogues, news sites that publish images frequently, or any site where manual optimisation of every image is impractical.

Automated image optimisation typically costs between BD 3 and BD 20 per month depending on the number of source images and transformations performed. For a business that publishes new images regularly, the time saved and performance improvement usually justify the cost.

Measuring the improvement

Before you start optimising, measure your current page weight and LCP score using Lighthouse, PageSpeed Insights or WebPageTest. Note the total page weight in kilobytes and the number of image requests. After applying optimisation techniques, run the same tests again and compare the results.

A well-optimised image setup typically reduces page weight by 50 to 70% and improves LCP by 30 to 50%. The improvement in Time to Interactive and overall page load time is equally significant. Beyond synthetic tests, monitor real-user metrics through the Chrome User Experience Report to see how actual visitors experience your optimised pages.

Regular maintenance is important. Every time you add new images, apply the same optimisation process. Set up automated checks that alert you when page weight exceeds a threshold so you catch regressions before they affect your visitors.

Image optimisation is not a one-time task. Every time you add new images to your site, whether through a CMS, a blog post or a product upload, those images should go through the same optimisation process. Set up automated workflows that compress and convert images on upload. WordPress plugins like ShortPixel and Smush handle this automatically. For custom sites, integrate an image optimisation API into your content pipeline so every image is optimised before it reaches your visitors.

The financial impact of image optimisation is often underestimated. Faster loading pages mean higher conversion rates, lower bounce rates and improved search rankings. For an e-commerce store, a one-second improvement in page load time can increase conversion rates measurably. The time investment required to implement proper image optimisation is typically a few hours. The return on that investment in terms of improved business metrics continues indefinitely.

Mobile users in Bahrain and the Gulf benefit disproportionately from image optimisation. Mobile data plans in the region are affordable, but mobile connections remain less stable than wired broadband. A page that loads in one second on a 4G connection because images are optimised will keep visitors engaged. The same page with unoptimised images taking five seconds will lose the majority of mobile visitors before the page finishes loading.

Beyond the technical implementation, image optimisation has implications for your content workflow. If you publish new content regularly, whether blog posts, product listings or portfolio items, every new image should go through the same optimisation process. Set up automated workflows that compress and convert images on upload so that human error does not introduce unoptimised images into your content library.

The choice of image format also affects your content management. WebP and AVIF files cannot be opened in every image editor or viewed on every operating system. Keep your original high-resolution source files in a standard format like JPEG or PNG and generate optimised WebP or AVIF versions for web delivery. This ensures you always have editable source files while serving optimised files to your visitors.

For businesses using a CMS like WordPress or a website builder, image optimisation can be partially automated. Plugins automatically compress images on upload, convert to WebP and generate multiple sizes for responsive images. The setup takes minutes and runs automatically thereafter. For custom-built sites, the same functionality can be achieved through build pipeline integration or an image optimisation API.

If you are not sure whether your images are optimised, run a PageSpeed Insights test or WebPageTest. Both tools report the total image weight and identify opportunities for compression. Compare your page weight against industry benchmarks. A typical business homepage should aim for under 2 MB total page weight, with images accounting for no more than 60% of that total. If your images are significantly heavier, the techniques in this guide will bring them down dramatically.

One final technique worth mentioning is the use of content delivery networks that offer automatic image optimisation as a service. Instead of manually optimising every image, you upload full-resolution originals to an image CDN, and the CDN automatically generates optimised WebP, AVIF and responsive sizes on the fly. Services like Cloudinary, Imgix and Cloudflare Images handle the entire image pipeline. For teams that publish images frequently, the automation alone justifies the cost of the service.