Configure responsive images

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.

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:

1. Create the thumbnail profiles.
   You first need to configure the different sizes in which one image will be displayed, depending on the device that it is viewed on.

   For each size that you want an image to be displayed, create a thumbnail profile. To do this, follow procedure Thumbnails.

2. Apply the thumbnails to a library.
   You configure responsive images on library level. You do this by applying the created thumbnails to a library whose images you want to be served as responsive.

   To apply the required thumbnails, follow procedure Image libraries » Create an image library » Step 6.

3. Configure the Image widget.
   To use responsive images on your page, perform one of the following.
4. If you are using the MVC Image widget, perform the following:
   1. Open the page where the Image widget is located.
   2. Click Edit.
      The Image dialog appears.
   3. In the Image size dropdown box, select Responsive.
   4. Click Save.
5. If you are using the .NET Image widget, perform the following:
   1. Click  (Edit).
      The Image widget page appears.
6. Click Display settings.
7. In the Image size dropdown box, select Responsive.
8. Click Save.