Replace Responsive Image

In some websites, images are displayed thanks to HTML code like this:

<img src="1600x800.jpg" alt="Dream Team">

And in some websites, developers use the "srcset" attribute, the <picture> element or a combination of both.

This helps browsers to load the most adequate image depending on the browser version ("src" attribute acts as a fallback) and/or on the viewport width (mobile, tablet, laptop, desktop, 4k television screen...) and, therefore, on the bandwidth.

Here is the list of the 3 different cases covered:

<img> + srcset attribute (sizes)

<img srcset="400x200.jpg 599w, 800x400.jpg 799w, 1600x800.jpg 800w" sizes="(max-width:599px) 200px, (max-width: 799px) 400px, 800px" src="1600x800.jpg" alt="Dream Team">

<img> + srcset attribute (x-descriptors)

<img srcset="400x200.jpg 1x, 800x400.jpg 1.5x, 1600x800.jpg 2x" src="1600x800.jpg" alt="Dream Team">

<picture> + <source>

<picture>
    <source media="(max-width: 599px)" srcset="400x200.jpg">
    <source media="(max-width: 799px)" srcset="800x400.jpg">
    <source media="(min-width: 800px)" srcset="1600x800.jpg">
    <img src="1600x800.jpg" alt="Dream Team">
</picture>

You can replace one or more images if the images implemented in your website correspond to one of the cases above.

Select the "image" in the editor:

A dedicated modal opens and lists you all the found images for each path and offers you to do a one by one replacement.

Usual constraints apply: only jpg, png, gif, svg, webp & avif are supported. 2MB max weight. (No constraint on weight if you use the image path alternative and call an external path.).

Once replaced, you will find this modification in the history panel.

You will be able to change it over and over again for this specific selector.

You can also to decide to not replace all of the listed images.