Plugin Responsive Images PRO generates arrays of responsive images from the original image, suitable for the device sizes of site visitors. It also has many imaging features to help increase your site's speed and SEO.
An example of how this works can be found on our demo site.
There is a feature when analyzing the mobile version with the metric "Adjust the appropriate image size". PageSpeed Insights uses device emulation with a retina display, and the browser from the srcset attribute for retina displays substitutes the largest image size and because of this PageSpeed Insights gives a penalty that too large images are used.
In the plugin settings, click "Activate plugin", select the operating mode, enable the necessary functions - the plugin is ready for use.
The plugin uses its own html filters, which are used to search for images and process them. The plugin works only with uploaded images that are on the pages of the site. Creates copies of images and works with them, original images are not affected. When the plugin is disabled, html filters are disabled and everything returns exactly as it was, it is impossible to damage the site using this plugin.
Plugin operation algorithm consists of two stages
To test the plugin's work, visit any page of the "Store" application with a screen width equal to any of the breakpoints. Then refresh the page. Hover over any image (format: png, jpg, gif, webp). Right-click, a context menu will appear in which you need to select Explore Element / View Code. The img tag must have attributes: "srcset" with image paths and "sizes" with image sizes. If so, the plugin is working correctly.
Compatibility with other plugins:
The plugin was designed in such a way as to minimize conflicts with other plugins that interact with images, but still the plugin adds the "srcset" and "sizes" attributes and this may cause problems with some plugins.
Size chart for product categories and brands.
Promotional cards for your site.
Unlimited quantity. 16 types.14 display conditions
Short videos and pictures on your website!
Lazy loading images and iframes
Speed up site rendering and increase PageSpeed.
Slider with many parallax effects.