Image widget

Use this widget to display a single image on your page. You can choose an image from those already uploaded or upload a new image. Then, you can edit the image settings, such as title and alt text. Finally, you can choose how to display the image on the page.

When you use the image widget, Sitefinity CMS generates an img tag in the HTML of the page. In this tag, Sitefinity CMS automatically generates the loading="lazy" attribute. This attribute instructs the browser not to load images that are off-screen until immediately before the moment they become visible. Thus, lazy loading of images improves performance.

Sitefinity CMS automatically uses width and height attributes within the img tag. This has the following benefits.

• The browser can properly layout the page before the images are downloaded and displayed to the user.
  This increases the rendering speed and avoids unnecessary page layout shifts.
• This improves the Google page experience score, measured by Google Lighthouse, and thus, increases your SEO standing.

You can place an Image widget only inside a Section widget.
To do this, perform the following:

1. Inside a column from the Section widget, click Add widget here…
   
2. Select the Content tab.
   
3. Click the Image widget.
   The widget is placed inside the selected column of the Section widget.
   

Choose which image to display by performing the following:

1. In the newly placed Image widget, click Select image.
   You can select and display only one image.
   Choose between the following:
   • Upload an image from your computer
     To upload an image, drag and drop it in the window or click Upload image from your computer, browse your computer to find the image you want to upload and click Open.
     
   • Select an image from library
     The system displays recently used images.
     You can select one of the recent images or perform the following:
     1. Select the content provider where the image is located
        
     2. Click the library where the image is located.
        
     3. Select the image and click Use selected.
        
2. In Upload to, select the content provider where you want to store the image, by clicking   (Edit).
   You can have different content providers for the different websites of your multisite instance. For more information, see Share content providers of modules.

   NOTE: If you have chosen to display an image from a library, it is already uploaded and you do not see this option.

3. In Store uploaded image to, select the library where you want to store the image, by clicking  (Edit).

   NOTE: If you have chosen to display an image from a library, it is already uploaded and you do not see this option.

You can change the image properties in the following way:

1. You can change the Title of the image by entering the new title.
2. You can change the image itself by clicking  (Edit) below the image.
   You can select one of the recent images or perform the following:
   1. Select the content provider where the image is located
      
   2. Click the library where the image is located.
      
   3. Select the image and click Use selected.
      
3. In Alternative text input field, enter text that is used for accessibility reasons and by search engines.
   
4. Click Use this image.
   The image is being uploaded in the selected library.

   NOTE: If you have chosen to display an image from a library, it is already uploaded and you do not see Use this image button.

5. In When image is clicked... dropdown box, select one of the following:
   • Nothing happens
     The system performs no action when a user clicks the image.
     
   • Open a link
     The Link to... input field appears.
     Enter the link to the page that you want to open when the image is clicked or perform the following:
     1. To select a page or an item from your website, click Select page or content.
        
     2. Under Site, select the website from your multisite instance where the page or the item is located and, if you have multiple languages, select the language by clicking  (Edit).
        
     3. Under Content type, select the content type that you want to open when the image is clicked.
        A list of content items or pages appears.
        
     4. Click the desired item or page and click Use selected.
        
   • Open image in its original size
     When a user clicks the image, it opens in its original size.
     

To configure how to display the image in the widget, perform the following:

1. Expand Display settings.
   
2. In Image size dropdown box, choose how the image is displayed on the page, by selecting one of the following:
   • Responsive
     A picture tag is added to the image that signals the browser all thumbnail sizes that are available for the image. If the image is placed in a smaller container, the browser will automatically download a smaller sized image thumbnail, which saves load times and traffic.
     For more inforation, see Configure responsive images.
     
   • Original size
     The image is downloaded and displayed in its original size.
     
   • Use thumbnail
     In Thumbnail dropdown box, select one of the predefined thumbnail sizes.
     For more information, see Thumbnails.
     
   • Custom size
     Enter the Width and the Hight of the image in pixels.
     You can lock the proportions in their original size, by selecting Constrain proportions checkbox.
     
3. Select Fit to container, if you want the width of the image to match the width of the column where it is displayed.
   For example, if you have chosen to display the image in its original size, have also selected to fit it to the container, the image will be downloaded by the browser in its original size, but will be automatically resized to the width of the column where it is placed.
   
4. In Margins, you can choose the margins between the image and the column where it is placed.
   Choose from the predefined values of none, small, medium, or large.
   
5. Click Save.
   

To open the advanced settings, in the upper-right corner of the Image widget page, click  (Advanced settings)

• In Label, you can enter a specific name for this widget.
  This name will be displayed in:
  • The page editor as a label for the widget
    
  • In the treeview with the page structure in the right pane of the page editor.
    
• In CSS class,  you can enter individual CSS class for the Image widget.

Save your changes.