12.1 Exercise 1: From digital input to web ready

xtine burrough and Michael Mandiberg

  1. Download and open seagram_building.jpg from the Chapter 12 Work Files download.Image of Segram building open in Photoshop®
  2. If you followed the exercises in Chapters 8 and 9, you should be comfortable changing the tonal range and color of this image. Adjust the tonal range and color to your liking by adding one or more adjustment layers.Photoshop® interface showing the Properties panel for a Levels adjustment layer added to the seagram building image.Properties panel showing adjustments to the image's red channel. Properties panel showing adjustments to the image's green channel. Properties panel showing adjustments to the image's blue channel.
  3. Save this file as a master copy by choosing Save As from the file menu, choose PSD as the file format, and save your file as ch12-yourlastname-firstname.psd.
  4. The image from the download files was taken by a 21-megapixel digital camera, and is larger than we need to display on a web site. Additionally, since we’ve made some adjustments and want to retain our master file as a PSD, we’ll need to create an optimized image for use on a website or on social media. To optimize images for online use, we use the Export features in Photoshop®. Choose File > Export > Export As… to open the Export As interface. Photoshop® and Illustrator® both have this tool available, allowing you to to resizes and compress your images, flatten layers, and prepare an image for the web all while retaining your original master file.Exporting the adjusted image using the Export As dialog.
  5. The Export As dialog has several important parameters to set. The most important parameter is the Format listed under “File Settings” in the top right of the interface. As a general rule, photographic images and other images continuous tone or a large range of colors are saved as JPEGs. Graphic images — images with few colors, such as logos and line art — are saved as PNGs or GIFs. Since this image is a photograph, select JPEG from the Format pull-down menu.Screen capture showing how to set the Format for the optimized image.
  6. Some of the Formats available in the Export As dialog are also available through File > Save As, including the JPEG format. However, using the Export As dialog gives a greater amount of control over JPEG compression settings and prepares the image for web use in a few other ways that Save As doesn’t. We’ll start with the Quality setting.First, notice that at the bottom of the Export As dialog are some zoom controls. Click on the + button there to zoom in and view the image at 100%. We’ll want to be looking closely at the image to more easily see the effect of JPEG compression.

    Screen capture showing the Export As dialog with a zoom level of 100%.Also note that the left side of the Export As interface shows information related to the optimized image. At this stage, we want to pay particular attention to the estimated file size of the optimized image, which at 100% Quality is about 4.9MB. This is important because the smaller the file size is, the faster the image will download as part of a web page. The 4.9MB file size is a very large or “heavy” file and will increase download time unnecessarily.

    Screen capture showing the estimated output file size for the image when set to be optimized as a JPEG with a 100% quality level.

     

  7. In the File Settings section at the right of the Export As dialog, set the Quality setting to 0% by typing into its box or clicking on its down arrow and using the slider. Watch the image closely as you make this change and you will see differences in the image quality appear. Saving an image in JPEG format compresses the saved image into a smaller file size by removing pixel detail from specific areas in the image. This is called lossy compression.The JPEG format lossy leaves what are known as compression artifacts in the image. These show up as blurry or pixelated areas in an image, which you may have noticed in heavily compressed images online. JPEG compression artifacts most often show up in areas of solid or nearly-solid color, or around edges of objects in an image.
    Screen capture showing adjustment of the Export As JPEG Quality slider.
    Notice the loss of detail and the appearance of JPEG compression artifacts when comparing the image preview at Quality settings of 100% and 0%.

    Screen capture showing the Export As JPEG Quality slider set to 0%

    Along with seeing a preview of the compressed image in the center of the Export As dialog, the estimated file size is also updated when you change the Quality setting. Notice that the image information in the area at the left of the dialog now lists the file size at around 223.5KB.

    Screen capture showing the estimated optimized file size when JPEG quality is set to 0%.

    Note: The human eye cannot easily detect image compression artifacts if a small amount of compression is used and the image is viewed on a computer screen. Photoshop® JPEG compression presets run from Low to Maximum, and correspond to a numerical range from 0 to 100. Zero is a very low quality, where you will definitely be able to notice the loss of quality as visible compression artifacts in the image, while the maximum 100 level (although still having had image data thrown away) shows no visible decline in quality. The trade-off is that more compression creates a smaller file. Weigh your needs for file size against your perception of image quality to decide what level of compression to use on a case-by-case basis.

     

  8. While the file size at 0% quality is nice and small, the image doesn’t look as good as it could. We want to find a balance between a nice looking image (not covered in artifacts) and a file size under 1MB. Increase the Quality to 60% and watch the areas of the image where you noticed the artifacts at 0%. On average, a Quality setting between 60% and 80% is where you’ll end up when looking at image quality, though this will vary depending on the amount of detail and texture in any particular image that you’re compressing. Notice that the compressed file size at 60% quality is 1.1MB, we’ll address that in the next step since we do want a smaller file size.Screen capture showing the Export As dialog with a JPEG quality setting of 60%.
  9. In addition to compression, we can also reduce file size in this case by reducing the pixel dimensions of the image. We can do this directly in the Export As dialog, without permanently altering our master image file. Locate the Image Size section of the dialog, underneath the File Settings section on the right side. The original pixel dimensions are 5760×3840 pixels, which is much larger than we need to display online.

    Computer monitors and mobile devices have a wide range of screen sizes these days. In order to deliver images that are sized appropriately for different devices and Internet connections, it is often necessary to prepare multiple sizes of an image for online use. For this exercise, we’ll prepare two optimized sizes of this image.

    For desktop computers, let’s scale the image down to a width of 1600px. Edit the Width value under the Image Size settings and the height will be scaled proportionally to 1066px. To help our scaled image’s quality, also set the Resample drop-down to Bicubic Sharper. This will result in sharper detail when Photoshop® re-interpolates the image’s pixels while generating the smaller size. Your Image Size settings should match those shown below.

    Screen capture showing Export As Image Size settings with a scale value of 27.77%.

    Notice that this has reduced the optimized file size from 1.1MB down to 125.1KB. This is much more acceptable and our image quality is looking pretty good.

    Screen capture showing estimated JPEG file size after adjusting JPEG Quality and Image Size.

  10. Now we’ll create an additional optimized file for mobile screens using the Scale All controls in the upper left corner of the Export As dialog. In the previous steps, we’ve just defined the settings for our 1x optimized image. In the Suffix field, enter _desktop then click the + button in the Scale All box to add another size for this image.

    Screen capture showing specified Scale All settings.

    Clicking the + button will create an additional optimized copy of the image. For this second optimized copy, set the Size drop-down to 0.5x and enter _mobile in the Suffix box.

    Screen capture showing a second optimized image scale added for use with mobile screen sizes.
    Now click the Export All… button in the lower right of the dialog, choose where to save your optimized files, and click the Export button. You should end up with two .jpg files in the folder you saved to: one named ch12-yourlastname-firstname_desktop,jpg and the other named ch12-yourlastname-firstname_mobile.jpg with file sizes around 122KB and 45KB, respectively. Notice that the _mobile image has pixel dimensions of 800×533.

    Note: File naming standards for the web use only lowercase letters, alphanumeric characters, underscores, and dashes (no spaces).

    If you open each of the JPEGs in Photoshop®, you’ll also notice that their resolution is set to 72ppi. The Export All process also reduces the ppi since images for display on the web or exclusively on screens typically use a standard 72ppi setting.

    We’re finished with the ch12-yourlastname-firstname.psd file, so you may save and close it.

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

12.1 Exercise 1: From digital input to web ready Copyright © by xtine burrough and Michael Mandiberg is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book