Right-sizing Your Photos for the Web

Image Resizing Example - Picture at 1024 pixels wide

Image Resizing Example - Picture at 1024 pixels wideMany of us post our photos to the web, and the question often arises as to what size photos should be used. If you post pictures with file sizes that are too large, you will bog down your website and make users (and search engines) unhappy. At the same time, you want your photos to look as good as possible.

I have good news – the answer is pretty simple. It will, however, depend on where you are uploading your photos. Very often you won’t need to resize them at all, and when you do the process is easy. In this article I will show you what you need to know about resizing your photos and, for those occasions when you do need to resize them, I will show you how to do it in Photoshop and Lightroom.

Uploading to a Web Gallery

If you are publishing your photos to a web gallery offered by a service such as SmugMug, SquareSpace, or even Flickr, you don’t need to worry about resizing your photos at all. The service will resize the photos for you. Just upload the largest JPEG files you have to the website. The service will resize them for you, and will even create different sized photos for use as thumbnail images and for use on mobile devices.

The same holds true for social media sites such as Facebook and Instagram. They will resize the photo by greatly reducing it (oftentimes much more than you would like). Just upload full sized JPEGs and everything will be fine.

If you are uploading to one of these services, which I recommend doing, you will never have to think about resizing your photos for the web. I personally uploaded my photos to SmugMug for years and never even thought about resizing my photos. I didn’t have to, until I started using WordPress for this website.

Uploading to Your Own Website

If you are creating your own website, including using a blogging platform such as WordPress, you will need to resize your photos. The file sizes of the JPEGs that come out of your camera (no matter what camera you are using) will be too large and will bog down your website.

How small should you make the files for your website? Probably a lot smaller than you think. There are two variables you control (and I will show you how to control them later in this article):

  • the size – measured in pixels; and
  • the quality – measured as a percentage.

First  I will show you how to determine the proper size and quality of your picture, then I will show you how to go about setting them.

1. Size

To determine the proper size of your picture, the first thing you should do is determine the width of the content area of your website. This may require some digging on your end, as different sites have different widths. For example, on this website, my main content area for articles is 1024 pixels wide. Therefore, it makes no sense to have pictures any wider than that. So immediately I know that I should reduce all pictures to no more than 1024 pixels wide.

Other websites will use smaller content areas, usually because they include sidebars and other content areas. For example, I write for Digital Photography School and their main content area is 750 pixels wide (until recently it was only 600 pixels wide). Therefore, DPS does not use pictures that are more than 750 pixels wide.

Remember that these are maximums. You may want your picture smaller than the actual content area. In that case, just decide what percentage of your content area you want the picture to fill, then set the size based on the percentage of that content area.

2. Quality

Once you decide how large you want the picture, you still get to control the quality setting, which will further determine the size of the picture. Reducing the quality percentage reduces the size of the file, which is a good thing. The effects of mild to moderate reductions in quality are not noticeable.

Further, a reduction in the quality percentage will result in a higher percentage reduction in file size. In other words, decreasing the quality percentage by 5% (say, from 100% to 95%) will result in much more than a 5% reduction in file size. Every 5% reduction in quality reduces the file size by about 15%, although this reduction tails off the more you reduce the quality.

How much should you decrease the quality percentage of your images? There is no set rule here, you just have to use your own judgment.

As a guidepost for you, the folks at Digital Photography School – who know a thing or two about how to size photos – only allow photos on their website of up to 200 kilobytes (KB). Even after reducing the image size to 750 pixels on its long side (their maximum size), I often have to reduce the picture quality to somewhere between 70 and 90% in order to get the file size under 200 KB.

I am more forgiving on my own website because I don’t have the volume of pictures (or traffic) that DPS does, do I allow my pictures to be a little larger. Still, I try to keep them at around 200 KB and never let them go over 450 KB. I find that my pages still open quite fast that way.

Again, there is no hard and fast rule with quality percentages. I will have a few examples below that will give you an idea of how your files might look after they have been reduced. I think you’ll be surprised at how little difference you see in the reduced files.

3. File Size

The main point to take away is that the photos you post to the web should be measured in kilobytes (KB) and not megabytes (MB) when they are posted to the web. The typical Raw file that comes out of my camera is about 24 MB, and even when I convert the file to JPEG it is still routinely 7-10 MB. That’s way too large for a web file. It does you no good, and bogs down your system.

Examples

As an example of what I am talking about on this page, below are some different versions of the same picture.

Large vs. Extra Large

