I was wondering if anyone had a take on the image file size versus load speed?
We moved to a new theme and uploading images at maximum size is suggested (relying on Shopify to then compress). However, since moving over, we’ve seen the speed of the site (via themes using Google Lighthouse performance metrics) drop my a good 20%.
It wont be the only factor, but having spent years editing packshots to 1200x1200 and a reasonable size in kb, uploading a big 5MB + file seems counter intuitive.
Larger file size makes the page load slower.
Here are tips based on my experience:
Compress images to remove all the extra meta data + crunch the image data. This keeps the quality the same but with a smaller file size. Here’s a guide to compress images the best way for Shopify: https://speedboostr.com/how-to-compress-images-on-shopify
Lazy load images below the fold, this prevents them from loading until the user scrolls, making them not contribute to page load speed. Here’s a guide if you’re not familiar with lazy loading: https://speedboostr.com/shopify-lazy-loading/
Use srcset on above the fold images to load different sized images for different screen sizes. Just ask your developer about this and they can convert the image code to implement this tactic.
Set your max image size in the code (using Shopify image filters and srcset) to 1x - 2x the maximum possible screen size. For example, typical mobile devices aren’t going to be more than 500x wide, so if you’re loading a 2000px image there, you’re wasting a lot of file size. 1x is a good balance, 2x is for best possible resolution on devices with retina display.
If you don’t have a developer, and need help on any of those steps (possibly step 1 - 3, depending on your level of technical expertise) feel free to reach out to my team at speedboostr.com/contact.