Title: Enable Responsive Image
Author: Aki Hamano
Published: <strong>ޑިސެމްބަރ 12, 2023</strong>
Last modified: މާރޗް 3, 2026

---

Search plugins

![](https://ps.w.org/enable-responsive-image/assets/banner-772x250.png?rev=3008450)

![](https://ps.w.org/enable-responsive-image/assets/icon-256x256.png?rev=3008450)

# Enable Responsive Image

 By [Aki Hamano](https://profiles.wordpress.org/wildworks/)

[Download](https://downloads.wordpress.org/plugin/enable-responsive-image.1.6.0.zip)

[Live Preview](https://dv.wordpress.org/plugins/enable-responsive-image/?preview=1)

 * [Details](https://dv.wordpress.org/plugins/enable-responsive-image/#description)
 * [Reviews](https://dv.wordpress.org/plugins/enable-responsive-image/#reviews)
 *  [Installation](https://dv.wordpress.org/plugins/enable-responsive-image/#installation)
 * [Development](https://dv.wordpress.org/plugins/enable-responsive-image/#developers)

 [Support](https://wordpress.org/support/plugin/enable-responsive-image/)

## Description

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.

### Resources

#### Image for screenshot

 * License: Public Domain
 * Source: https://openverse.org/image/cd8e5cc5-d38a-462e-b4c1-1ea5c6f94e20

## Screenshots

 * [[
 * Settings added to the block sidebar of the image block
 * [[
 * How the image changes depending on the screen width

## Installation

 1. Upload the `enable-responsive-image` folder to the `/wp-content/plugins/` directory.
 2. Activate the plugin through the \’Plugins\’ menu in WordPress.

## FAQ

### How does this plugin work?

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.

### It does not work correctly when multiple image sources are set.

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.

### Even if I switch the screen width or device on the editor, it does not switch to the set image.

On the editor side, images do not switch by default. Click the “Enable responsive
image preview” button on the block toolbar.

### What filters can I use?

You can find a list of the available filters in the [Github readme](https://github.com/t-hamano/enable-responsive-image#filters).

## Reviews

![](https://secure.gravatar.com/avatar/83fabe163ff5f3406b03ffa2337bc87c0ebc5c3c2cfcca2c36286a8ca9f3e4bb?
s=60&d=retro&r=g)

### 󠀁[Great Plug-In. Should be added to Core](https://wordpress.org/support/topic/great-plug-in-should-be-added-to-core/)󠁿

 [digberlin](https://profiles.wordpress.org/digberlin/) މާރޗް 17, 2025

Must-have plug-in for responsive websites.

![](https://secure.gravatar.com/avatar/2892d0b180230dc82c8c8898e5b5d925837b0e51f80f8a5df52ed0d5150028b2?
s=60&d=retro&r=g)

### 󠀁[Must install for website creation at work.](https://wordpress.org/support/topic/must-install-for-website-creation-at-work/)󠁿

 [けい (Kei Nomura)](https://profiles.wordpress.org/mypacecreator/) މާރޗް 12, 2025

This is exactly the plugin I wanted. Thank you.

![](https://secure.gravatar.com/avatar/a7276235fb250f091f56688568365e47d4536c5acc9b22873be5d89ded125a3e?
s=60&d=retro&r=g)

### 󠀁[5 Stars](https://wordpress.org/support/topic/5-stars-594/)󠁿

 [iz4atkal](https://profiles.wordpress.org/iz4atkal/) ޑިސެމްބަރ 8, 2024

Very convenient!

![](https://secure.gravatar.com/avatar/dee401e1fe480a559f65112ceee2d7a9d2f95dfebde8d00eebc9697c6fe63a80?
s=60&d=retro&r=g)

### 󠀁[Very useful for professional site builds](https://wordpress.org/support/topic/very-useful-for-professional-site-builds/)󠁿

 [onetrev](https://profiles.wordpress.org/onetrev/) ޖުލައި 26, 2024

Working well, just what was needed. Thanks for making this! While I understand this
functionality not being the core image block, it’s essential for any kind of professional
site build so thank you very much for making it!

![](https://secure.gravatar.com/avatar/62fe212021d456e5fdb54e3ee53bdd71b42a195b3e9ca74c7c0494cb96425d30?
s=60&d=retro&r=g)

### 󠀁[The Plugin I Have Been Waiting For!!](https://wordpress.org/support/topic/the-plugin-i-have-been-waiting-for-2/)󠁿

 [stevieboy23](https://profiles.wordpress.org/stevieboy23/) ފެބްރުއަރީ 7, 2024

At last! I have waited a long time for this functionality to come to Gutenberg… 
As far as I know, this is the only plugin out there that will allow you to set different
images for different screen sizes – all inside the block editor!! No more outside-
the-editor workarounds needed to achieve this – Brilliant!!!By-the-way, this developer
has created a whole “swiss army knife” range of additional plugins for Gutenberg:
Flexible Spacer Block, Flexible Table Block and more. Well done, thank you, and 
keep up the great work, Very Best Wishes!!!!

 [ Read all 5 reviews ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/)

## Contributors & Developers

“Enable Responsive Image” is open source software. The following people have contributed
to this plugin.

Contributors

 *   [ Aki Hamano ](https://profiles.wordpress.org/wildworks/)
 *   [ Toro_Unit (Hiroshi Urabe) ](https://profiles.wordpress.org/toro_unit/)

“Enable Responsive Image” has been translated into 4 locales. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image/contributors)
for their contributions.

[Translate “Enable Responsive Image” into your language.](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/enable-responsive-image/),
check out the [SVN repository](https://plugins.svn.wordpress.org/enable-responsive-image/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/enable-responsive-image/)
by [RSS](https://plugins.trac.wordpress.org/log/enable-responsive-image/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.6.0

 * Tested to WordPress 7.0
 * Drop support for WordPress 6.8
 * Enhancement: Polish block sidebar
 * Accessibility: Improve source button aria-label

#### 1.5.0

 * Tested to WordPress 6.9
 * Enhancement: Update block toolbar icon
 * Drop support for WordPress 6.6 and 6.7
 * Drop support for PHP 7

#### 1.4.0

 * Tested to WordPress 6.8
 * Enhancement: Show full srcset url
 * Accessibility: Respect user preference for CSS transitions
 * Drop support for WordPress 6.5

#### 1.3.0

 * Tested to WordPress 6.7
 * Drop support for WordPress 6.4

#### 1.2.0

 * Tested to WordPress 6.6

#### 1.1.1

 * Remove unnecessary changelog

#### 1.1.0

 * Tested to WordPress 6.5
 * Enhancement: Polish block sidebar

#### 1.0.0

 * Initial release

## Meta

 *  Version **1.6.0**
 *  Last updated **1 month ago**
 *  Active installations **1,000+**
 *  WordPress version ** 6.9 or higher **
 *  Tested up to **7.0**
 *  PHP version ** 8.0 or higher **
 *  Languages
 * [Chinese (Taiwan)](https://tw.wordpress.org/plugins/enable-responsive-image/),
   [English (US)](https://wordpress.org/plugins/enable-responsive-image/), [Japanese](https://ja.wordpress.org/plugins/enable-responsive-image/),
   [Spanish (Chile)](https://cl.wordpress.org/plugins/enable-responsive-image/),
   and [Spanish (Spain)](https://es.wordpress.org/plugins/enable-responsive-image/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image)
 * Tags
 * [block](https://dv.wordpress.org/plugins/tags/block/)[gutenberg](https://dv.wordpress.org/plugins/tags/gutenberg/)
   [image](https://dv.wordpress.org/plugins/tags/image/)[responsive](https://dv.wordpress.org/plugins/tags/responsive/)
 *  [Advanced View](https://dv.wordpress.org/plugins/enable-responsive-image/advanced/)

## Ratings

 5 out of 5 stars.

 *  [  5 5-star reviews     ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=1)

[Add my review](https://wordpress.org/support/plugin/enable-responsive-image/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/enable-responsive-image/reviews/)

## Contributors

 *   [ Aki Hamano ](https://profiles.wordpress.org/wildworks/)
 *   [ Toro_Unit (Hiroshi Urabe) ](https://profiles.wordpress.org/toro_unit/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/enable-responsive-image/)