Resize regular page images for mobile devices

[MitchellFly]

Hi all!

I was wondering if there's a way to automatically ensure our dimensions remain the same between our desktop images & the same images when viewed on mobile. The page in question is: https://footyintl.com/pages/our-story

When viewed on desktop, the rectangular image looks great. When viewed on mobile, it appears that Shopify edits the dimensions to be square, which distorts the images. Is there a way that we can code in our dimensions to be the same when viewed on mobile vs. desktop?

Thank you!

[Roostcollection]

Both images on mobile were distorted. Check the resolution of your images. If you can size them prior to loading shopify will not have to adjust.
Set them to 72dpi. then save them as a jpg file with image quality set to no more than 8. this will give you a file size 370k.

You can always use https://compressjpeg.com/ to reduse file size.

I attached a screenshot saved as stated.

[MitchellFly]

Hey Roostcollection,

Thank you for the response! I believe ours are already saved to DPI with similar file sizes. I was thinking more along the lines of changing the dimensions when viewed through mobile, rather than changing the actual data storage size.

[Roostcollection]

The only other thing would be does your theme have any constrain proportions in the settings. Because the image I took was square but the mobile still changed the proportions.