loading...
Cover image for Faster loading webpages with webP images

Faster loading webpages with webP images

temmietope profile image Temitope Ayodele Updated on ・2 min read

Have you ever wondered why your website takes forever to load? It is probably because you are using too large images. The common image types are PNG, JPG, SVG, and GIF. It is time to embrace the modern image formats! Examples are:
JPEG 2000, JPEG XR and WebP. This article will focus on webP image formats.

WHAT IS WEBP?

WebP is a powerful image compression technology developed by Google in 2010. It focuses on using advanced optimization techniques to reduce file size and it supports transparency and even animation. WebP formats can help compress your images to become up to two-times smaller than JPG images, and this definitely makes the images load faster and hence leading to better website performance. Take a look at this image

png image
This png image has a size of 482.1KB,
The jpeg format has a size of 55.4KB
When converted to webP, the size became 43KB and the quality was still maintained

HOW TO USE WEBP

Firstly, you have to convert your images to webP formats.
Any common file format can be converted to WebP and still maintain their original quality (lossless compression). There are several online image formatters available all over the internet (such as this and this ).
However, as awesome as this is, webP is not supported on all browsers. Checkout the support for webP here.
This is not a big issue as we can still use this format without breaking our images on unsupported browsers by using fallbacks!

Using webP with Fallbacks

HTML has two image media element (img and picture)
With the picture element you can to load zero to many source elements and one img element. How does this work? The browser will consider each of the image URL in the elements and pick the best match among them. If neither of them is supported by the browser, or if the browser does not even support the element at all, it then selects the image in the tag.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg">
</picture>
Enter fullscreen mode Exit fullscreen mode

If the browser does not support webP image formats, the JPG image is loaded.

To avoid the clumsiness, (as this seems like too many lines of code in my opinion, lol) you can create a component for this. Using ReactJS,

const ImageWithFallback = ({
  src,
  fallback,
  type = 'image/webp',
  ...delegated
}) => {
  return (
    <picture>
      <source srcSet={src} type={type} />
      <img src={fallback} {...delegated} />
    </picture>
  );
};
Enter fullscreen mode Exit fullscreen mode

So, whenever you want to add an image in your code, you can easily import the ImageWithFallback component and use as an image tag. Keep your code tidy :)

<ImageWithFallback
  src="/images/my-image.webp"
  fallback="/images/my-image.png"
  alt="My beautiful portrait"
/>
Enter fullscreen mode Exit fullscreen mode

In conclusion, your website speed is a very important factor, and using webP image formats can help you achieve faster loading images with equal good qualities.

Discussion

pic
Editor guide
Collapse
nlxdodge profile image
NLxDoDge

"However, as awesome as this is, webP is not supported on all browsers. Firefox for instance, is still working on adding it, but Chrome and Opera fully supports webP images." - Temitope Ayodele

I want to clarify that .webp is supported in firefox, as I am using it right now. And looking at caniuse.com/?search=webp you can see that it has support. Only Edge and some older Apple OS's haven got support.

Collapse
temmietope profile image
Temitope Ayodele Author

Thanks for the addition. Older versions of Firefox browsers do not though.

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Older versions of any browser don't support it, so...

Thread Thread
temmietope profile image
Temitope Ayodele Author

Yh true, will edit. Thanks

Collapse
phlash909 profile image
Phil Ashby

Good practical advice - thanks :)

I found this report to be informative on current website stats (for those who aren't sure if image loading or javascript are the worst offenders!):

httparchive.org/reports/page-weight

Collapse
kiransiluveru profile image
kirankumar

This is absolutely good!!!
One small thing here is
For converting a few images it's okay for those who want to convert the entire repository images or some N no of images they can use this package.

npmjs.com/package/webp-bulk

Thanks

Collapse
temmietope profile image
Temitope Ayodele Author

Nice input! Thanks

Collapse
henrihelvetica profile image
Henri Helvetica

Thanks for the article. I might not immediately file JPG2000 or JPEG XR as modern formats - as the JPG2000 is just about 20yo, and it considered for replacement as we speak w/ HTJ2K or what is called High Throughput JPEG 2000. Not even sure what is happening w/ the XR. But the webp has finally achieved full support this year in 2020. If you do want to cover modern formats, I would certainly suggest looking into adding AVIF to your list. This is pretty much the buzz worthy format right now (caniuse.com/avif) and is supported by Chrome, Opera + behind a 🚩 in Firefox. There's a great tool I would also suggest playing with called Sqoosh! App (squoosh.app). Created by a team of Google engineers. Lastly, if much of this interests you, just released some videos specifically on this topic, you may enjoy. bit.ly/image_ready_videos

Collapse
wrldwzrd89 profile image
Eric Ahnell

The component idea is a great one, and has a direct equivalent in ASPNET Core with tag helpers / Razor components. You could even combine it with the source set concept to deliver images at various sizes as well as formats, so browsers not WebP savvy still display the content. Thanks for sharing!

Collapse
martinburr profile image
Martin Burr

thank you for this article! i will include this in my future work 👍🏻

Collapse
vishnuharidas profile image
Vishnu Haridas

Extra care when using WebP on Apple devices. On a recent project, Safari on iOS didn't show WebP files, so we had to convert them into JPEG to be used on Safari on iOS.

Collapse
henrihelvetica profile image
Henri Helvetica

webp was provided support in*Safari w/ Big Sur or iOS14. So, it would be wise to still use another fall back (which ever you need) for the next few.

Collapse
iamwebwiz profile image
Ezekiel Oladejo

Nice. I especially love the idea of the component. Thanks for this! 👍

Collapse
feralamillo profile image
Feralamillo

Great article! Very practical and useful

Collapse
programmerbyda1 profile image
ProgrammerByDay

Quite thorough and practical. Cheers.