Blog

Optimizing Images for Your Shopify Plus Store

February 24, 2023
7 min read

Many factors affect a site’s load time. One of which is image size - your e-commerce store might have stunning photography, but your slow-loading pages mean you could be losing potential customers. Enter image optimization. Optimization is about reducing file size without reducing the visual quality or clarity, resulting in beautifully clear visuals that don’t slow down your website.

Why optimize your images?

More often than not, bulky image file sizes impact your site speed. And so, optimizing these images will improve your site performance. For example, smaller file sizes require less storage space, so sites load faster. Websites can also handle more content more comfortably when each image or video takes up less space. Optimizing images, when done successfully, will reduce their file size but maintain their quality. In fact, optimizing your images might actually improve their clarity.

In some cases, big files are automatically compressed by your type: embedded-entry-inline id: c1Udzb8wUc5s0faOjB32Uun, like Shopify and WordPress. If you’ve ever uploaded a beautifully crisp (but large) image to your CMS and it comes out looking blurry, it could be that their automatic compression of the image reduced its quality. You can do a much better job optimizing it yourself before uploading the image.

Optimizing images can result in a faster website, providing a better user experience - who wants to wait for images to load when trying to scroll through smoothly? But, rather than a simply poor user experience, the impact of a slow website is more significant than you expect.

As a page’s site speed goes from 1 to 3 seconds, the probability of type: embedded-entry-inline id: c7yCdR8MBrNwOJSXX8Dzanp increases by 32%. When this changes from 1 to 10 seconds, the chance of a customer bouncing increases by 123%. So, every second counts when it comes to user experience - and keeping users on your site.

Google has used site speed as a ranking factor since 2018, meaning that faster sites are likely to be ranked higher up in the search results. Therefore, this makes site speed and image optimization a matter of type: embedded-entry-inline id: c1SrKsXWOadgXg7UdMPl4wq

What you need to know before optimizing

When it comes to images and videos, there are many different file types, but it’s not always immediately clear what the correct type to use is or the difference between them. Each file type was created with various intended applications and therefore works best for different kinds of images or videos. But before you hit the panic button, we’ve broken each type down with its purpose and recommended sizing:

File types

  • JPEGs should be used for photographs.
  • PNGs are also the correct file type for images that include text or graphics. In addition, you can use PNGs when images have transparency, for example, a transparent background.
  • SVGs are used for icons and logos. SVGs can grow and shrink because they use vectors, not pixels. Therefore, the size of the SVG is less critical and won’t need to be optimized. As a result, SVG files are usually very small.
  • MP4s are the most compatible video format and can be viewed on most devices.
  • GIFs tend to be substantial file sizes. So, where possible, use an MP4 instead.

Tip: In Photoshop, you can open one file type, e.g., a PNG, and save/export it as another, e.g., a JPG.

File sizes

  • Ideally, you’d use images under around 200KB file size. Keep this in mind for JPEGs.
  • But PNGs are always bigger files. Aim for less than 500KB but definitely no more than 1MB.
  • MP4s will also be larger, of course. Depending on the use case, aim for less than 5MB.

Resolution

  • Resolution refers to the number of Pixels Per Square Inch or PPI.
  • Interestingly, PPI doesn’t affect image quality or file size (for digital media). However, it is helpful to stick to a standard PPI, as mixing media with different PPIs can be an issue. This is why we still recommend 72ppi. Pixel size is the most valuable thing to mention - see Dimensions below.  

Note: You won’t be able to improve the resolution of an image. For example, increasing the size of a JPG will only stretch it out, causing it to become pixelated or blurred.

Dimensions

For most landscape JPGs, we recommend a width of 1920px minimum if you want it to be full-width on your site. 1920px is the size of a wide-screen monitor - any smaller, and an image would have to stretch further than its dimensions to fill it, which causes them to become pixelated or blurred. Go for larger dimensions for better clarity on bigger and higher resolution screens. Moreover, consider exporting images at double the full-screen size if you’d like to be able to zoom into the image and maintain clarity, e.g., for a product image in a product gallery.

Optimizing your images for digital use

Optimizing JPEGs

Photoshop

