Configure responsive images

Overview

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.

Implementation

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.

Procedure

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 (Edit).
      The Image widget page appears.
  6. Click Display settings.
  7. In the Image size dropdown box, select Responsive.
  8. Click Save.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

WebP images