When you use responsive images, your assets are tailored to the medium that your visitors are using and thus, provides them with an optimal and engaging experience. Responsive images save bandwidth and can lower the costs for running your site.
PREREQUISITES: To use responsive images in your sites, you must use the MVC Image widget or the .NET Image widget.
Sitefinity CMS implements responsive images as HTML5-compliant <picture> elements with nested <source> elements utilizing media queries.
The user agent (usually a browser) examines each source's attributes to select a compatible image that best matches the device's viewport. If no suiting option is available, the user agent fallbacks to the original image that you have set in the Image widget.
The default media condition in Sitefinity CMS is media="(max-width: thumbnail width)". It tells the user agent to serve the thumbnail only when the device width is smaller than the width of the thumbnail. The <source> elements are ordered in descending order because the browser uses the first suitable source.
media="(max-width: thumbnail width)"
Each <source> tag also has a type attribute, which value is the MIME type of the image. These tags are helpful for browsers that do not support certain types of image formats. For example, older browsers do not support WebP, and they use the type information to skip the loading of WebP-encoded images.
To serve responsive images, you need to configure Sitefinity CMS. To do this, you first create thumbnail profiles for the different responsive sizes, then apply them to the libraries, and, finally, configure the widgets to use them.
Perform the following:
For each size that you want an image to be displayed, create a thumbnail profile. To do this, follow procedure Thumbnails.
To apply the required thumbnails, follow procedure Image libraries » Create an image library » Step 6.
Sign up for our free beginner training. Boost your credentials through advanced courses and certification. Register for Sitefinity training and certification.
To submit feedback, please update your cookie settings and allow the usage of Functional cookies.
Your feedback about this content is important