The best way to optimize a JPEG is in Photoshop.

  • Go to Image> Image Size.
  • Resolution = 72 Pixels/Inch.
  • Width = 1920 Pixels (the width of a widescreen monitor).
  • Click ‘Done.’
  • Go to File> Export> Save for Web.
  • Preset = JPEG.
  • Quality ~ 50 (make a judgment based on the quality of the preview).
  • Go as low as 30 if necessary to reduce file size. (seen in the bottom left beneath image preview).
  • Go higher to increase the visual quality.
  • Image Size/Width = 1920px wide. (This should already be set from the Image Size choices).
  • Save.
  • The resulting image from the examples is 329KB, down from 1MB.

Without Photoshop

You can achieve most of the above without Photoshop simply by changing the image size.

  • Open your image in Preview or a similar program.
  • Go to Tools> Adjust Size.
  • Resolution = 72 Pixels/Inch.
  • Width = 1920 Pixels.
  • Click ‘OK’.
  • The resulting image from the examples is 838KB, down from 1MB.

Alternatively, you can upload your image to tinyjpg.com and download the resulting file.

  • Go to tinyjpg.com.
  • Upload your large image.
  • Download the reduced image.

Optimizing PNGs

Tinypng.com

The best and easiest way to reduce the size of PNGs is with an online tool like tinypng.com.

  • Go to tinypng.com.
  • Upload your large image.
  • Download the reduced image.
  • The resulting image from the examples is 787KB, down from 2.8MB

Photoshop

If your image is above 5MB (the maximum size that tinypng.com will accept) or you want more control over how it is optimized, you can do this in Photoshop.

  • Go to Image> Image Size.
  • Resolution = 72 Pixels/Inch.
  • Width = 1920 Pixels (the width of a wide-screen monitor).
  • Click ‘Done.’
  • Go to File> Export> Save for Web.
  • Preset = PNG-24 (No further options, just save - it doesn’t optimize the image as much).
  • Preset = PNG-8.
  • Number of colors = 256.
  • Dither = 100%.
  • Reduce these to reduce file size, but will also reduce picture quality.
  • Save.
  • The resulting image from the examples is 808KB, down from 8.1MB.

Optimizing Videos

HandBrake

One of our favorite tools for optimizing videos is HandBrake. It is straightforward and effective at reducing the file size of videos and even converting the file type.

  • Download HandBrake.
  • Open Source> Choose the video you’d like to optimize from your files.
  • Format: MP4 File.
  • Preset: General> Fast 1080p30 (If the file is still too large, go down to Fast 720p30 and so on).
  • Check the dimensions are correct under Dimensions. You’ll probably want to set cropping to custom so you can enter 0 and tick ‘Keep Aspect Ratio.’
  • Choose where to save with ‘Browse.’
  • Click ‘Start.’

Batch Optimization

Photoshop

Most successful sites will likely include a lot of imagery. This is true even more for e-commerce sites with at least one image for each product. However, optimizing all of these images does not need to be the big job that it might initially appear to be.

With Photoshop, you can easily apply the above optimization steps to a whole folder of images at once. This is known as batch optimization.

  • Open one image to start with. Then, use this image to record an action that we can apply to the images folder.
  • Window> Actions (This will open a panel recognizable by a play icon which we can use to record an action).
  • Click the plus symbol in this panel to ‘Create new action.’
  • Name your action ‘Batch optimization’ or similar and click ‘Record.’
  • Complete the above steps from Optimizing JPGs> Photoshop. This will end with exporting your image to the web, at which point you should create a new folder to save it in called Optimized or something similar.
  • Click the stop icon on the Actions panel to stop recording.
  • Go to File>Automate>Batch.
  • Play> Action: Select your action. I called mine ‘Batch Optimization.’
  • Source: Folder.
  • Choose the folder of images you’d like to apply your action to.
  • Destination: Folder.
  • Choose the folder you created. I called mine ‘Optimized.’
  • Click ‘Override Action “Save As” Commands.’ This is because we included saving as part of our action.
  • Click ‘OK.’ You’ll be able to find your optimized images in your folder ‘Optimized.’

Conclusion

We hope we have provided you with clarity when choosing a file type and showed you that optimizing images doesn’t have to be difficult, even when you have hundreds of product photos to optimize.

Why not bookmark this article for the next time you need to optimize images before uploading them to your site? The simple steps above protect your site against site speeds slowing and users bouncing, improving your conversion rate.

If you’re ready to improve your site’s conversion rate and are looking for an experienced and skilled UX team, get in touch.

Authors

Subscribe to our newsletter

Be the first to hear about what’s hot in e-commerce and Shopify Plus. Straight to your inbox.