A way to leverage new image formats

July 27, 2020
2 min. read

After researching image sizes ([Revisiting images formats for the web](https://publishing-project.rivendellweb.net/revisiting-images-formats-for-the-web/) and [Image formats for the web: HEIC and AVIF](https://publishing-project.rivendellweb.net/image-formats-for-the-web-heic-and-avif/)) and how to [add new mime types to WordPress](https://publishing-project.rivendellweb.net/supporting-aadditional-content-types-in-wordpress/) there is one final question to ask. How do we leverage responsive images and new image formats? ## Background We have four image formats to experiment with: | Format | Extension | Notes | | --- | --- | --- | | JPEG | jpg | Default where no other formats are supported

**We still need the format because it is upported in all browsers** | | WebP | webp | Smaller file sizes than JPG.

Supported in all modern browsers. ([caniuse entry](https://caniuse.com/#feat=webp)) | | HEIF | heif | **Part of HEVC MPEG family of specifications**.

Supported in Safari (macOS and iOS) | | AVIF | avif | **Part of AV1 specification**.

Supported natively in Firefox (behind a flag) and in Chrome 85 and later ([chromestatus entry](https://chromestatus.com/feature/4905307790639104)) at the time the post was originally written.

Now supported across all major browsers ([caniuse](https://caniuse.com/avif)) | Responsive images provide a client-side solution for delivering alternate image data based on device capabilities to prevent wasted bandwidth and optimize display for both screen and print. (Description is taken from the [Responsive Images Community Group](https://responsiveimages.org/) website). So the question is how we combine responsive images with all the formats we have available? We will use the `picture` element. In its most basic form, it includes one or more `source` attributes and an `img` that will work as a default when none of the image formats are supported. In the example below, we use two `source` child elements. The first one uses a media query to specify the argument that has to match and a `srcset` to describe the images that we use based on screen resolution. ```html

``` So how do we combine the four formats that we want to use in a single picture element? We take each format and use it in a source element and use it with the corresponding `type` attribute to indicate the mime type for the content of the source. ```html

``` This will work fine but in Retina displays, the image will look awful because there are not enough pixels in the image to display it at the higher resolution. Instead of having a single `src` attribute we add a `srcset` and add the images we need to accommodate our resolution. ```html ``` This is the basic code and the minimal number of images we need. We can use these as the starting point for other responsive images use cases as described in many articles and posts. My reference guide is [Responsive Images Done Right: A Guide To