Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi, I have a site on PageSpeed where the desktop is 96% performance and the mobile is 75% performance and it shows the LCP as being 5.8s, I have reduced the picture sizes with TinyPNG and gone through manual modification. On reading and watching various videos, it shows that you can add smaller pictures and assign them to the mobile only is this possible on Shopify? The site is www.thewelshproducestall.co.uk
You'll see a benefit from adding `fetchpriority="high"` to the first few images that load visibly on screen, along with removing `loading="lazy"` from those images.
As for different sizes based on display, It's possible, I would read the following: https://performance.shopify.com/blogs/blog/responsive-images-on-shopify-with-liquid and https://stackoverflow.com/questions/30460681/changing-image-src-depending-on-screen-size Getting it to integrate cleanly with your theme is possible.
You don't have to render smaller pictures for mobile manually in Shopify, Most of the Shopify themes come with an image secret option (the option you asked for)