Are there better image formats than JPG and PNG?

Technically there are better image formats than JPG and PNG. Google (yes them again) created the webP image format in 2010 and WebP images are typically 25% to 35% smaller in Kb. This is a significant reduction in size that will make your site quicker to download.

Other new image formats also exist, but as of Spring 2022, the support across browsers just isn't there at this point.

So what's the problem with webP images?

There is no problem with webP as a format. However, some browsers don't support the format. A current estimate of 21% of Apple users cannot view webP images.

WebP has only in the last few years, been adopted by the main browsers. As is increasingly the issue here, Apple only started to support webP images somehere in Safari in IOS 14 and macOS 14. Some of the "CAN I USE" type of sites, list Safari 15.4 as being the version of Safari that can support webP images. However, this also depends on the version of of macOS. E.g. Safari 15.4 on Catalina does NOT support webP images.

Chrome, Firefox and Edge have had good webP support for a long time.

So, not all users are using a browser that can take advantage of webP images. This means that if you simply swap a JPG or PNG image for a new format image, some users will not be able to see the images. They will see a blank where that webP image should appear.

So do NOT serve your image as webP only.

Whats the solution?

One solution is to do nothing and not worry about this.

The best solution is to firstly create 2 versions of all of your images. So create an image.webp in addition to your image.jpg or image.png. Then use a process to detect if the site visitors browser can display webP images, if so the browser should use the webP image, and if not, use the JPG or PNG image as a fallback image.

How do I do this?

  1. If using Stacks, you can use a stack such as Srcerer from ShakingTheHabitual.

  2. Another way is to setup a HTACCESS redirect that will detect whether the browser can display webP images, and then choose the correct format. This process depends on having both image versions together in the server folder, with the same name, i.e. image.jpg or image.png ans also image.webp. This method will work on all images including background BG images.

HTACCESS Redirect WebP images with JPG/PNG Fallback.

This HTACCESS redirect is well documented and can be found with a quick search. However, although this is a quick and straight forward thing to do, it involves editing your HTACCESS file with an FTP App. Only someone who is comfortable with doing that, should attempt this solution. You could break your web site if you don't understand what you are doing. This process works beautifully and can be added to existing sites.

This method works on conventional normal images as well as background BG images.

This is an Advanced technique and I have deliberately not documented the process here, as this could quickly develop into a barrage of questions. If you are stuck thinking you don't understand this, then you are probably not up to the task, but I would encourage anyone to investigate this process, if they are looking for a way to serve webP images.

Can I see this HTACCESS process in action?

You are already looking at it. All images on this site, are correctly served using this process.

WebP Image Tester

Check out our webP image test page.

Is this used in Webdeersign Projects?

Starting in Project 28, this will be used in all new Projects.