# Image Component Custom Aspect Ratio fails on breakpoints

**URL:** <https://forums.realmacsoftware.com/t/image-component-custom-aspect-ratio-fails-on-breakpoints/44305>\
**Category:** Elements\
**Created:** [August 16, 2024, 6:30pm UTC](https://forums.realmacsoftware.com/t/image-component-custom-aspect-ratio-fails-on-breakpoints/44305 "2024-08-16T18:30:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [August 16, 2024, 6:30pm UTC](https://forums.realmacsoftware.com/t/image-component-custom-aspect-ratio-fails-on-breakpoints/44305/1 "2024-08-16T18:30:04Z")

</div>

I’ve started methodically trying to use the built-in components and I discovered a bug in the Image component, specifically with the Aspect Ratio custom setting. If you set it on the mobile screen, and then attempt to change the ratio at a different breakpoint (say, tablet or desktop) the image defaults back to the original size/aspect ratio.

Also, in the properties the ‘sizing’ section includes the property ‘File Size’ with isn’t really a file size issue, but an image size/optimization issue. It’s a little confusing as it’s not entirely clear what it’s doing. If I select ‘Device’ will that create a new image for each device/breakpoint, or is it sized to the max width of that device viewport (it would be nice if the dimensions by the device icons updated to reflect the min/max values for each breakpoint).

 ![CleanShot 2024-08-16 at 14.23.44@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/6/86473c71c9989fbd94051a54da760ad2f4d3ac4b.jpeg)

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 19, 2024, 8:52am UTC](https://forums.realmacsoftware.com/t/image-component-custom-aspect-ratio-fails-on-breakpoints/44305/2 "2024-08-19T08:52:00Z")

</div>

> [@anon68150607](#):
>
> I discovered a bug in the Image component, specifically with the Aspect Ratio custom setting. If you set it on the mobile screen, and then attempt to change the ratio at a different breakpoint (say, tablet or desktop) the image defaults back to the original size/aspect ratio.

This is one we’re aware of - it’s not actually a bug in the Image component, but rather that text inputs are not currently responsive.

> [@anon68150607](#):
>
> Also, in the properties the ‘sizing’ section includes the property ‘File Size’ with isn’t really a file size issue, but an image size/optimization issue. It’s a little confusing as it’s not entirely clear what it’s doing

Agreed that we need more clarity around this!

At the moment `Device` will generate a device sized image for each of the screen sizes setup in the Theme Studio.

This is ideal if the image is full width across all devices, and/or as a quick and easy way to get as close to correctly sized images as possible, without the user needing to manually enter the widths.

If you want more control over the generated sizes of your image then I recommend you use the Custom setting and enter a width manually for each device.

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [August 19, 2024, 2:22pm UTC](https://forums.realmacsoftware.com/t/image-component-custom-aspect-ratio-fails-on-breakpoints/44305/3 "2024-08-19T14:22:07Z")

</div>

Thanks @ben. Yeah, I think the ‘sizing’ section needs some love as it’s not intuitive yet.

The other thing I noticed is that if I choose an Image & Text element/component the options available to me for the image are much fewer than I would get with a normal image element.

This is indicative of a larger issue with the elements in that the properties available to each often feel very arbitrary, and ad-hoc. For core elements especially, it would be nice if the common ground between them was exposed in a more consistent manner; for instance why can’t I specify a background or a border on a container or a flex/flex item, but I can on a section? Why do sizing and spacing groupings often contain the same properties with different elements?

I’ve _slowly_ been working on an audit of all of the core elements and their properties (exposed, naming, grouping, etc) and I’m hoping to share it in a couple of days, along with some recommendations as to how to improve the overall user experience and expectations when working with elements in the editor.