How do you implement WebP or JP2 Images into your site?

Good evening everyone!

I am trying to optimize this html/css theme that I will sell in the future. I want it to have very high scores for the google lighthouse test. However, it suggests to improve my performance, I should use next-gen formats like WebP or JP2.

Does anyone know how to work this into a static HTML page?

Thanks so much! 😄

Brayden

on May 6, 2020

Say something nice to BraydenTW…

Post Comment

1
You use the <picture> element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
```
<picture>
  <source type="image/webp" srcset="some_image.webp">
  <source type="image/jp2" srcset="some_image.jp2">
  <img src="some_image.jpg">
</picture>
```
The browser will look at the sources and if it supports one of them, it will render that version of the image. If it doesn't support any of the sources, it will render the fallback <img> tag.

So, just make sure you have the relevant versions of the image available to serve.
xwle

·
6 years ago
·
Reply