Optimizing images for faster site load times
Websites are image-heavy these days, but every customer isn't running on a gigabit speed internet connection, so it's still important to make those image files as small as possible to speed up load times. Your site has hundreds or thousands of images. By shrinking file sizes across the board, even by a little bit, you'll significantly increase load time speeds. And customers are super into speed. Striking a balance between good looking images and a site that takes forever to load can be tricky, but here are some tips to help.
Image Sizes
The first problem we often see is people using way too large an image size on their site. We recommend saving product images as 3000 x 3000 pixels at 72 dpi (dots per inch). Sliders and other images on your site will depend on your theme, but in general, there's rarely a need to be over 3000 pixels wide.
File formats
Image size is different than file size, and file sizes are largely dependent on the file format. Most people would have to use a lifeline on Who Wants To Be a Millionaire (is that show even still on the air?!) if asked the differences between TIFF, JPEG, PNG, GIF, BMP, etc. file formats, so let's just skip all the technical jargon and get to the point: If the image doesn't have any transparent parts (like, for instance, your store's logo might), it should be saved as a JPEG (or JPG...they're the same thing). That means all product images, sliders, collectgion images should all be saved as JPEGS.
Exporting your JPEGs
The JPEG file format is compressed, but you can choose the level of compression in almost any image editing software. In general, you can always export at 90% quality and won't notice a difference with your naked eye. But as this really cool interactive blog demonstrates, depending on the content of the image, you can get away with exporting at a significantly lower quality setting without seeing a difference.
That file size savings will definitely be noticable though. Take these two images, for example. Can you tell which is compressed at a lower quality?
The top image is compressed at 80% quality, while the bottom is full quality JPEG. The top image is a 466KB file size while the full quality version below is 2.6MB. It's more than 5x larger! And here's the same image compressed at 50% quality. Notice a difference yet?
This one is only 220KB, half of the 80% quality version at the top. You'll have to play with it a little to get the hang of it, but massive file size savings can be found by changing the JPEG compression levels.
Further compress with something like ImageOptim
ImageOptim is a simple and free application for Macs that further compresses your images without quality loss by ridding them of metadata. We use it every day at Rehash. There are alternatives online, though, if you're not using a Mac (or just don't trust our recommendation...rude). They can take that already shrunk file and save a little more space. You should run every image through something like ImageOptim before uploading to Shopify. Here's how:
Download and install ImageOptim
- Download ImageOptim
- Unzip the downloaded file by double clicking it
- Drag ImageOptim.app to your Applications folder
- Now that the ImageOptim app is in your Applications folder, create a shortcut by dragging it to your dock.
Optimize image file size
- Drag images to ImageOptim in the dock to shrink their file size. You can drag a single image, or multiple images at a time.
- You'll see the percentage of file size reduction in the right column
That's it! You're done. ImageOptim compressed the file and saved it where it was originally. One caveat...it doesn't work with the current version of Google Drive Sync, so store your images elsewhere before dragging to ImgageOptim.
Every little bit counts
Your site probably has hundreds or thousands of images. By shrinking file sizes across the board, even by a little bit, you'll can increase load time speeds and decrease customers closing their browser windows because they're tired of waiting for images to load.
