> ## Content Index
> Fetch the complete content index at: https://getpublii.com/dev/llms.txt
> Use this file to discover other available public pages before exploring further.

# {{responsiveImageAttributes}} helper

- URL: https://getpublii.com/dev/responsiveimageattributes-helper/
- Published: 2020-09-26T11:34:44.061Z
- Updated: 2024-03-30T16:17:07.322Z
- Description: The responsiveImageAttributes helper dynamically generates the srcset and sizes attributes for images, guiding the browser to select the most suitable image source based on the…
- Author: Tomasz Dziuda
- Tags: Helpers

The responsiveImageAttributes helper dynamically generates the `srcset` and `sizes` attributes for images, guiding the browser to select the most suitable image source based on the current device's screen size and resolution.

Syntax:

```handlebars
{{responsiveImageAttributes @config.custom.imageOptionName [type] [group]}}
```

-   **@config.custom.imageOptionName:** targets the image defined in the theme's configuration.
-   **type** (optional): categorizes the image into specific types such as optionImages, tagImages, authorImages, contentImages, or featuredImages.
-   **group** (optional): indicates the size group for the image, allowing for tailored image sizes for different design components.

**Please note:** The **type** and **group** are optional and only work with the [featuredImages](https://getpublii.com/dev/how-images-work-in-publii/#intermediate) settings.

When the helper's syntax specifies an image type directly, alongside `srcset` and `sizes`, the functionality remains unchanged.

In instances where the syntax begins with an **option name** and an **image type** is not explicitly provided, the script now intelligently infers the image type based on the path of the image.

The `responsiveImageAttributes` leverages [responsiveSizes](#INTERNAL_LINK#/post/52), the image type is automatically detected from the image path if not specified.

Example:

```handlebars
{{responsiveImageAttributes @config.custom.heroImage 'featuredImage' 'hero'}}
```