Saving Photos for the Web as JPEG

Topics Covered in This Photoshop Tutorial:

Resizing Images for the Web, Reducing Image Size with Resampling, Setting JPEG Quality

Exercise Preview

Photo by Dan Rodney

Exercise Overview

Many times, the same content will be used for both print and web and needs to be converted appropriately. Web images use RGB color and the width/height of the file is what matters (not the ppi resolution setting in Photoshop). Also, when you’re saving images for the web, file size becomes an important issue. Google considers page speed when ranking webpage. Small file sizes mean a faster loading page, which helps your Google rank!

Resizing an Image for the Web

1. From the Photoshop Class folder, open the file opera house.jpg.
2. Choose View > 100%.
3. Before making this web-ready, it’s a good practice to save a copy. Go to File > Save As.
4. Next to Format (Mac) or Save as type (Windows), choose Photoshop.
5. Name it yourname-opera house-web.psd and click Save.
6. Go to Image > Image Size.

7. At the bottom, make sure Resample is checked on.

   Resampling

   Resampling means to add, remove, or recalculate pixels.

   When Resample is checked, the number of pixels actually changes. Either pixels are removed, creating an image with less pixel information, or pixels are added—these “made‑up” pixels often result in a less detailed, more blurry image.

   When it is unchecked, resizing or changing the resolution of the image will not affect the number of pixels in the image—but you can convert a large printing, low-resolution image to a smaller printing, high-resolution version, or vice versa.

8. Make sure Constrain Aspect Ratio is checked on (darkened).
9. To the right of Width, set the menu to Pixels.

10. Set Width to 600 pixels. The height will change automatically to maintain the proportions of the image.

    NOTE: The specific pixel dimensions you need will depend on where you’ll use the image such as social media websites, a corporate website, etc.

11. Click OK.

    Notice that it’s now a much smaller image, appropriately sized for our specific use.

Setting JPEG Quality in the Save for Web Dialog

1. Go to File > Export > Save for Web (Legacy).

   NOTE: Save for Web is marked as Legacy because Adobe won’t be updating it to support new features such as artboards. Adobe introduced new exporting methods such as File > Export > Export As. Each has pros and cons, and Adobe is keeping Save for Web until the new methods can fully replace it.

2. A new window appears, allowing you to adjust compression settings and preview the final image. Click the 4-Up tab at the top.

3. You’re now looking at the original, uncompressed image in the upper left of the window, and three compressed versions, each using a different setting. Click on the upper right image.

4. In the settings on the right, from the menu below Preset, choose JPEG.

   

   NOTE: The JPEG format is best for photos. It maintains good quality at a small file size. Be careful, though—the more you compress JPEGs, the more they will degrade and visual distortions will appear.

5. For the Quality setting on the right side of the window, type 100.

   Note that the file size appears under each of the compressed preview images. While this doesn’t cause much visual distortion, we can get a much smaller file if we try a lower quality.

6. Click on the lower left image. Choose JPEG and set the Quality to 0.

   This is too distorted for most purposes, but the file size is small!

7. Click on the lower right image. Choose JPEG and set the Quality to 70.

   This is getting closer. There’s only minor distortion. The trade-off between quality and file size reaches a good balance here.

8. Notice that there’s a thicker border around the lower right image preview area. That indicates it’s the selected version. Click Save to save a copy of this one.

9. Make sure it’s named yourname-opera-house-web.jpg.

   NOTE: When naming files for the web, do not use spaces in the filename. Spaces will cause problems with web browsers. Use dashes or underscores instead. Photoshop will automatically replace any spaces with dashes.

10. Navigate to the Photoshop Class folder and click Save (Format: Images Only).

11. You should now be looking at the original Photoshop file. Go to File > Save. This will save the JPEG quality settings. If changes need to be made later, it will remember the Save for Web settings we used for this specific file!

12. Close the file.