---
title: Displaying image variants on pages
related:
  - https://docs.kentico.com/k10/managing-website-content/working-with-files/page-attachments.md
  - https://docs.kentico.com/k10/developing-websites/developing-sites-using-asp-net-mvc/developing-mvc-applications/retrieving-content-on-mvc-sites/working-with-page-attachments-in-mvc-applications.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

Image variants are user-defined versions of [page attachments](https://docs.kentico.com/k10/managing-website-content/working-with-files/page-attachments.md). They allow you to create a set of images that can differ in size, color, image quality, and other aspects of your choice.

Before you can start using image variants on your site, you first need to [define the image variants in code](https://docs.kentico.com/k10/developing-websites/managing-responsive-images/defining-image-variants.md) and then [generate](https://docs.kentico.com/k10/developing-websites/managing-responsive-images/generating-image-variants.md) them for page attachments.

## Example

The following example works with image variants of _File_ field attachments of articles on the _Dancing Goat_ sample site. The example requires an image variant definition for a tablet. To learn how to create image variant definitions, see [Defining image variants](https://docs.kentico.com/k10/developing-websites/managing-responsive-images/defining-image-variants.md).

1. In the **Pages** application, select the _Articles_ page in the content tree.
2. On the **Design** tab, open the properties of the existing _Repeater_ web part instance named _Articles_.
3. In the web part properties, edit the **Selected item transformation**.
4. Find the __ element with the _article-detail-image_ class.
5. Replace the content of the __ element with the following code:

   ```xml title="Text / XML transformation code"

   <picture>
       <source media="(max-width: 768px)" srcset="{% GetFileUrlByGUID(ArticleTeaser, "image", "Tablet") %}"/>
       <img style="width: 100%" src="{% GetFileUrlByGUID(ArticleTeaser, "image") %}" alt="Article teaser"/>
   </picture>

   ```

   > **Note:** **Note**: Current web browsers vary in their support of HTML 5 features. For example, the _picture_ HTML element is not supported in Internet Explorer 11. When implementing your solution, make sure to test it in the web browsers you want to support.
6. **Save** the transformation properties and close the dialog window.
7. Click **Save & Close**.

The article teaser image now displays in different sizes based on the browser window width.

Note that you can also use other transformation methods to generate URLs for image variants. See [Reference - Transformation methods](https://docs.kentico.com/k10/developing-websites/loading-and-displaying-data-on-websites/writing-transformations/reference-transformation-methods.md) for more details.