Exporting Assets: JPEGs & HiDPI/Retina Graphics

Topics covered in this Photoshop for Web Design tutorial:

Using Save for Web, Optimizing photos for low-res screens, Optimizing photos for hi-res (HiDPI/Retina) screens, Compression settings for 1x & 2x versions, Saving file size when optimizing 2x graphics

Exercise Preview

Exercise Overview

Before we export graphics from the NYC layout you created in the previous exercises, we’ll learn how to optimize graphics individually.

In this exercise, you will optimize a large photo as a JPEG, the best file format for photographs on the web. You will optimize it for both low and high-resolution screens, keeping the file size as small as possible while maintaining good quality.

Optimizing Photos for Low-Res Screens

1. In Photoshop, close any files you have open.
2. Let’s see how to save a photograph for the web. Go to File > Open.

3. Navigate to Desktop > Class Files > yourname-Photoshop for Web Class > HiDPI-image-test and double–click cab-full-size-original.jpg.

4. When working with photos, the files you start with are usually quite large. To see our NYC taxicab image’s dimensions, go to Image > Image Size.

   This photo is 2600 pixels wide and 1200 pixels tall. (If you’re not seeing pixels, choose Pixels from the menu next to Width.)

   We don’t need the image to be this large because the average desktop screen is around 1200 pixels wide. We’ll resize this photo for each screen we’re designing for, such as low-res and hi-res desktops. Let’s tackle the low-res version first. These are often called 1x images because hi-res graphics will be 2 times the size.

5. In the Image Size dialog make sure the link is depressed , then set the following pixel dimensions for a low-resolution desktop screen:

   Resample:	Make sure it’s checked on and keep the default Automatic
   Resolution:	72 Pixels/Inch
   Width:	1200 Pixels

6. Click OK to resize the image.

7. Let’s see how large our 1x image will look on the web. At any level of magnification the image will look twice as small on a hi-res (aka HiDPI/Retina) screen, so follow the instructions for the resolution of the screen you are working on:

   • Low-Res Screen: Go to View > 100% or hit Cmd–1 (Mac) or Ctrl–1 (Windows).
   • Hi-Res Screen: Go to View > 200%. The image is the size it will appear on the web, but will look slightly pixelated because it is not a hi-res graphic.

8. Now we can save the optimized file. 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. One newer method of exporting can be found in File > Export > Export As, but it’s a mix of upgrades and downgrades. Adobe is keeping Save for Web until the new methods can fully replace it, and in this book we’ll explore multiple methods of exporting. In this case, we prefer Save for Web because we can preview the before and after (which Export As cannot).

9. If you are on a low-res screen, skip this step. To see the image at its intended size zoom to 200% by hitting Cmd–Plus(+) (Mac) or Ctrl–Plus(+) (Windows). The zoom amount is displayed at the bottom left of the window.
10. At the top left of the window, make sure you’re in the Optimized tab. This is a preview of the settings found on the right.
11. Towards the top right of the window, in the menu just below Preset choose JPEG.

12. While watching the file size at the bottom left of the window, check Progressive off and on and notice the file is smaller with Progressive on.

    Leave Progressive checked.

    NOTE: This option affects file size as well as how the image loads in a web browser. Non-progressive JPEGs load line-by-line at full quality. Progressive JPEGs load a full image that starts out blurry and pixelated. The image progressively becomes sharper as the image continues downloading. The final results look identical.

13. Experiment with the Quality to test how different settings make the image look. Start with high quality (100) and reduce it until the image starts looking bad.

    JPEG is a lossy format, so reducing the quality too far will create unsightly visual artifacts and large blocky pixelation.

14. The key is finding a good compromise that gives decent image quality with minimal artifacts, while making sure we have a small file size that will download quickly on the web. Set the Quality to 50.

15. To test whether the image looks good, switch back and forth from the Optimized tab to the Original tab a few times.

    You may barely be able to see any change, but the smoothness of the yellow hood on the large cab changes slightly. Even at 50% quality, this image looks quite good. At 40% the hood gets less smooth, so we think 50% is a good quality and file size.

16. Back in the Optimized tab below the photo, notice that the file size should be around 177.1K. Nice.

17. Make sure Convert to sRGB is checked on and Preview is set to Monitor Color.

    NOTE: The sRGB colorspace is the standard for display on the internet and gives you good results when creating images for the web. Previewing as Monitor Color lets you see what the image will look like in a web browser on your computer as you figure out how to best optimize the image.

18. This file is ready to go! At the bottom right, click Save.

19. Go into Desktop > Class Files > yourname-Photoshop for Web Class > HiDPI-image-test.

    NOTE: We created an index.html webpage in this folder. We prepared this webpage for you to preview the images you export in this exercise so you can compare the difference between the low-res and hi-res images.

