How Do I Reduce Photo Size for Online Use?

Reduce Picture Size so Photos Will Load Faster on Web Pages

The Photoshop Image Size dialog box is shown over an image of a lighthouse.

Pictures that are too big won't load quickly on web pages, and users are more likely to leave your pages if the images won't load. But how do you make a picture smaller without losing details? This article walks you through the process.

How to Reduce Picture Size

Before resizing your image for the web, you need to crop the picture to remove any unnecessary portions of the picture. After cropping, you can change the overall pixel dimensions to go even smaller.

All photo editing software will have a command for changing the pixel dimensions of an image. Look for a command called Image Size, Resize, or Resample. When you use one of these commands you will be presented with a dialog box for entering the exact pixels you wish to use. Other options you may find in the dialog are:

  • Resample: If the image is shot with a DSLR the odds are pretty good that it has a resolution of 300 pixels per inch (ppi). If this is the case reduce the value to 72 or 100 and the physical dimension of the image will also reduce. You never increase the value when using an image on the web.
  • Constrain proportions or keep aspect ratio: You want this option enabled. In Photoshop click the option to link the width and height values. It prevents the image from being stretched and distorted. When this option is enabled, you only need to enter one value – height or width – and the other value will adjust automatically.
  • Change the resolution value: Before changing the width and height values, change the resolution to a lower number – called downsampling. This also reduces the width and height values, so changing those value before downsampling could make the image smaller than you intend for it to be.

File Format Is Key

Online images are usually in the .jpg or .png formats. The .png format is a bit more accurate than the .jpg format but .png files also tend to have a larger file size. If the image contains transparency then you need to use the .png format and be sure you select the Transparency option.

JPG images are regarded as lossy. The loose explanation is that they are so small because areas of contiguous color are grouped into a single area reducing the need to remember the color of each pixel in the image. The amount of compression is determined through the use of a Quality Slider in Photoshop. The values range between 0 and 12 meaning the lower the number, the lower the file size and the more information that is lost. A value of 8 or 9 is common for images destined for the web.

If you are a Sketch 3 user, you get to set the Quality when you click the Export button in the Properties panel. You will be presented with a Quality slider that ranges from 0 to 100%. A common Quality value is 80%.

When choosing the compression level, keep quality in the medium to high range to avoid compression artifacts.

Never recompress a jpg image. If you have received an already-compressed jpg image, set its quality to 12 in Photoshop or 100% in Sketch 3.

If the image is small or contains solid colors consider the use of a GIF image. This is especially useful for single color logos or graphics containing no shades of color. The advantage here is the ability to reduce the number of colors in the color palette which has a major effect on file size.

Never Resize and Overwrite Your Original File

After sizing the image, be sure to do a Save As so you don't overwrite your original, high-resolution file. here are a couple of tips:

  • You want to shoot for a file size of 50 to 250 KB per image. Go small if you will be putting several files on the same page or sending them in one email.
  • Try not to exceed 1000 KB per Web page for the total of all images.

This may sound like a time-consuming process, especially if you have a lot of photos to share, but fortunately, most of today's software has made it easy to size and compress a batch of photos very quickly. Most image management and some photo editing software have an "email photos" command that will resize and compress the images for you. Some software can even resize, compress, and generate complete photo galleries for posting on the Web. And there are specialized tools for both of these tasks – many of them free software.

Batch Resizing Images

Batch sizing works a little differently depending on whether you are using a resource like Photoshop Elements, Picasa, or XnView.