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?
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.