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.
This plugin belongs to our "SPEED" plugin series. If you want to speed up your site, take a look at other plugins from the same series: Super cache, Lazy Loading.
Functions:
- Adding Schema.org markup for images and listing the generated images inside it.
- Duplicate images in aspect ratio: 16x9, 4x3, 1x1 (Google recommendation for SEO image promotion).
- Create images with increased pixel density (2x, 3x) for good image quality on all devices.)
- Working with Webp, converting to format and resizing images (requires GD or Imagick library to be compiled with WebP support).
- Compress images.
- Adding metadata for JPEG images according to the IPTC (Creator, Description, Credit Line, CopyrightNotice, Source). If someone takes images from your site for Google, the source will be your site.
- Auto-write alt attribute of img tags (based on image name, page title, and page keywords).
Features:
- Multi-showcase (separate settings for each storefront).
- Does not use the picture tag and therefore does not grow DOM nodes.
- Auto detect browser support for Webp if Webp is supported, otherwise old formats.
- Doesn't work in IE browsers.
- Works only in the Store app.
- The weight of the JS script is only 4kb.
- Works in the background using AJAX technology.
- Works with image formats: png, jpg / jpeg, gif, webp.
- The creation of images occurs after the user visits the site page.
PageSpeed Insights:
- Improvements to the metric "Adjust the size of images to fit".
- Improvements to the "Use modern image formats" metric.
- Improvement in the metric "Width and height attributes are not explicitly set for images.
- Improvements to the "Configure effective image encoding" metric.
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.
Getting Started:
In the plugin settings, click "Activate plugin" - the plugin is ready to use.
Plugin operation:
Plugin operation algorithm consists of two stages
- The first visit to a site page - creating images when the breakpoint coincides with the width of the screen (until there are images for all breakpoints).
- Second visit to the site page - adding images to markup.
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.
- Working with lightboxes: no issues identified.
- Working with our plugins Super cache and Lazy load: full integration.
- Working with third-party plugins that provide lazyload for images: the plugin is not guaranteed to work with such a plugin. Often these plugins are integrated into the design theme.
Technical support:
- Technical support is provided at: startwebsite@mail.ru
- Working hours (Moscow time): 10:00 - 18:00
- Technical support includes: consultations on configuration, answers to questions about the plugin, configuring the plugin according to your request
- We will be glad to hear your: wishes, ideas, comments on the plugin operation
