Semrush Hero Banner

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.

Getting Started with Image Optimisation

How To Optimise Images

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

Image Formats Secondary Graphic

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?
๐Ÿ‘‰ Further Reading:  Modern SEO and Google: What Matters Most?

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.

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

Compress Images In Wordpress

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.

๐Ÿ‘‰ Further Reading:  How to Reduce Images and Videos File Sizes for the Web

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.

Optimise Images Without Slowing Sites

What Is Lazy Loading Images

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.

๐Ÿ‘‰ Further Reading:  How to Create a Social Media Marketing Campaign

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

What Is Image Optimisation

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.

๐Ÿ‘‰ Further Reading:  Benefits of 2D & 3D Animated Videos in Advertising

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:

What image format results in the smallest file size?

For minimal file size given the same image, GIF edges out over PNG, followed by older JPEG versions. However, JPEG 2000 and newer JPEG XL can compress further in next-generation browsers.

Should I convert PNGs to JPEGs to shrink filesize?

If transparency is not required, JPEGs enable much smaller photographic images but sacrifice transparency, unlike PNGs. Evaluate image content before changing formats.

Does image quality impact site speed?

Yes. Larger, higher-quality image files require more data to be downloaded by the user, increasing load times. Finding the optimal balance suits most use cases well.

How can I make my images load faster?

Using next-generation formats, lazy loading, hosting on a CDN, adding width + height attributes, and employing responsive images improves image loading speed dramatically.

What's the best way to reduce image size without losing quality?

Use premium lossless image optimisers like JPEGmini, which shrink files through optimised recompression rather than discard quality like lossy tools. This ensures minimal artefacts or visible changes for maximal file size savings.

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.

Photo of author

Stuart Crawford

Stuart Crawford is an award-winning creative director and brand strategist with over 15 years of experience building memorable and influential brands. As Creative Director at Inkbot Design, a leading branding agency, Stuart oversees all creative projects and ensures each client receives a customised brand strategy and visual identity.

Need help Building your Brand?

Letโ€™s talk about your logo, branding or web development project today! Get in touch for a free quote.

Leave a Comment

Trusted by Businesses Worldwide to Create Impactful and Memorable Brands

At Inkbot Design, we understand the importance of brand identity in today's competitive marketplace. With our team of experienced designers and marketing professionals, we are dedicated to creating custom solutions that elevate your brand and leave a lasting impression on your target audience.