WordPress plugin that adds settings to the Image block to display different images depending on the width of the screen.
Enable Responsive Image adds settings to the Image block to display different images depending on the width of the screen. You can add multiple images and set media queries and resolution for each image. If the screen width matches the conditions of that media query, it will switch to the corresponding image.
enable-responsive-image
folder to the /wp-content/plugins/
directory.This plugin rewrites the HTML markup for the image block rendered on the front end. Wrap the img element with a picture element, and add source elements with srcset and media attributes inside the picture element based on the settings of the added image.
Try rearranging the order of the images. For example, if both images have a Media Query Type of max-width, the one with the smaller value should be ordered on top.
On the editor side, images do not switch by default. Click the “Enable responsive image preview” button on the block toolbar.
You can find a list of the available filters in the Github readme.