How to Optimise Images for Web Performance

How to Optimise Images for Web Performance

Images can significantly impact the performance of a website. With images making up over 60% of bytes downloaded on the average web page, optimising them is crucial for fast load times. This allows pages to load quicker, users to consume content faster, and results in a better overall experience.

In this comprehensive guide, we'll explore various ways to optimise images for the web and improve site speed.

Why Image Optimisation Matters

With the rise of mobile internet usage, users expect sites to load incredibly fast. 53% of users will abandon a mobile site that takes over 3 seconds to load. Optimising images allows you to:

• Reduce Page Weight: The smaller an image file size, the less data that needs to be downloaded by the user. This directly speeds up load times.
• Minimise Data Usage: For mobile users or those with capped internet plans, downloading large files eats into their allowance. Compressing images uses less of their bandwidth.
• Improve SEO: Page speed is a ranking factor for Google and other search engines. Optimised images improve performance and boost search rankings.
• Cut Hosting Costs: Reduced page sizes lower bandwidth usage, which saves money if you pay for traffic.
• Enhance UX: Faster load times keep visitors engaged. Every extra second risks them leaving your site out of frustration.

Simply put – making your images lean and fast improves user experience and site performance.

The Impact of Image Optimisation on Core Web Vitals

Image optimisation isn't just about raw speed. It's directly tied to Google's Core Web Vitals, the metrics used to measure a user's real-world experience on a page.

Failing to manage your images properly can damage your scores in two key areas:

• Largest Contentful Paint (LCP): This measures how long it takes for the largest element, often a hero image, to appear on the screen. Large, unoptimised images are a primary cause of poor LCP scores because they take far too long to download and render.
• Cumulative Layout Shift (CLS): This metric tracks the visual stability of your page. If you don't define the width and height for your images, the browser doesn't know how much space to save. When the image finally loads, it pushes other content down the page, creating a jarring layout shift and a poor CLS score.

Getting your images right is a non-negotiable part of passing the Core Web Vitals assessment and ensuring your site is seen as high-quality by search engines.

Getting Started with Image Optimisation

Optimising your web images involves both technical and design choices.

On the technical side, you need to understand:

• Image formats like JPEG, PNG, GIF
• Tools to compress and resize images
• Hosting optimised files correctly

For design, you should grasp principles like:

• Ensuring images are purposeful
• Balancing quality vs performance
• Displaying resized images cleanly.

We can trim down images substantially while retaining visual quality with the proper knowledge of formats, tools and design.

The process requires some manual effort but pays dividends in site speed. Let's explore the technical and design considerations when optimising images for the web.

Choosing the Right Image Format

Three main image file types are used online – JPG, PNG and GIF. The format you select impacts the image's quality, capabilities and file size.

When adding a new image, consider:

• Is a lossless or lossy format best?
• Does the image need transparency or animation?
• What content and colour palette is shown?

This determines the optimal choice of JPG, PNG or GIF.

JPG/JPEG

• Type: Lossy compressed bitmap image
• Transparency: No
• Animation: No

Use JPG for:

• Photographic images
• Complex colour scapes with many tones
• Largest file size reductions

JPEGs use lossy compression that permanently removes quality to shrink the file size. A high-quality photo saved as JPEG could be 200KB+ but can be optimised to 20-30KB with minimal visual quality loss.

JPEGs render colour gradients smoothly, which suits photos but results in larger file sizes than line art PNGs.

Quality Setting

JPEGs let you adjust quality from 0-100%, determining the compression level. Find the sweet spot between visual quality and file size for your images. Many images look great, even at 60-75% quality.

PNG

• Type: Lossless compressed bitmap image
• Transparency: Yes
• Animation: No

Use PNG for:

• Logos, icons and illustrations need transparency
• Images with text, sharp edges and flat colours
• Higher quality than GIF

PNGs retain full image quality on compression, unlike lossy JPEGs. However, they achieve smaller sizes than uncompressed formats like BMP.

PNGs handle transparency, which is vital for logos and icons. This makes them preferable over JPG for images requiring shaped backgrounds. The lossless compression ensures that quality remains maximised.

File sizes are significantly smaller than lossless GIFs while retaining more colours.

GIF

• Type: Lossless compressed bitmap image
• Transparency: Yes
• Animation: Yes

Use GIF for:

• Animated images and illustrations
• Simple images with blocks of flat colour
• Small file sizes suitable for old browsers

GIFs allow basic animation, handy for communicating processes and capturing attention. They are also compatible with older browsers, unlike advanced formats like JPEG 2000.

For still images, PNGs should take priority over GIFs due to supporting better transparency and more colours that avoid banding artefacts.

However, flat colour cartoons with defined edges compress very small as GIFs due to basic image data. Dithering creates the illusion of extra shades through dot patterns.

Modern Image Formats: WebP and AVIF

Beyond the traditional formats, next-generation image types offer superior compression and features. Using them can give you a significant performance edge.

WebP

Developed by Google, WebP has become a new standard for the web. It supports both lossy and lossless compression, meaning it can replace both JPEG and PNG files.

