Disable Responsive Images Complete vs Responsive Picture Block

This plugin completely disables WP responsive-image feature that was introduced in version 4.4. It is meant for people who know what they are doing and want to use their own responsive-image techniques. Features Disables responsive images on the front-end Disables generation of medium_large 768px image size Completely plug-and-play, no configuration required Works perfectly with or without Gutenberg block editor Uses the WP API to disable responsive images Clean, lightweight code, a real pleasure Why would anyone want to do this? Check out the FAQs below for all sorts of good reasons. Check out Disable WordPress Responsive Images at Perishable Press for more information about how this plugin works, etc. 👉 Related: Free plugin to control which image sizes are generated by WordPress, check out Disable Media Sizes. Privacy This plugin does not collect or store any user data. It does not set any cookies, and it does not connect to any third-party locations. Thus, this plugin does not affect user privacy in any way. Disable Responsive Images Complete is developed and maintained by Jeff Starr, 15-year WordPress developer and book author. Support development I develop and maintain this free plugin with love for the WordPress community. To show support, you can make a donation or purchase one of my books: The Tao of WordPress Digging into WordPress .htaccess made easy WordPress Themes In Depth Wizard’s SQL Recipes for WordPress And/or purchase one of my premium WordPress plugins: BBQ Pro – Blazing fast WordPress firewall Blackhole Pro – Automatically block bad bots Banhammer Pro – Monitor traffic and ban the bad guys GA Google Analytics Pro – Connect WordPress to Google Analytics Head Meta Pro – Ultimate Meta Tags for WordPress REST Pro Tools – Awesome tools for managing the WP REST API Simple Ajax Chat Pro – Unlimited chat rooms USP Pro – Unlimited front-end forms Links, tweets and likes also appreciated. Thank you! 🙂

Core Essentials – Responsive Picture Block turns several standard Image blocks into one semantic, front-end HTML element. It’s built for art direction: choose different crops, compositions, or formats for different breakpoints (e.g., a tight mobile crop, a wider desktop crop, or an AVIF/WebP source). Why this matters: vs srcset is great for picking the right resolution of the same image. But when you need different content (crop/ratio/composition) at different viewport widths, you need art direction — that’s exactly what does by letting you swap entire sources via . Editor-first UX Authors see a single “Responsive Picture (Block)” wrapper, then insert one Image per breakpoint. The plugin mirrors the link /caption from the Desktop image. Per-image design controls (aspect ratio, object-fit, width/height) are respected. The block’s preview shows the native Desktop / Tablet / Mobile toolbar: Desktop preview ⇒ show all child images Tablet preview ⇒ show Tablet, else Desktop, else Mobile Mobile preview ⇒ show Mobile, else Tablet, else Desktop Perfect source ordering Custom media queries are auto-sorted so the correct wins (most specific first). Works with max-width, min-width, and range queries. Key Features Wraps multiple core Image blocks into a single semantic Pick Desktop / Tablet / Mobile / Custom images (true art direction) Override media per Tablet/Mobile/Custom (e.g., (max-width: 1200px)) Optional sizes override per source (advanced bandwidth tuning) Allows width, height, aspect-ratio, object-fit per breakpoint Uses link + caption from the Desktop (fallback) image Editor preview follows WordPress’ device switcher (Desktop/Tablet/Mobile) Prevents layout overflow; picture wrapper is fully responsive Works with standard WP image sizes and responsive srcset Lightweight, no front-end JS — pure HTML/CSS on the front end Why (Art Direction 101) When your layout needs different imagery across breakpoints (e.g., a vertical crop on phones and a wide landscape on desktops), you’re doing art direction. The element enables this by letting the browser choose an entire source based on media conditions (and even file type, like AVIF/WebP), not just a different width of the same file. The result is better design control and faster pages because each device downloads only the most appropriate asset for its layout saving you bandwidth as well as having compositions control. Use Cases Hero banners with different crops for mobile vs desktop Product images where the subject framing changes on small screens Editorial layouts that require portrait vs landscape compositions File format switching (e.g., AVIF/WebP with PNG/JPEG fallback) Usage Insert the Responsive Picture (Block) block. Add Image blocks inside it for: Desktop (fallback), Tablet, Mobile, and/or Custom. Select each Image and open the Responsive: Breakpoint panel: Viewport: Desktop / Tablet / Mobile / Custom Override media query (Tablet/Mobile): optional (e.g., (max-width: 1200px)) Custom media query: required when using the “Custom” viewport (Optional) Open Advanced: Sizes override to set a custom sizes="" for that source. Use the editor’s Desktop / Tablet / Mobile preview to check the effective image per breakpoint. Publish. The front end renders a single with perfectly ordered tags and a fallback . Block Details Block name: ce/responsive-picture Children: one or more core/image blocks Front-end HTML output: