Did you know that you only have three seconds to capture the attention of your website visitors?
If your product images haven’t loaded within three seconds, potential customers are going to hit the back button on their browser. You’ve just lost a sale!
In this blog post, I’ll show you how to optimize the images in your online shop for faster loading time.
Why Your Images Take a Long Time to Load on Your Website
There are usually two reasons why images take a long time to load on your site.
- Your image size is too big.
- Your image is the right size, but the file size is too big.
Both issues are pretty simple to resolve. It’ll just take a little extra time than what you’re used to.
However, taking out a few extra minutes to ensure your images are loading quickly for your customers could mean the different between losing a sale because your site takes too long to load, and getting that sale.
So you got your images back from the photographer, or maybe you took the photos yourself.
Now’s the time to upload the pictures to your website right? Nope.
An image your photographer sent you, or even one from your phone, is usually a really huge file and it’ll take a long time to load on your website.
Take a look at the two images I’ll be using in as examples in this blog post. The file sizes are over 1 MB each, which is way too big for a website.
I Try to Keep My Website Images Under 200 kb If Possible
But that’s not always doable. My rule of thumb is the smaller you can get the image size without losing quality, the better.
Here’s how to correctly resize and compress your images, so they load faster on your website.
How to Resize Your Images
In order to resize your images, you’ll need a Photo editing program for your computer.
I’m going to show you two programs you can use to do this.
- The first method I’ll show you will be using Photoshop.
- If you don’t already have Photoshop, you can download Gimp for free here to resize your images.
Click here to learn how to resize your product images for web in Photoshop
Click here to learn how to resize your product images for web in Gimp
How to Resize Your Product Images for Web in Photoshop
- Open Photoshop
- Go to File, Open, navigate to where your image is saved on your computer, and click Open
- Now, go to Image, Image Size
- Find the largest side your image has in pixels. If your units are set to something other than pixels, click on the drop down menu next to the size and change it.
- If the largest side of your image is less than 1024 pixels, you’re done and can skip to the next section by clicking here.
- If the largest side of your image is larger than 1024 pixels, set it to 1024. Your other side should automatically update once you make that change.
- Click OK.
- Next, go to File, Export, Save for web (if you’re using the latest version of Photoshop, it’ll also say Legacy.) Here you’ll be able to select your file type before saving.
- If you need your image to have a transparent background, you can save it as a PNG-24.
- If your image can have a background, saving as a JPEG at Maximum quality will work best as your file size will be much smaller.
- Once you’ve selected your file type, click on Save
Don’t use your saved image just yet! You’ll need to compress your image, click here to skip to the next section.
How to Resize Your Product Images for Web in Gimp
- Open Gimp
- Go to File, Open, navigate to where your image is saved on your computer, and click on Open
- Go to Image, Scale Image
- Find the largest side your image has in pixels (px.) If your units are set to something other than pixels, click on the drop down menu next to the size and change it.
- If the largest side of your image is less than 1024 px, you’re done and can skip to the next section by clicking here.
- If the largest side of your image is larger than 1024 px, set it to 1024. Your other side should automatically update once you make that change.
- Click Scale.
- Next, go to File, Export As, go to the bottom of that box, and click on Select File Type (By Extension.)
- Scroll down to the image type you’d like to save as. If you need your image to have a transparent background, you can save it as a PNG, if your image can have a background, saving as a JPEG at maximum quality will work best as your file size will be much smaller.
- Once you select your image type, click on Export.
- Next you’ll select the image quality or transparency if you selected PNG. I set my image quality to 100.
- Once you do that, click on Export.
Don’t use your saved image just yet! You’ll need to compress your image.
Take a Look at the Difference in File Size
Here are my original images before resizing them, notice the file sizes:
Here are the images after I resized my images:
I got the file sizes down significantly by resizing my images, but I can get it down even more by compressing the images.
How to Compress Your Product Images for Web
Compressing an image just means you’re making the image size as small as possible without losing the quality of the image.
It sounds complicated, but it’s easier than resizing an image.
I use TinyPNG because it’s free and only takes a few seconds. Don’t worry about the name, the site works for PNG or JPEG images.
- Visit tinypng.com
- Drop your images in the proper place and it’ll automatically compress them for you.
- Download your image(s.)
Now my pictures are 76% smaller than they were. That’s the power of compressing an image.
By the way, my mug2 image is still a little over 200 kb, but that’s fine. It’s because the image uses a dark background. If I wanted to, I could shrink the image down a little bit in Photoshop (to like 1000px) to see if it helps, but that size should still be fine.
I still got the image sizes down significantly and that was the goal.
Wrapping Things Up
A slow loading website will cause visitors to leave your site without buying anything. One of the easiest ways to speed up your website is to optimize your images.
By resizing and compressing your images you’ll cut down your website loading time significantly.