Its main advantage is creating files that are significantly smaller than their older counterparts at an equivalent level of visual quality. WebP also supports transparency and animation, making it incredibly versatile. Browser support is now universal across all modern platforms.

AVIF

The AV1 Image File Format, or AVIF, takes this a step further. It consistently produces even smaller files than WebP, offering the best compression available today.

AVIF also supports modern features like High Dynamic Range (HDR) and 12-bit colour depth, resulting in better image fidelity. While newer, its adoption by browsers is strong and growing, making it a forward-thinking choice for performance.

The Case for SVG (Scalable Vector Graphics)

Unlike the pixel-based formats we've discussed, SVGs are entirely different. They are vector images built with XML code.

• Type: XML-based vector image
• Transparency: Yes
• Animation: Yes (with CSS/JS)

Use SVG for:

• Logos, icons, and illustrations
• Graphics that need to scale perfectly
• Interactive elements

Because they are code, not pixels, SVGs are resolution-independent. They remain perfectly crisp on any screen, from a small mobile to a massive 4K display. Their file sizes are often tiny, and they can be styled and manipulated directly with CSS and JavaScript.

Choosing Wisely

Consider the strengths of JPEG, PNG and GIF to make informed choices.

Prioritise PNG for logos, illustrations and flat colour drawings requiring transparency or sharp edges. JPEG excels for photographic content without transparency. Use GIFs when basic animation is needed or supporting legacy browsers.

By selecting formats aligned to image content and intended use, you can obtain excellent visuals optimised for the web.

Tools to Compress and Shrink Images

Compression tools can further reduce individual file sizes once you have exported images using appropriate formats without compromising visual quality.

Let's explore the top tools for optimising JPG, PNG and GIF files.

JPEG Optimisation Tools

1. JPEGmini

A premium tool offering patented JPEG compression technology minimising artefacts during file size reductions. Easy to use and interfaces with popular CMS platforms. 60-day free trial available.

2. ShortPixel

Provides both lossy and lossless JPEG compression options. It integrates with WordPress and has a cloud-based API available. Offers free and paid plans.

3. TinyJPG

A completely free drag-and-drop web service that efficiently compresses JPEGs. No downloads are required, and fast to use for individual images.

4. RIOT

Desktop application utilising powerful optimisation algorithms and colour profiling to shrink JPEGs without quality loss. 14-day free trial, then a paid license is required.

PNG Optimisation Tools

1. TinyPNG

Free web service applying intelligent PNG compression powered by cloud servers for fast results. Easy to use with no software downloads necessary.

2. PNGoo

Simple Windows application supporting bulk PNG optimisation and colour profile conversions for added file size reductions.

3. FileOptimizer

Excellent paid tool offering lossless optimisations for PNG, GIF and JPEG files. Command line interface requires technical skill to operate.

4. ImageAlpha

Mac & Windows utility focused solely on optimising PNG files without affecting visual quality. Reduces colours and metadata bloat.

GIF Optimisation Tools

1. Gifsicle

Open-source command line tool for Linux and Mac providing lossless GIF compression. Requires developer skills to leverage its capabilities.

2. GifLossy

Applies lossless and lossy compression to GIFs by strategically reducing colours and dither quality. Windows and Mac versions are available.

3. ImageOptim

It is an easy-to-use paid Mac app featuring drag-and-drop support and integrations with common image editors. Optimises PNG, JPEG, GIF, and SVG formats.

4. Kraken.io

Web-based API offering paid plans for GIF, JPEG and PNG optimisation via lossy and lossless techniques. Easy to integrate.

The wealth of tools available means finding an optimiser matching budget, platform and technical skills is achievable. Many have free tiers supporting occasional image enhancements.

For developers, command line tools like FileOptimizer provide fine-grained control for systematically enhancing images during site builds. Designers often prefer simple GUI tools like RIOT or TinyPNG to refine exported assets in batches manually.

Optimising a few hero images can reduce total page weight by 10%+. Compressing all image assets using these tools is an intelligent performance win.

Automating the Optimisation Process

While manual tools are great, optimising every single image by hand isn't always practical, especially for large sites. Automating the process saves time and ensures nothing gets missed.

There are two primary ways to achieve this:

CMS Plugins

For platforms like WordPress, plugins are the easiest solution. Tools like ShortPixel, Imagify, or Smush can automatically compress images the moment you upload them to your media library.

This “set it and forget it” approach is perfect for most site owners. Many of these plugins can also go back and bulk-optimise all of your existing images, giving your site an immediate performance boost.

Developer Build Tools

For custom-built sites and web applications, optimisation can be baked directly into the development workflow. This gives you more control over the process.

Developers can use command-line tools and libraries like `imagemin` within their project's build process. This ensures that every image is automatically compressed and prepared for the web before the site is even deployed to a live server, enforcing performance standards from the ground up.

Optimise Images Without Slowing Sites

Serving compressed image files is only half the story when optimising performance. We must also display them correctly on web pages without impacting user experience.

Some considerations when embedding images:

• Lazy load of offscreen images
• Set width + height attributes
• Choose appropriate image formats
• Deliver next-gen formats responsively
• Host files on a CDN

Getting these right keeps pages fast while allowing images to enhance content.

Lazy Load Images

Lazy loading defers offscreen image loading until users scroll near them. This prevents downloading unnecessary assets.

• Images load just before they appear during scrolling.
• Avoids downloading imagery below the page fold unnecessarily.
• A lightweight blank placeholder image was used initially.

Simple to set up in CMSs or by JS plugins. Keeps initial payloads small and only loads images as needed.

Set Width + Height Attributes

Specifying width and height image attributes allows the browser to allocate space before loading is complete.

• It avoids page reflows as assets load.
• Enables placeholders to match image dimensions.
• Permits prioritising imagery effectively.

Get in the habit of adding pixel width and Height to <img> tags. It smoothes page rendering as assets load in.

Use Responsive Images

Responsive images load optimised image files depending on screen size breakpoints.

• srcset attribute defines multiple-resolution image candidates.
• The sizes attribute sets media conditions matching secret files.
• The browser selects the best srcset source for the user's display.
• Native lazy loading works automatically.

Less data is consumed on smaller screens. Helpful in serving WebP/JPEG XL images to capable browsers.

Host Images on CDN

Content Delivery Networks store cached image assets on distributed edge servers.

• Geo-targeted edge servers provide fast local downloads globally.
• Minify DNS lookups and round trips to origin servers.
• Handles traffic spikes without slowing site performance.
• Affordable bandwidth pricing, low latency and caching optimisations.

Easy wins through uploading compressed images to CDN services like Cloudflare Images or BunnyCDN. Dramatically faster than serving from origin.

Following these strategies creates a solid foundation for presenting lean, fast-loading imagery that captivates users.

Finding the Right Image Balance

Visually appealing imagery enhances user experience and storytelling. However, excessive use sabotages performance goals.

Aim for purposeful, quality images supporting user needs or journeys without overkill.

• Hero graphics engage visitors
• Instructions are more precise with visuals
• Breaks up walls of text

But be selective – avoid flabby decor images that waste bandwidth without meaningful communication.

Set objective guidelines on what constitutes purposeful imagery for your content. Enforce limits on numbers per page and aim for performance budgets.

Balance visual richness with the cost of sluggish downloads to craft excellent experiences.

Optimising Images During Design

Many image optimisation principles tie back to intelligent design choices when initially creating assets.

Consider web performance from the early stages of image production to maximise results later.

Design Relevant Image Sizes

Export image dimensions matching the intended display size. Avoid massive source files getting squashed with HTML/CSS.

• Target 1x – 2x display size
• Set exact pixels for CSS sizing
• Avoid scaling images in markup
• Use vector sources where possible

Supplying custom cropped sizes needing no scaling through HTML, JS, or CSS prevents unwanted inflated page weight.

Reduce Colour Palettes

Limiting the number of colours in indexed PNGs shrinks file sizes.

• Quantise to optimal web palette
• Adjust levels to necessities
• Avoid PNG8 for gradients (use JPG)
• Set Matte options to transparency

Even with photos, consider conveyed message vs colour accuracy. One hundred fifty shades often suffice vs 30,000 actual colours.

Establish Performance Budgets

Define image byte thresholds aligned to user priorities and goals. Enforce these early in the design phases.

• Hero image budget: <100kb
• Article thumbnail: <20kb
• Icon set: <60kb total
• Ten images per page max

Guide designers and developers to balance perceived quality with weight.

Building in optimised practices during content creation multiplies compression tool effectiveness later down the line.

Putting it All Together

We've covered much ground on optimising images for web performance. Let's summarise the complete process:

1. Analyse existing imagery

• Audit total page weight
• Identify large files lacking ROI
• Set performance budgets

2. Optimise image delivery

• Lazy load of offscreen images
• Add width + height attributes
• Host compressed files on CDN
• Use responsive images

3. Select appropriate formats

• JPEG for photos
• PNG for logos and illustrations
• GIF for animations
• Adapt to the user's browser

4. Compress images

• Shrink JPEG, PNG and GIF files with optimisation tools
• Find a balance between size and quality

5. Optimise during design

• Export exact display dimensions required
• Limit colour palettes through indexing
• Define image performance budgets

Combining these technical and design practices allows you to load images 50-80% smaller without perceivable quality loss.

The gains in site speed, engagement and conversions make the effort worthwhile.

Image Optimisation FAQs

Still have some questions about optimising images for web performance? Here are answers to frequent queries:

Conclusion

Optimising images substantially enhances web performance and user experience while being one of the easiest wins.

Following the technical and design practices outlined empowers you to load pages faster, reduce bandwidth costs and boost conversions through optimised imagery.

Understanding the balance between visual quality and download footprint is critical. You can effectively minimise image weights without sacrificing user experience with the proper formats, compression tools, and delivery methods.

Implement these essential image optimisation strategies and observe your site speed leap forward.