💫 This post is part of Luna’s Launch Checklist series which are resources to support designers while using the Shopify Store Launch Kit. 💫
In the rush to add products and start the fun part of designing and building a Shopify store, it’s easy to forget about image optimization. Website images need to be resized and compressed before uploading to improve website load speeds (and keep site visitors happy!). You never want customers to be waiting for images to load because they’ll most likely close the tab and move on to other things.
This article will explain some of our favorite tools to quickly optimize images by first resizing and then compressing.
When I get photos from a client, I look them over and check the dimensions and size to get an idea of what I’m working with. You can do this with right click > Get Info. If images are coming from a decent camera, then they could be around 5000px wide, and have a large file size. Then I know I have some work to do!
If you consider that a 16″ screen is about 1800px wide, and 99% of website visitors to an e-commerce store are likely using a device within that screen size, then there is little reason to have images larger than that.
For full width images like a hero image or image banner, I size images to a width of 2000px.
For product images, on most themes these take up less than half the screen width on desktop. For this reason, I use a size of 1000px wide. If I needed to enable the theme’s magnify tool on the product page because there are small details that need to be shown, then I would upload the image with a width of 2000px.
Image Resize Tools
If you’re on a Mac, you can resize images one by one from the Preview app. Just go to Tools > Adjust Size. There you have the flexibility to lock or unlock the proportions, change the resolution and preview the file size before creating the change.
2. Shopify’s Free Image Resizer
Shopify’s image resizer tool is a free tool to quickly resize a small number of photos. I like that it automatically suggests the “Compact” and “Medium” sizes that are around 1000px and 2000px respectively, which are good sizes for two different purposes as I explained earlier. Some reasons I don’t love this tool is because using it is quite clunky: You can only upload 6 images at a time, then you need to download each image seperately by first clicking download, and then right clicking to save (rather than them going directly to my Downloads folder as I would expect when clicking Download) and finally, because the tool renames the images, I then need to rename the images back to what they were. It’s a decent free tool but there are lots of improvements to be made (are you reading this, Shopify?).
Photoshop is the best tool for batch or bulk edits. If your client has given you 100 photos all 5000px wide, then you can batch re-size them in just a few minutes. Go to File > Scripts > Image Processor. Select the folder with the images to process, and select to save the processed images to the same folder (a new sub-folder will be created). Set the file type, quality and size, and click Run. All your images will quickly be resized.
Note that if you have both portrait and landscape images, they’ll take on the same smallest dimension, leaving you with different sized images. For example, if I set the width to 1000px and the height to 500px, Photoshop will prioritize the smaller number (the height in this case) and all images will have a height of 500px. This means that my landscape images will have a width of greater than 500px, and my portrait images will have a width of less than 500px, rather than assuming the same dimensions as one another.
Ideal Image Size
Your website images need to be the perfect size so that they don’t look pixelated and low quality, or too large so they slow down your page load time. This means you need the image to be the largest dimensions (in pixels), but the smallest file size (in megabytes). So how do you get to the sweet spot in the middle? It’s a tricky balance.
When saving images, you want to be sure to use the appropriate file type. JPGs have a much smaller file size than PNGs, so only export PNGs when your image requires a transparent background.
You need to get the highest dimension in pixels (px), and the lowest file size in megabytes (mb) or kilobytes if less than 1mb (kb). The optimum sizes depends on the use. Ideally you shouldn’t go above 1mb, but for a page with lots of images, you really don’t want to go above 500kb.
PPI (pixels per inch)⠀
Something else to consider is the PPI. Sometimes you can quickly reduce the size of the image file by reducing the PPI. 300ppi is the minimum for print, so you really don’t need larger than 150ppi for web.⠀
Image Compression Tools
1. Photoshop & Lightroom
If you’re an Adobe CC subscriber, these two tools are built for the job! When doing bulk resizing (as described earlier), Photoshop also allows you to select the quality of the images before export.
I love using Lightroom because I also have the opportunity to crop and straighten images nicely and ensure that they’re all using the same aspect ratio. On bulk export, I can also choose the quality of the images.
TinyPNG is an amazing, user-friendly tool for reducing the file size often up to 90%. On the free plan, you can drop 20 images in and download them all into a folder when they’re done compressing. There is an image size limitation but any time that I’ve first resized the image, there has been no problem. I use this tool daily because it’s so fast and easy! Also, those pandas make me happy.
I use all of the tools listed above. I choose the best tool depending on how many images I’m uploading, if the images need to be cropped or straightened and the amount of time I have to get things perfect.
Image optimization is the least fun part of building a website but is something that’s worth doing at the beginning to improve website performance, and to make your website accessible to people with slower internet speeds.
Once you’ve added images to Shopify, don’t forget to add alt tags to each one to improve the website’s SEO.
Do you have a favorite tool for image optimization? Tell me in the comments below!
If you found this helpful, you might like to check out our Shopify Store Launch Kit.