# Responsive Image Field / Breakpoints

**URL:** <https://community.hubspot.com/t/responsive-image-field-breakpoints/32395>\
**Category:** HubSpot Ideas\
**Tags:** design-manager\
**Created:** [February 26, 2021, 4:14pm UTC](https://community.hubspot.com/t/responsive-image-field-breakpoints/32395 "2021-02-26T16:14:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kierana](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kierana/32/44503_2.png) [@kierana](https://community.hubspot.com/u/kierana)\
**Post date:** [February 26, 2021, 4:14pm UTC](https://community.hubspot.com/t/responsive-image-field-breakpoints/32395/1 "2021-02-26T16:14:59Z")

</div>

**Goals:**

1. Allow more control over how images respond to different screen sizes.
2. Create a more consistent editing experience across themes by containing options for a single image in one field.
3. Reduce the size of fields.json

**Currently responsive images can be achieved in the following ways:**

- resize\_image\_url - A pot-luck approach to resizing, ultimately this gives the editor little control over choosing the crop position on say mobile devices. Not good for large Hero images.
- Multiple image fields, potentially in a repeater - While this works and can provide a lot of flexibility it’s also very inconsistent and is clutters the fields.json files.

**Possible solution:**

Extending the Image field to allow usage of the [Hubspot breakpoint](https://developers.hubspot.com/docs/cms/building-blocks/themes/responsive-breakpoints) functionality. An example field.json:

```lia-code-sample
{
 "name": "image_field",
 "type": "image",
 ...
 "breakpoints": true,
 ...
}

```

Doing this could turn the Image field into a repeater with easy to access keys. Additionally Hubspot could return the srcset attribute prebuilt - example:

`<img src="xxxxx.jpg" srcset="{{ module.image_field.srcset }}" />`

If a developer wants to access the specific images/use \<picture\> then:

```lia-code-sample
{{ module.image_field.breakpoints | pprint }}

{ 
 "mobile": {"src": "xxxx", "width": "xxx" },
 "mobile@2x": {"src": "xxxx", "width": "xxx" }
}

```

This could just be an extension to the existing field - Doesn’t need to change any of the default params (e.g. module.image\_field.src can stay the same)

Kieran

---

<div class="post-metadata">

**Author:** ![jmclaren](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jmclaren/32/38449_2.png) [@jmclaren](https://community.hubspot.com/u/jmclaren)\
**Post date:** [February 26, 2021, 6:58pm UTC](https://community.hubspot.com/t/responsive-image-field-breakpoints/32395/2 "2021-02-26T18:58:07Z")

</div>

Hey @kierana this is great feedback!  
Question, **do you feel you want this in addition to the current automatic srcset generation that’s done?**  
For example if you have an `img` element with a `height` and `width` we automatically generate a srcset.

Also I’m curious I understand the desire to create multiple resize images, but do you intend to instead provide a different image(as in not just resized but cropped or something) at different screen sizes.  
In that case would it make more sense to use a custom module with say a `\<picture\>` element?

---

<div class="post-metadata">

**Author:** ![kierana](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kierana/32/44503_2.png) [@kierana](https://community.hubspot.com/u/kierana)\
**Post date:** [February 26, 2021, 7:34pm UTC](https://community.hubspot.com/t/responsive-image-field-breakpoints/32395/3 "2021-02-26T19:34:03Z")

</div>

Wasn’t aware of the automatic srcset, thanks!

> Also I’m curious I understand the desire to create multiple resize images, but do you intend to instead provide a different image(as in not just resized but cropped or something) at different screen sizes.

Yeah, absolutely - so this is about artistic direction (so \<picture\> makes sense). I could’ve really just highlighted that in my original post! Auto-resizing is great, but in a lot of cases it just doesn’t cut it.

The reason I suggested the field (fields.json) - was because I feel it’d create a standard, encapsulated way of specifying images across the Hubspot CMS. Aat the moment I can just add a field, maybe with a repeater to allow them to be optional on each custom module. However, I feel like could be a really useful core feature.

---

<div class="post-metadata">

**Author:** ![BMorey](https://avatars.discourse-cdn.com/v4/letter/b/76d3ee/32.png) [@BMorey](https://community.hubspot.com/u/BMorey)\
**Post date:** [January 28, 2025, 1:23pm UTC](https://community.hubspot.com/t/responsive-image-field-breakpoints/32395/4 "2025-01-28T13:23:36Z")

</div>

I am curious if anything came of this. I want to build an image module for email that loads a different image at the mobile breakpoint, so desktop it is designed around a landscape orientation, and mobile it is more vertical or square. The automatic shrink isn’t the answer much of the time, especially for evergreen banners.

As of now I’m just in the research phase, it’s something that should be simple and I’m trying to avoid extra work if it’s already built in and buried.