Modern Image Formats Without Breaking Anything

What the newer formats do

They store the same picture in a smaller file, by compressing more cleverly than the older formats manage.

The saving is real and substantial: commonly a quarter to a third smaller at a quality nobody can distinguish, and sometimes more.

On an image-heavy page that is the difference between a page that feels slow and one that does not.

It requires no change to the photographs themselves, which is why it is one of the cheapest performance improvements available.

Support is the only complication

• WebP: supported essentially everywhere now.
• AVIF: smaller again, and less widely supported.
• Older formats: supported by everything.
• The fallback: what makes either safe.

The first is the practical answer for most businesses today. WebP has been supported by every current browser for long enough that the compatibility question has largely resolved itself, while AVIF is still worth offering with a fallback behind it.

Offer, do not replace

The principle that makes this risk-free.

A page can list several versions of an image and let the browser take the first one it understands.

So a modern browser takes the small modern file and an older one takes the traditional format, from the same page, with no detection or scripting involved.

That means adopting a new format costs nothing in compatibility, which is the objection people usually raise.

Replacing your images outright is the version that carries risk, and there is no reason to do it that way.

Ask whoever maintains the site to serve them with a fallback rather than converting the library.

Most platforms will do it for you

Since this is now a solved problem rather than a project.

Many content systems will generate modern versions automatically on upload and serve them with the fallback in place.

Some hosts do it at their level, converting on delivery without touching your files at all.

And image delivery services do it as their main purpose, which is worth considering for a gallery-heavy site.

So the first step is finding out what is already available to you, since a plugin or a hosting setting is a considerably better answer than a manual conversion.

Ask your host specifically, since this is a feature they frequently have and rarely mention.

A worked example

A business with a photograph-heavy site was quoted for a project to convert their image library.

Their host offered automatic conversion and delivery as an included feature, switched off by default.

Enabling it converted images as they were requested, served the modern format to browsers that supported it, and left the originals untouched.

Their gallery page dropped by roughly a third in transferred weight.

The change was a checkbox and the quoted project was unnecessary.

They confirmed the fallback was working by loading the site in an older browser, which took two minutes.

Check the fallback actually works

Since this is the one thing that can go wrong.

A misconfigured setup can serve the modern format to a browser that cannot display it, which produces a broken image rather than a slow one.

Test on an older device if you have one, and check the images appear.

Also check anywhere images are used outside the site: an email, a listing, or a social preview, since some of those handle newer formats poorly.

Social previews in particular are worth checking, since a preview image in a format a platform does not read produces no image at all when somebody shares your page.

Keep the traditional format for anything used outside your own site.

Do not over-compress while converting

A practical caution, since conversion is a moment when quality settings get chosen.

The saving comes from the format, and pushing the quality down as well produces visible artefacts on photographs of your own work.

Convert at a quality that looks identical, take the format saving, and stop.

Check a photograph with fine detail or a gradient, since those show compression damage first.

For a business whose photographs are the argument, a slightly larger file that looks right is the correct trade.

Where the saving actually lands

Worth being realistic about, since the percentage is quoted more often than the effect.

A third off your images matters on a page that is mostly images and matters very little on a page that is mostly text.

So the gain concentrates on galleries, product listings, and service pages with photographs, which are frequently the slow pages anyway.

On a text-heavy site the same change is barely measurable.

Check what proportion of your heaviest page is images before deciding how much attention this deserves, since that ratio tells you the ceiling on what the change can achieve.

Watch what happens to the file names

A small operational point that catches people converting a library.

Changing an image from one format to another changes its address, so anything pointing at the old file stops working.

That includes links from other sites, images used in old emails, and anything embedded elsewhere, none of which you control.

Serving with a fallback avoids this entirely, since the original file stays where it was and the modern version is offered alongside it.

Where a conversion genuinely happens, redirect the old addresses rather than deleting them, on the same principle as any other page that moves.

The counter-case

This is a smaller win than sizing.

Serving an appropriately sized image in an old format beats serving an oversized one in a new format comfortably, so fix the dimensions first.

The formats also continue to change, and a business that converts everything manually will be doing it again.

And for a site with a dozen images the whole exercise saves very little.

Ask your host and your platform what they already offer, enable it with a fallback, and check an older browser.

What to do

1. Fix image dimensions first.
2. Ask your host what they offer.
3. Check your platform for the same.
4. Enable it with a fallback.
5. Do not convert the library manually.
6. Test an older browser.
7. Keep old formats for social previews.

Step two frequently ends the exercise, since this is a feature many hosts include, switch off by default, and never mention.

The quality side of this is covered in compressing images without making them ugly.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.