\n

Website Advice

Why does image format matter on a website?

Image format affects more than a filename. It influences file size, visual quality, transparency, bandwidth and how efficiently a browser can deliver the imagery that shapes a website.

Modern websites depend heavily on imagery. A page can be beautifully designed, carefully written and technically sound, yet still feel sluggish if every visitor is being asked to download unnecessarily large image files.

The format of an image is one part of image optimisation. It can affect file size, loading performance, bandwidth use, visual quality, transparency and the way a browser receives the image. It is not the whole story, but it matters.

WebP is a good practical example because it can often keep photographic quality high while reducing file size compared with older formats. That does not make JPEG, PNG, SVG or AVIF wrong. Good image optimisation is about choosing the right format and using it properly.

What is WebP?

WebP is a modern image format designed for efficient delivery on the web. In plain English, it gives developers another way to store photographs and graphics at useful visual quality without necessarily carrying as much file weight as a traditional JPEG or PNG.

It supports both lossy and lossless compression. Lossy compression reduces file size by discarding some image information; lossless compression preserves the image data without that kind of loss. WebP can also support transparency and animation, which makes it flexible enough for several different types of website imagery.

That flexibility is useful, but the important customer-facing point is simpler: depending on the image, WebP can often provide a strong balance between quality and file size.

Why can image file size matter so much?

Images are frequently among the largest resources a browser has to download. A single service page might contain a large hero photograph, several service images, project photographs, a gallery and team imagery. None of those files is necessarily a problem on its own, but unnecessary weight adds up quickly.

Imagine five photographs that are each around 1.5 MB. Before the browser has dealt with fonts, styles, scripts or anything else, the visitor may already be downloading roughly 7.5 MB of imagery. On a fast office connection that may be easy to overlook. On mobile data or a weaker connection, the experience can feel very different.

Heavy images can make a page feel slower, consume more mobile data and delay the point at which the page looks visually complete. This is why image optimisation is not a cosmetic extra. It is part of making a website feel polished.

Why we often prefer WebP to JPEG or PNG

For many website photographs, WebP can often achieve similar perceived quality at a smaller file size than a comparable JPEG or PNG. The exact saving depends on the source image, the encoder and the chosen quality level, so there is no honest rule that says every WebP file will always be smaller.

Where it works well, that efficiency is particularly useful for hero photography, service images, project photographs and other large visual sections. These are exactly the images a trades website often relies on to show workmanship and make the design feel premium.

At Toolbelt Websites, we use WebP imagery as standard across the trades websites we build. It is one of those technical details most customers will never notice directly, but they may notice the result: a website that feels quick, polished and responsive.

WebP is not automatically better just because the file ends in .webp

This is where image optimisation is often oversimplified. Converting a file from .jpg to .webp does not magically make it well optimised.

A photograph that is 4,000 pixels wide, displayed in a 700-pixel content card, barely compressed and several megabytes in size is still poorly optimised even if the filename ends in .webp.

Good optimisation also means considering:

  • the dimensions at which the image is actually displayed;
  • the source resolution;
  • compression quality;
  • responsive delivery for different screen sizes;
  • whether transparency is genuinely required; and
  • whether the image needs to load immediately or can wait until the visitor approaches it.

Format is one decision inside a wider performance decision.

When should JPEG still be used?

JPEG is not obsolete. It remains a very capable format for photographs and has exceptionally broad compatibility.

An existing JPEG may already be sensibly sized and well compressed. A particular workflow may require JPEG. There may also be situations where converting an already efficient image produces little meaningful benefit.

The sensible question is not “Is JPEG old?” It is “Does changing this image produce a worthwhile improvement without compromising the result?” Format choice should solve a real problem rather than follow a trend.

When is PNG useful?

PNG is useful where lossless raster quality is important and where transparency is needed. It can also make sense for certain screenshots and graphics where crisp edges or text matter more than photographic compression.

Where PNG becomes a common problem is ordinary photography. A full-width photograph saved unnecessarily as PNG can be dramatically heavier than it needs to be. That does not make PNG a bad format; it means the format is being used for the wrong type of asset.