First, as a starting point, the top of this page is a picture I recently took at Torre Pines State Natural Area in California. I resized the picture to fit the content area of this website, which is 1024 pixels wide. In addition, I also reduced the quality setting to 80%. That resulted in a file size of 450 kilobytes.

For comparison purposes, I have also posted the same picture below, but twice as big. This picture is 2048 pixels wide and I kept the quality setting at 100%. That resulted in a file is of 3.8 MB, which is about 8 times as large a file size as the picture at the top of the screen.

Take a look at both pictures. (I know they are not side by side, but I will have such an example below). Can you tell much difference between the picture below and the one at the top of the screen? I am guessing you cannot.

Resizing example - picture twice the size of my website

The increased size in pixels obviously does nothing for you. The screen width is only 1024 pixels, so having the picture wider does no good. The increased percentage does not help either. As a further demonstration of that, lets check out the same picture at different quality settings.

Different Quality Settings

Now let’s look at another example, this time using pictures that are side by side. The 4 pictures below are the exact same size, but of very different quality. Specficially, each of the pictures below are 512 pixels wide, but has a quality setting of:

  • 100% quality setting (234 KB file)
  • 80% quality setting (115 KB file)
  • 60% quality setting ( 70 KB file)
  • 40% quality setting (44 KB file)

I have mixed them up. Can you tell which is which? Once you have your guess, compare it to the answer in the caption below.

Resizing example - pictures with different quality settings
The 100% picture is bottom right; the 80% picture is top left; the 60% picture is top right; and the 40% picture is bottom left.

Were you able to determine which was which? If you are like me, you could not. I do not see much difference in these pictures.

Yet the smallest of them is only 25% of the file size of the largest picture. Therefore, the point of all this is that you probably do not need to be too worried about reducing the file size of your images before posting them to the web.

With that in mind, let’s go through how you resize your photos.

How to Resize Your Photos

When you need to resize your photos, how do you do it? That depends on what software you are using. Either Photoshop or Lightroom will do a good job at this, and you do not need any separate resizing software.

Here’s how to do it in each program:

Resizing Photos in Photoshop

In Photoshop. use the Save for Web feature. It will allow you to set the exact pixel lengths of the sides of your image, and it will also let you set the quality percentage however you want.

Under the File menu, select Save for Web. A dialogue box will appear that will allow you to set the image size and the quality:

The Save for Web dialogue box in Photoshop

The image size adjustments are toward the bottom. Just set either the width or the height to the length you want, and the other side will automatically change to a corresponding length. The size of the file will appear at the bottom left. Adjust the quality setting at the top right until the file size is what you want.

The process is easy and you have complete control over it. The only limitation is that you have to resize each image individually. Lightroom works a little differently and allows you to process multiple photos at once.

Resizing Photos in Lightroom

In Lightroom you will use the Export function to resize your photos.  To bring up the Export function, right click, select Export, and then select Export again. The following dialogue box will appear:

Lightroom Export function - dialogue box
Lightroom Export function

In Lightroom, you can set the image size by setting the width, height, or both. You can also set in pixels, inches, or centimeters.

When it comes to determining the file size, Lightroom with let you do that in one of two ways:

  • by setting a specific limit on the file size, or
  • by setting the quality (as a percentage – as with Photoshop).

But you cannot do both. You choose either file size or quality.

Once you click Export, Lightroom will create a new copy of the image in whatever folder you designated.

Neither program is better than the other at resizing photos. Just use whichever one you are more comfortable with. In either case, resizing your photos is simple and will be very easy once you have done it a time or two.

Conclusion

At this point, you should have a good idea of how to resize your photos and how small to make the files when posting to the web. To reinforce that – and simply things – the process explained in this article can be boiled down into a few steps:

  • Determine if you even need to worry about resizing your images. If you are using SmugMug, SquareSpace, Flickr, or another service to post your pictures on the web, you don’t. Just post them as is and your service provider will handle everything for you. But if you are creating your own website or WordPress site, you do need to properly size your images.
  • If you do need to resize your images, determine the size (in pixels) of your image based on the size of the container on your website and how much of that container you want the picture to fill.
  • Use either the Save for Web function in Photoshop or the Export function in Lightroom to resize the image, starting by setting the size you determined in step 2.
  • Set a quality percentage to reduce the file size of the image further (or you can use the max file size in Lightroom). Try to keep the image size to around 250 KB at the most.
  • Don’t be afraid to use quality percentages as low as 50%.

This process should result in your pictures looking good on your website, but not bogging it down.

1 comment

Comments are closed.