How to Compress Photos for the Web with Photoshop

Back when everyone still connected to the internet by dial up, knowing how to optimize images for the web was essential. In today's world, this skill is still essential as it helps lower the costs of data on mobile devices and helps speed up loading time. No one wants to wait around for a giant, full resolution photograph to load if they don't have to (or want to).

The purpose of compressing images is to reduce the file size and make it easier to upload and download. Below are a few of the ways that you can reduce your file size.

• Reduce the image size of your image, especially if you have the original version of a photograph. Unless you're planning on putting up a full resolution image of your image, there's no reason to upload something that size. A good example is Facebook. If you reduce the image, it'll upload faster and the quality doesn't suffer.
• Compress your image. This will reduce the file size drastically. You may have to play around with settings to get the right balance with file size and quality.
• Unless required in a different format, save your photos in jpeg. This is one of the smallest and most widely accepted file formats. It is a lossy file, but if used correctly you should not see much difference in quality. (I would recommend saving a higher resolution or a lossless image of things like photographs and originals in case you need to make changes later on).

Optimizing images for the web with Photoshop is a very straight forward and easy task once you find the option in Photoshop. Instead of saving your photo normally, you want to select "Save for web" from the file menu.

Steps for Compressing Images and Photos

1. The first thing that I do with my photos is to re size them. I shoot in RAW with my Canon T3i so when I'm uploading photos to use in articles, websites or to Facebook, I always make sure to do this. If you don't know how, you simply go to Image > Image Size. I'll usually go for 1280 for the width or height, depending on if the photo is oriented vertically or horizontally. You can also re size them in the Save for Web window.
2. Next I go to File > Save for Web. A window pops up and I begin to change the settings to fit my needs.
3. Choose 4-up or 2-up for the tabs at the top to see a before and after compression preview. You want to make sure that the after still retains the information and details.
4. Select "JPEG" from the drop down list, unless you need to preserve transparency, in which case select GIF or PNG.
5. The next step depends on what kind of image you're using, how many colors you have and what kind of file size you want. The basic idea here is to try to get the lowest file size, while still retaining your images' quality and details. (You can see the estimated file size at the bottom of each preview)
6. Once you've found the happy medium between quality and file size, you can save the image by clicking save at the bottom. That's all there is to it.

While in the Save for Web window, there are a couple of options that may interest you beyond just compressing your image for the web.

Metadata - this option allows you to include metadata, or remove information from your image before you save the image out from Photoshop.

Image Size - this allows you to skip the image re-size step in the beginning of the process, speeding up your workflow.

Blur and Quality Options - increasing the blur will drastically reduce the file size, but it will also destroy some of the detail in your original image.

Presets - allow you to scroll through different settings easily without messing with the settings yourself. For a good starting point, try JPEG low.