Menu Hire us

How To Opitimize Images For Your Shopify Store

Optimizing images for faster site load times

IMG
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.
Example of export dialog in Apple's Preview application

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?
IMG1
IMG1

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?
IMG3

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

Optimize image file size

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.