# Image size per breakpoint

**URL:** <https://forums.realmacsoftware.com/t/image-size-per-breakpoint/50776>\
**Category:** Elements\
**Created:** [September 3, 2025, 8:32pm UTC](https://forums.realmacsoftware.com/t/image-size-per-breakpoint/50776 "2025-09-03T20:32:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajenks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ajenks/32/34693_2.png) [@ajenks](https://forums.realmacsoftware.com/u/ajenks)\
**Post date:** [September 3, 2025, 8:32pm UTC](https://forums.realmacsoftware.com/t/image-size-per-breakpoint/50776/1 "2025-09-03T20:32:07Z")

</div>

I’m trying to get my mobile loading speeds up, right now I’m loading desktop versions of my images on all breakpoints. I haven’t been able to figure out how to load a smaller version of an image for mobile. Need some direction, thanks

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [September 3, 2025, 8:58pm UTC](https://forums.realmacsoftware.com/t/image-size-per-breakpoint/50776/2 "2025-09-03T20:58:41Z")

</div>

If you really, really want to use different image sizes at different breakpoints, you can do this by using a source field (remote resource) as this supports breakpoints.

 ![CleanShot 2025-09-03 at 9 .54.41@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/a/4a06dbd8ee25ab14df1b021ca98d08abcbbefa5b.png)

Hope that helps 🙂

---

<div class="post-metadata">

**Author:** ![ajenks](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ajenks/32/34693_2.png) [@ajenks](https://forums.realmacsoftware.com/u/ajenks)\
**Post date:** [September 3, 2025, 9:51pm UTC](https://forums.realmacsoftware.com/t/image-size-per-breakpoint/50776/3 "2025-09-03T21:51:50Z")

</div>

I seen that there and was going to do it that way, but I have no option to right click and copy the image url of the images I have in the Resources like I did in RW.

---

<div class="post-metadata">

**Author:** ![PLM](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/plm/32/31094_2.png) [@PLM](https://forums.realmacsoftware.com/u/PLM)\
**Post date:** [September 3, 2025, 10:08pm UTC](https://forums.realmacsoftware.com/t/image-size-per-breakpoint/50776/4 "2025-09-03T22:08:51Z")

</div>

[https://pagespeed.web.dev/](https://pagespeed.web.dev/) is always complaining: “This image file is larger than it needs to be (1200x900) for its displayed dimensions (396x297). Use responsive images to reduce the image download size.”

How for mobiles?

---

<div class="post-metadata">

**Author:** ![PLM](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/plm/32/31094_2.png) [@PLM](https://forums.realmacsoftware.com/u/PLM)\
**Post date:** [September 4, 2025, 4:35pm UTC](https://forums.realmacsoftware.com/t/image-size-per-breakpoint/50776/5 "2025-09-04T16:35:59Z")

</div>

I would like to have a smaller photo for mobile and a larger for tablet, laptop, desktop (original). Adding a small grey/blue overriding spot also for vertical mobile might solve the problem? @ben

I have been testing Sizing Type: Custom, but not being able to override vertical mobile makes it complicated.

Or is it perhaps be better to use Resource Type: Custom and use different files? As mentioned above. Also adding a small grey/blue overriding spot for vertical mobile.

 ![sizebilder](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/9/49c47ce047e8a608d367ddc3374f3daa330767f9.png)