HTML JPEG XL support

0 min reading time

Browser Support

Unfortunately, JPEG XL has no browser support on stable releases of browser versions. Chromium-browsers like Chrome, Edge, and Opera, as well as the Firefox browser, support JXL as part of other experimental features behind a flag. Even if these browsers support JPEG XL on stable browser versions, other browsers like Safari and people with outdated browsers don't support JPEG XL. It takes several years to establish a new image format, and in the meantime, you should always look for serving content that all users can view.

The picture element

To support every user, you can use the native picture element in HTML. It allows for progressive support. You mention all the file formats you want to serve, and your visitor's browser will only load the first image it supports. This reduced load on your server and the bandwidth usage of your visitors. The advantages are:

  • Does not download more than one image at a time.
  • Native support for selecting the most appropriate image.
  • 96% browser support and automatic fallback.
  • Getting this implemented is easy and straightforward.

Implementation

Currently 96% of browsers support the picture element. Even if your grandma visits your website with her disgusting Internet Explorer 2 via her modem, her browser will simply revert to the default image format when you specify it. Have a look at the following example and copy it if you want to use it for your website:

1<picture>
2  <source srcSet="image.jxl" type="image/jxl" />
3  <source srcSet="image.avif" type="image/avif" />
4  <source srcSet="image.webp" type="image/webp" />
5  <img
6  width="1280" height="720" decoding="async" loading="lazy"
7  src="image.jpg" alt="hopefully an jxl image" />
8</picture>
PS: We added several attributes to the IMG tag to speed up the loading.

Make sure the first source tag is a JXL image for the browser to display the first media type it can handle. You can edit this code snippet to your needs, depending on if you want to serve AVIF or WebP.

Responsiveness

Creating a great visual experience for Retina and 4K displays and mobile devices, we want to make sure that images aren't pixelated or too large for the device, wasting bandwidth. We can do so by implementing the srcSet attribute.

1<picture>
2   <source
3      sizes="(max-width: 640px) 100vw, 640px"
4      srcSet="/image-1280.jxl 1280w, /image-640.jxl 640w, /image-320.jxl 320w"
5      type="image/jxl" />
6   <source
7      sizes="(max-width: 640px) 100vw, 640px"
8      srcSet="/image-1280.avif 1280w, /image-640.avif 640w, /image-320.avif 320w"
9      type="image/avif" />
10   <source
11      sizes="(max-width: 640px) 100vw, 640px"
12      srcSet="/image-1280.avif 1280w, /image-640.webp 640w, /image-320.webp 320w"
13      type="image/webp" />
14   <source
15      sizes="(max-width: 640px) 100vw, 640px"
16      srcSet="/image-1280.avif 1280w, /image-640.jpg 640w, /image-320.jpg 320w"
17      type="image/jpg" />
18   <img
19      width="1280" height="720" decoding="async" loading="lazy"
20      src="/image.jpg" alt="an avif image" />
21</picture>

Components

Creating JPEG XL images for any viewport of any format can be exhausting, so if you're using a framework, make sure to use a component to save yourself some time. For example, we use the following image component in NextJS:

1export default function Image(props: { alt: string; url: string }) {
2  return (
3    <picture>
4      <source
5        type="image/jxl"
6        srcSet={`/img/${props.url}-1536.jxl 1536w, /img/${props.url}-768.jxl 768w, /img/${props.url}-576.jxl 576w, /img/${props.url}-384.jxl 384w`}
7        sizes="(max-width: 768px) 100vw, 768px"
8      />
9      <source
10        type="image/avif"
11        srcSet={`/img/${props.url}-1536.avif 1536w, /img/${props.url}-768.avif 768w, /img/${props.url}-576.avif 576w, /img/${props.url}-384.avif 384w`}
12        sizes="(max-width: 768px) 100vw, 768px"
13      />
14      <source
15        type="image/webp"
16        srcSet={`/img/${props.url}-1536.webp 1536w, /img/${props.url}-768.webp 768w, /img/${props.url}-576.webp 576w, /img/${props.url}-384.webp 384w`}
17        sizes="(max-width: 768px) 100vw, 768px"
18      />
19      <source
20        type="image/jpeg"
21        srcSet={`/img/${props.url}-1536.jpg 1536w, /img/${props.url}-768.jpg 768w, /img/${props.url}-576.jpg 576w, /img/${props.url}-384.jpg 384w`}
22        sizes="(max-width: 768px) 100vw, 768px"
23      />
24      <img
25        loading="lazy"
26        decoding="async"
27        width={2880}
28        height={1620}
29        src={`/img/${props.url}-1536.jpg`}
30        alt={props.alt}
31        title={props.alt}
32      />
33    </picture>
34  );
35}

This allows us to easily add an image like this:

1<Image src="frog" alt="frog looking nicely" />
frog looking nicely

Please remember to provide fallback images for older browser versions or experimental use. Otherwise, your user experience may suffer as images are not rendered.

Profit from a faster website, higher ranking and better conversions.
Convert your images to JPEG XL for free.
We use Google cookies for our services.
OK