Performance issue with the lack of ability to resize/crop images uploaded in theme settings
Currently, when users upload images in the theme settings, there are no way to resize/crop them in the code and manipulate them which causes some performance issues. We can do it with images uploaded to products, categories and blog, but not the theme setting ones.
Performant websites need multiple different image formats for multiple different devices. For example, a banner can and should have at least 4 images sizes: 1 for mobile devices, 1 for tablet, 1 for standard definition desktop and another 1 for high definition desktop (4k/retina screen). We can add even more in some scenarios. We can always, as theme authors, add 4 images fields for each image in the theme settings and ask the users to crop them themselves in photoshop, but this isn't a viable option and would make the theme settings a major pain to use.
Right now, when using a single image upload field, we basically have to pick one size to upload and sacrifice something. For a pretty website, we'll tell the user to upload a large image that looks great on all screens, but this causes poor performance scores, specifically on mobile screens. We can tell users to upload medium images that look good on normal screen, bad on high definitions screen, but with a better performance on desktop, but still not great on mobile.
If Lightspeed would allow us to use the
url_image method on images uploaded to the theme settings, it would fix all of this and make the user experience much better for all. (https://ecom-support.lightspeedhq.com/hc/en-us/articles/360019297314-3-d-Rain-Images). Right now this is only available for product, categories and blog images.
This article from 2014 explains responsive images pretty well: https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/