# Render responsive images in templates

The easiest way to render [responsive images](https://developer.mozilla.org/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) in templates is with the [html function](/documentation/templates/#html):

```twig
{{ html(asset('image.jpg'), attributes={alt: 'Alternative description'}, options={responsive: true}) }}
```

:::important
The default width values of the generated images are 480, 640, 768, 1024, 1366, 1600 and 1920. They can be modified in the _assets_ section of the [configuration](/documentation/configuration/#assets-images).
:::

## Example

Below an example with a PNG image 1000x1000 pixels.

```twig
{{ html(asset('cecil-logo-1000.png'), attributes={alt: 'Cecil logo'}, options={responsive: true}) }}
```

### Configuration

```yaml
assets:
  images:
    responsive:
      widths: [768, 1024]
```

### Generated HTML

```html
<img
  alt="Cecil logo"
  width="1000"
  height="1000"
  src="/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png"
  srcset="/thumbnails/768/cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 768w,
          /cecil-logo-1000.fbacb922cddbcdb7ca9a03a3ca3cf2ca.png 1000w"
  sizes="100vw"
>
```