20. Name the file cab.jpg (because we coded the HTML file for that filename) and click Save.

Optimizing Photos for Hi-Res (HiDPI/Retina) Screens

Hi-res screens have a higher pixel density (smaller, more tightly packed pixels) than low-res screens. Typically they have twice the number of pixels occupying the same amount of space on the screen. These displays are also known as HiDPI (high dots per inch). Apple calls them Retina displays for iPhone, iPad, Mac, etc.

The low-res graphic we just exported is 1200 pixels wide. Because a HiDPI/Retina desktop screen with the same width would have twice the amount of pixels, we need to export a 2400 pixel-wide image. Because these graphics have 2 pixels for every 1 in a low-res graphic, they are typically called 2x images.

1. Before we export a 2x version of this photo, we need to undo the image resizing. Go to Edit > Undo Image Size.

2. Go to Image > Image Size. The image should once again be 2600 x 1200 Pixels.

3. Set Width to 2400 Pixels (twice the width of the 1x graphic).

4. Click OK to resize the image slightly smaller.

5. Let’s see how large our 2x image will look on the web. Once again, follow the instructions for the resolution of the screen you are working on:

   • Low-Res Screen: Zoom out to 50% by hitting Cmd–Minus(-) (Mac) or Ctrl–Minus(-) (Windows) until the zoom amount at the bottom left of the window says 50%.
   • Hi-Res Screen: Go to View > 100% or hit Cmd–1 (Mac) or Ctrl–1 (Windows).

6. Let’s optimize the image. Go to File > Export > Save for Web (Legacy).

7. Photoshop should remember your previous settings, but make sure you are in the Optimized tab with the Progressive and Convert to sRGB options still checked on and Preview set to Monitor Color.

8. If you are on a hi-res screen, skip this step. To see the image at its intended size zoom to 50% by hitting Cmd–Minus(-) (Mac) or Ctrl–Minus(-) (Windows). The zoom amount is displayed at the bottom left of the screen.

9. If the Quality isn’t already set to 50, do so now.

10. Notice that the file is currently around 530.2K. Wow, this is tremendously bigger than our 1x image. At the same level of compression, the low-res version was a nice lightweight 177.1K.

    Even though we have twice as many pixels in this 2x image, they’re going to occupy the same amount of space as the 1x image. This means the pixels are smaller. So any artifacts in a 2x graphic are displayed smaller than they are at 1x.

    This means you can compress a 2x image more than a 1x graphic. You can even use settings that would be unacceptable for a low-res graphic. If you are compressing your 2x graphic at the same Quality, you are wasting file size!

11. Let’s compress the image more to get a lower file size. Set the Quality to 10.

12. To test whether the image looks good, switch back and forth from the Optimized tab to the Original tab a few times.

    While there are artifacts in the same areas as the 1x graphic, there are probably less of them than you may have expected. Because the pixels will be displayed smaller on HiDPI/Retina screens, this photo looks pretty good even at 10% Quality.

13. Back in the Optimized tab, look at the file size at the bottom left of the window. It has shrunk down to around 230.9K. Much better!

14. At the bottom right, click Save.

15. Go into Desktop > Class Files > yourname-Photoshop for Web Class > HiDPI-image-test.

16. Name the file cab@2x.jpg (because we coded the HTML file for that filename) and click Save.

    The @2x suffix is Apple’s naming convention for Retina files in native iOS and Mac apps. Web designers have adopted this convention for naming graphic files for the web. We do not append @1x to low-res images.

Previewing the Difference in a Browser

1. Hide or minimize Photoshop, so you can see the Desktop.

2. Go into Class Files > yourname-Photoshop for Web Class > HiDPI-image-test.

3. Ctrl–click (Mac) or Right–click (Windows) on index.html, go to Open with and select your favorite browser (such as Chrome, Safari, Firefox, Microsoft Edge, etc.).

4. If you named the images properly, you should be seeing two photos.

   The 1x/low-res version of the cab photo is on top and the 2x/hi-res image is on the bottom. Even though the 2x image is twice the pixel dimensions of the 1x graphic, both versions are displayed within the space of 1200 pixels (because of the way we coded the webpage).

5. Take note of how the two images appear on different desktop displays:

   • Low-Res Screen: Both images should look almost identical because the 2x graphic has been scaled down to half its size, so you shouldn’t notice that it’s lower quality. See how you can get away with compressing 2x images more than the 1x versions!

     The hi-res 2x image will not appear sharper on low-res displays due to their limitations. Low-res displays are not technologically capable of showing the extra detail that HiDPI/Retina displays can show.

   • Hi-Res Screen: The 1x version on top will look slightly pixelated, which is especially noticeable in the trees. Small details like these will look sharper in the 2x version below. Both photos should show minimal artifacting though.

6. Close the browser window.

7. Switch back to Photoshop and close the cab photo without saving changes.