The images you use can dramatically affect the performance of your website. You can optimise images to improve the experience for your visitors.
Here’s a quick checklist you can use to help you upload appropriate images for your store:
- Resize your image to the correct size. It only should only be the maximum size it can be displayed at on a visitor’s screen. A 1000 x 1000 image displayed in a 500 x 500 container is 4 times bigger than it needs to be!
- Check you’re using the appropriate image format. Use GIFs and PNGs for small images with a limited palette, transparency (and animation if needed) like logos, icons and design elements. If you’re optimizing a photo, screenshot, or a similar image asset use JPEG (jpg). Try several JPEG quality levels to find the best quality vs. filesize tradeoff for your asset.
- If your image editor has an option to ‘save for web’, use it.
- Remove any unnecessary metadata (e.g. geo information, camera information etc.)
These are just a few of the techniques we use to optimise images. To maintain a good PageSpeed Insights score, check these tips before uploading any images.
For more information see this article that explains reasons why it’s important to optimise images, and how to do it: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization