How to Optimise Photo Sizes for Use on Websites
This FAQ will show you how to resize photos so that they load as fast as possible on your website, while still looking professional, crisp and clear. We’ll also show you how to add your logo as a ‘watermark’ at the bottom of your photos. All this can be done in batches, saving you a huge amount of time on photo editing.
Why Do I Need to Resize Photos?
Your average digital camera or smartphone will take a photo and store it in quite a large resolution (large dimension) e.g. 3,000px on the longest side. So what does that mean exactly? Consider the size of your computer or laptop screen (you can check this in your computer settings). The resolution on my laptop for example is 1366px x 768px and that’s pretty typical for a smaller laptop screen. Now let’s consider that average photo size of 3,000px. That’s more than TWICE as big as my laptop screen. As you can imagine that’s way bigger than it needs to be for a website, so we can safely resize it to a suitable size for a website.
What’s a Suitable Size Photo for a Website?
If my laptop screen is 1366px (I’m just using this as an example) then a photo might be about that size to fit the full width of my screen. We would want an e-Commerce product photo to occupy approx 1/3 of the width of the page, which for my laptop would mean a product photo width of 455px. Therefore we’d resize the photo to 450px or 500px width, ready to use on your website.
If you have a standard website and you’d just like to show large-ish photos along with your text, you might want to set the longest side of your photos to 500px (test this size to see what that size looks like and adjust your future resizing accordingly).
How to Allow for Product Zoom
Taking the above example of a product photo on my laptop, where the product photo is 455px wide, we need a photo which is X times bigger than that to allow for a zoom. Let’s say you want your zoom to show an image which is three times bigger than the standard image: that means the image for the zoom must be 3 x 455px = 1365px wide. If you want your product image to zoom to show an image twice as big as the standard image then your product images need to be 2 x 455px = 910px. It stands to reason that if you use a product image that is narrower, the same width, or slightly larger, then the zoom will not work as there’s nothing to zoom in on.
Image Dimension vs Image Size
Image dimension is width x height and is always referred to as ‘size’ which is slightly misleading. The image size is actually the file size which can be easily seen in Windows explorer as shown in the example below. When you change the dimensions of a photo to make it smaller, this also makes the file size smaller. A typical photo taken on your smartphone might be 3MB whereas a resized photo might be just 200KB (more about this below).
Why is it Important to Resize Photos?
How many times have you visited a website and got fed up waiting for the page to load, so you left? Slow loading websites usually mean that the page size is too big and it therefore takes a long time for all the elements of the page to load.
Now imagine if you have a page showing 10 photos that you didn’t resize and the average size of the photo is 3MB. That’s 30MB worth of photos that you have to sit waiting for. Now if you resize your photos to approx 300kb per photo then that’s 3mb for all of your photos combined, which is going to be a LOT faster to load when someone is viewing your website.
Slow loading websites are even SLOWER when you view them on the tiny screen of a smartphone. Bear in mind that these days more than half of your website visitors might be viewing your website on a smartphone.
It’s not just your user’s experience of your website loading speeds that matters: loading speeds play a direct role in how your website is ranked by Google. Slower loading websites are penalised and appear lower down the search results.
How to Batch Resize Photos
Step 1
Download and install FastStone Photo Resizer which is free and can be used for resizing and adding watermark logo in batches: FastStone Photo Resizer.
Launch FastStone Photo Resizer and you’ll see a window like the one below.
A. Navigate to where your photos are on the left and then use the buttons in the middle to add selected (or all) photos to the window on the right.
B. Choose to save your edited photos in a different folder (or uncheck to save them in the same folder).
C. You can re-name your photos which is always a good idea for easy management in your website. In the example above the first photo will be renamed filename-001 and the second photo will be renamed filename-002 and so on.
D. Click the ADVANCED OPTIONS button to get to the all the resizing and watermark options (check step 2 below).
Step 2
- Choose to resize your photos so that the longest side is 800px. This is a standard size we use on all of our website projects and will suit most requirements (unless you want to use a zoom feature on eCommerce products then you should resize to approx 1500px).
- Add a watermark if required. Why would you want to do that? You can use it to make copying your images more difficult and/or you might want to let people know where to find your product if they only see your photo e.g. if someone has copied and pinned it on Pinterest.com and there’s no link to your website anymore. Potential customers who love your product would otherwise have no way of knowing where they could buy it from.
- Now click on OK at the bottom and you’ll return to the default window. After you’ve set everything then click CONVERT at the bottom. You’ll see a confirmation along with a log reporting how much space you saved by resizing the files (smaller filesizes means faster page loading speeds).
You can use the newly saved files in your website either via the standard text editors OR if you’re replacing existing photos then you’ll want to do this directly using FTP (Elan Creative clients can ask us to assist if they’re not sure).
