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

In today's multi-platform digital landscape, the same visual content must perform across print and web environments—each with dramatically different optimization requirements. Web images operate in the RGB color space, and their display quality depends entirely on pixel dimensions (width and height), not the PPI resolution setting within Photoshop. More critically, file size optimization has become a make-or-break factor for web performance. Google's Core Web Vitals now heavily weight page load speeds in search rankings, while users abandon sites that don't load within three seconds. Mastering efficient image compression isn't just a technical skill—it's essential for digital success in 2026.

This exercise will teach you the professional workflow for converting high-resolution images into web-optimized assets without sacrificing visual quality, using techniques that balance compression efficiency with user experience standards.

Resizing an Image for the Web

1. From the Photoshop Class folder, open the file opera house.jpg.
2. Choose View > 100% to see the image at its actual pixel dimensions.
3. Before converting this image for web use, establish a professional backup workflow. Go to File > Save As to preserve your original asset.
4. Next to Format (Mac) or Save as type (Windows), choose Photoshop to maintain all layer data and editing flexibility.
5. Name it yourname-opera house-web.psd and click Save. This creates your working file while keeping the original intact.
6. Navigate to Image > Image Size to access Photoshop's resampling controls.

7. At the bottom of the dialog, ensure Resample is checked. This setting is crucial for web optimization.

   Proper Web Image Preparation Workflow

   1

   Create Working Copy

   Save as PSD format to preserve original and maintain editing flexibility for future changes

   2

   Access Image Size Dialog

   Navigate to Image > Image Size to control pixel dimensions and resampling options

   3

   Configure Resampling

   Enable Resample checkbox to allow pixel dimension changes and ensure Constrain Aspect Ratio is active

   4

   Set Target Dimensions

   Change units to pixels and set width to your target size - height adjusts automatically

   Dimension Planning

   The specific pixel dimensions you need depend on your intended use - social media platforms, corporate websites, and email newsletters all have different optimal sizes.

Setting JPEG Quality in the Save for Web Dialog

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

   NOTE: While Adobe labels this as Legacy and has introduced newer export options like File > Export > Export As, Save for Web remains the gold standard for precise compression control. The newer methods still lack some advanced features, and Adobe maintains Save for Web specifically for professional workflows that demand granular optimization control.

2. The Save for Web dialog opens, providing real-time compression previews. Click the 4-Up tab at the top to compare multiple compression settings simultaneously.

3. You'll see four panels: the original uncompressed image (upper left) and three compression previews. Click on the upper right preview to begin optimizing.

4. In the settings panel on the right, locate the format dropdown below Preset and choose JPEG.

   

   NOTE: JPEG excels at compressing photographic images with gradual tonal transitions and complex color information. It uses lossy compression, trading some image data for significantly smaller file sizes. However, each time you save a JPEG, quality degrades slightly—always work from your original PSD file when making adjustments.

5. In the Quality field on the right, enter 100 to see maximum quality.

   Observe the file size displayed beneath each preview. While Quality 100 produces excellent visual results, the file size may be unnecessarily large for web delivery. Professional optimization means finding the sweet spot between quality and performance.

6. Click the lower left preview panel. Set its format to JPEG and quality to 0 to see maximum compression.

   This extreme compression produces visible artifacts and posterization—acceptable only for thumbnails or situations where file size is the absolute priority over image quality.

7. Select the lower right preview. Choose JPEG format and set quality to 70.

   Quality 70 typically represents the professional standard for web images—minimal visible artifacts while achieving substantial file size reduction. This setting works well for most commercial applications, balancing user experience with loading performance.

8. The selected preview (indicated by a thicker border around the lower right panel) shows your chosen settings. Click Save to export with these optimizations.

9. Name the file yourname-opera-house-web.jpg, following web-safe naming conventions.

   NOTE: Web-safe filenames never contain spaces, special characters, or capital letters. Spaces break URLs and cause server errors. Use hyphens or underscores as separators. Photoshop automatically converts spaces to hyphens, but developing good naming habits prevents issues across all platforms.

10. Navigate to your Photoshop Class folder and click Save, ensuring the format is set to Images Only.

11. Return to your original PSD file and choose File > Save. This preserves your Save for Web settings within the PSD file.

    Photoshop remembers your export settings for each file, streamlining future optimizations and ensuring consistency across your web assets. This is particularly valuable when working with image series or maintaining brand standards across multiple platforms.

12. Close the file to complete the exercise.

You've now mastered the essential workflow for professional web image optimization—a skill that directly impacts user experience, search engine rankings, and ultimately, digital business success. These techniques form the foundation for all web-based visual content creation.