Responsive Image Switcher is a lightweight Gutenberg block that simplifies responsive image management in WordPress. Add the block, upload a desktop image (for screens ≥768px) and a mobile-optimized image (for screens <767px), and the plugin generates clean HTML5 <picture> markup. The browser automatically loads the appropriate image based on screen width, ensuring fast load times and an optimal user experience.
Key Features:
– Fast and Lightweight: Uses vanilla HTML5 <picture> tags, no extra JavaScript.
– Improved Performance: Mobile-optimized images reduce load times, boosting Core Web Vitals.
– SEO Benefits: Enhances mobile UX and page speed, key Google ranking factors.
– Easy to Use: Intuitive block interface for selecting images in Gutenberg.
– Flexible Use Cases: Perfect for headers, galleries, banners, or product showcases.
Why Choose Responsive Image Switcher?
With over 60% of web traffic coming from mobile devices, delivering the right image for each screen size is critical. This plugin eliminates the need for complex CSS media queries or CDN setups, making responsive images accessible to everyone.
Supported Languages:
– English (default)
– Russian (ru_RU)
– Ukrainian (uk_UA)
This plugin is built with modern WordPress standards:
– Source code: https://github.com/Getode/responsive-image-switcher
– Uses @wordpress/scripts for build process
– Complies with WordPress coding standards
To contribute:
1. Clone the repo: git clone https://github.com/Getode/responsive-image-switcher.git
2. Install dependencies: npm install
3. Build: npm run build