getode

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 <code><picture></code> markup. The browser automatically loads the appropriate image based on screen width, ensuring fast load times and an optimal user experience.
Key Features: 
– Device-Specific Images: Show different images on desktop (≥768px) and mobile (<767px) 
– Lightweight Solution: Uses standard HTML5 <code><picture></code> tags without extra JavaScript 
– Better Performance: Optimized for Core Web Vitals by reducing unnecessary image loading 
– SEO Friendly: Improves mobile user experience and page speed 
– Simple Interface: Easy-to-use block controls in the Gutenberg editor
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.

Responsive Image Switcher

A lightweight block for responsive image switching between desktop and mobile.

Rownok Bosunia

Device-Specific Media Element is an Elementor extension that allows you to serve different media formats to different devices:
<ul>
<li>For iOS devices (iPhone/iPad) → Load and play .gif files</li>
<li>For Mac devices → Load and play .mp4 files</li>
<li>For other devices (Windows, Android, Linux, etc.) → Load and play .webm files</li>
</ul>
This approach optimizes performance by serving the most appropriate media format for each device type, improving load times and user experience.
<h4>Features</h4>
<ul>
<li>Custom Elementor widget for device-specific media</li>
<li>Automatic device detection using JavaScript</li>
<li>Support for .gif, .mp4, and .webm formats</li>
<li>Options for autoplay, loop, mute, and controls</li>
<li>Fallback media for unsupported browsers</li>
<li>Fully responsive design</li>
<li>Multiple widget instances on the same page</li>
<li>Clean, modular code following WordPress standards</li>
</ul>
<h3>Usage</h3>
After installing and activating the plugin:
<ol>
<li>Edit a page with Elementor.</li>
<li>Find the “Device-Specific Media” widget in the Elementor editor.</li>
<li>Add the widget to your page.</li>
<li>Upload or specify URLs for each media type:
<ul>
<li>GIF for iOS devices</li>
<li>MP4 for Mac devices</li>
<li>WebM for other devices</li>
</ul>
</li>
<li>Configure playback settings (autoplay, loop, muted, controls).</li>
<li>Add a fallback image/message for unsupported browsers.</li>
<li>Save and publish your page.</li>
</ol>
The plugin will automatically detect the visitor’s device and load the appropriate media type.

Device-Specific Media Element

A WordPress plugin that adds a custom Elementor widget to load different media types based on the visitor's device.

Responsive Image Switcher vs Device-Specific Media Element