---
title: "Render image fields using the Responsive Image variant"
slug: "render-image-fields-using-the-responsive-image-variant"
abstract: "Make your images responsive."
---
# Render image fields using the Responsive Image variant
Making your images responsive means that your browser downloads and renders a different sized version of that image based on the size of the image on your page and the screen resolution. Instead of using the standard rendering variant **Field** for images, you can use the **Responsive Image** field to add scaling and sizing criteria. With SXA, you can also use generic links to media items to render images on the page. The **Responsive Image variant** field lets you render the content from the media item directly. This field enables you to define the default size as well as additional sizes and widths of images.
Render an image field
To add the **Responsive Image** field for scaling and sizing:
1. [Add a rendering variant](https://doc.sitecore.com/xp/en/developers/sxa/105/sitecore-experience-accelerator/create-a-rendering-variant.html "Create a rendering variant").
2. Right-click the variant, click **Insert**, and click **Responsive Image**.
3. In the **Variant Details** section, you can define the default size for your images.
The **Responsive Image variant** field enables you to specify:
- **Field name** – the name of the field that contains the link to the image.
- **Sizes** – define the screen widths and indicate the best image size for that screen width. For example, if you enter `(max-width: 320px) 280px, (max-width: 480px) 440px, 800px` this is rendered in the `![]()
` attribute:
```text
```
Render multiple images in a link field
The **Responsive Image variant** field enables you to work with nested fields. For example, if you have a page with products and those products have a different number of images of various sizes. By using a field that can link to a media item, a reference field, and the **Responsive Image variant** field, you can render multiple images to be the same size.
To auto-size multiple images:
1. Add the **Multilist** or **Multiroot Treelist** field to your page template.
2. In the **Source** field, enter a query to gather the images you want. For example, `query:$siteMedia` to link to the virtual media folder of your site.
3. Create a Rendering Variant for the component you would like to use the render images. Right-click the rendering that you want to add the variant to, and then click **Insert**, **Variant Definition**.
4. Enter a name and click **OK**.
5. To define the fields to display, you can add child items to the rendering variant. Right-click the variant, click **Insert**, and click **Reference**.
6. The **Pass through** field defines the name of the field from the nested item. In the **Variant Details** section, in the **Pass through** field, enter the name you entered for the **Multilist** or **Multiroot Treelist** field of the page template.
7. Right-click the reference item that you created in step 5, click **Insert**, and click **Responsive Image**.
8. In the **Variant Details** section, you can define the default size for your images. For example, if you enter 400 in the **Default size** field, the images for the page will all have a default size of 400.