What about SVG?

SVG is a vector format, so it is often a much better fit for logos, icons, simple illustrations and other scalable graphical elements. Instead of storing a fixed grid of photographic pixels, a vector graphic describes shapes and paths that can be drawn cleanly at different sizes.

That means a suitable SVG can stay sharp on a small mobile screen and a high-resolution desktop display without needing several raster versions. For the right artwork, the file can also be very small.

SVG is not a replacement for a photograph. It is another example of why the correct format depends on what the image actually is.

What about AVIF?

AVIF is another modern image format capable of excellent compression and high visual quality. It is a serious option for web imagery and is supported by current major browsers.

That does not mean AVIF has “replaced” WebP. Different projects may choose different formats depending on browser requirements, quality targets, image type and production workflow. WebP remains a practical standard for Toolbelt Websites trades sites because it gives us a strong balance of quality, file size and modern browser support.

Image dimensions matter just as much as the format

One of the most common image mistakes on websites is serving far more pixels than the design can display.

A photograph that is 5,000 pixels wide does not need to be delivered at 5,000 pixels simply because that is the size it came from a camera or stock library. If the image appears inside a content card that is around 700 pixels wide, sending the full source image can waste bandwidth with detail the visitor's screen never uses.

Responsive image delivery can take this further by allowing the browser to choose an appropriately sized version for the visitor's screen. The principle matters more than the implementation detail: send enough image data to look excellent, but do not make every device download the largest source file by default.

Compression is a balance

The goal of image optimisation is not to make the file as small as technically possible. Push compression too far and you can introduce visible artefacts, muddy detail, rough gradients and a general loss of sharpness.

A beautifully photographed bathroom does not help a premium website if aggressive compression makes the tiles look smeared. Equally, preserving every last pixel of a huge source file is wasteful when the difference cannot be seen at the size used on the page.

The useful target is to make the image as light as reasonably possible while retaining the quality appropriate for the design. That is a judgement call, not a single universal percentage.

What does this mean for a trades website?

Trades websites are often visually rich by necessity. Bathrooms, kitchens, heating installations, landscaping, roofing, electrical work, renovations and completed projects are all easier to understand when customers can see the result.

A project gallery might contain a dozen strong photographs. A plumbing service page might use a large finished-bathroom hero image plus several detail shots. Those images can be commercially valuable because they help demonstrate real work, but they can also become some of the heaviest files on the page.

The answer is not to remove useful photography. It is to prepare and deliver it properly. If you are deciding which photographs are worth using in the first place, see Should I use stock photographs or my own images on my website?

Why Toolbelt Websites uses WebP as standard

Toolbelt Websites uses WebP imagery as standard across the trades websites we build because it usually gives us an excellent balance between image quality, file size and modern browser support.

But we do not simply convert every image to WebP and consider the job finished. The image still needs to be appropriately sized, compressed carefully and used in the right place.

That distinction matters. A well-optimised image should support the design without drawing attention to the optimisation work itself.

“Good website optimisation is often invisible. You notice the speed, not the work behind it.”

— Rikki Webster, Toolbelt Websites

Does using WebP improve SEO?

WebP should not be treated as an SEO trick. Google Search supports several image formats, including JPEG, PNG, WebP, SVG and AVIF. Its current guidance focuses on useful images, good quality, efficient loading and the wider page experience rather than presenting WebP itself as a ranking shortcut.

Image optimisation can contribute to better page performance, and faster, more efficient pages are generally better for visitors. Google also recommends good Core Web Vitals and an overall strong page experience. But a page does not earn a guaranteed ranking advantage simply because an image filename ends in .webp.

If SEO is the reason you are considering image optimisation, the better way to think about it is this: optimise images because it improves the website for people. Any search benefit should be viewed in that wider context. For the broader picture, see What is SEO?

Useful technical references

This article is deliberately practical rather than a file-format specification. If you want to go deeper, these are useful first-party references:

Last updated: 9 September 2026