---
title: Managing responsive images
---

> 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).

Kentico provides support for responsive images management. The responsive images functionality enables you to create your own image filters and combine them in different ways to create image variants. For example, you can define image variants based on various criteria such as screen size, the type of the target device, and so on.

Each filter and image variant definition is represented by a standard .NET class that needs to be implemented by a developer. Note that image variants can be generated only for images stored as [page attachments](https://docs.kentico.com/k10/managing-website-content/working-with-files/page-attachments.md).

To use responsive images in Kentico, you need to:

1. **Add filters that can be applied on images.**
   - [Define filters](https://docs.kentico.com/k10/developing-websites/managing-responsive-images/defining-image-filters.md) that represent actions such as crop, resize, watermark, etc.
2. **Define image variants.**
   - Use the created filters and [develop image variant definitions](https://docs.kentico.com/k10/developing-websites/managing-responsive-images/defining-image-variants.md) to fit your needs.
3. **Generate image variants.**
   - Imagevariants are automatically created only for new uploaded or updated page attachments.
   - For existing page attachments, you need to [generate image variants](https://docs.kentico.com/k10/developing-websites/managing-responsive-images/generating-image-variants.md) manually.
4. **Use image variants on your pages.**
   - [Display image variants](https://docs.kentico.com/k10/developing-websites/managing-responsive-images/displaying-image-variants-on-pages.md) on your pages by using macro methods and ASCX transformations.
   - For displaying image variants on MVC sites, see [Working with page attachments in MVC applications](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).

> **Info:** **Sample code files**
>
> By default, the Kentico project contains sample implementations of filters and image variant definitions that are applied only on the Dancing Goat demo site. If you do not need the samples, you can safely remove the following folder from your project:
>
> - Web site project: _\~/CMS/App\_Code/Demo/ResponsiveImages_
> - Web application project: _\~/CMS/Old\_App\_Code/Demo/ResponsiveImages_