Exporting Files for Web/Digital

Topics covered in this Photoshop tutorial:

Resizing images for the web/digital, Reducing image size with resampling, Exporting an optimized JPEG, Exporting a transparent PNG

Exercise Preview

Photo by Lucas Sankey on Unsplash

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 is important. 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 2F Opera house.jpg.

   NOTE: Photo Copyright © Dan Rodney, danrodney.com

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 company website, etc.

11. Click OK.

12. Choose View > 100%.

    Notice that it’s now a much smaller image, appropriately sized for our specific use. Depending on how it will be used in the website, it will likely be this size in the webpage (or it may be equivalent to View > 200%).

Exporting an Optimized JPEG

Web images need to be compressed so they download quickly. Some websites (like social media sites, WordPress sites, etc.) will handle the images compression for you, but for other websites (like some company websites) you may have to compress the image with Photoshop. Let’s see how to optimized an image to a small file size.

1. Go to File > Export > Export As.
2. A new window appears, allowing you to adjust compression settings and preview the final image. At the top right of the window, set Format to PNG.

3. Click the 2-Up tab at the top of the window.

   • On the left side should be a preview of the file saved as a PNG (you can see the label at the bottom), which has no compression.

   • Click on the image on the right.

   • At the top right of the window, set Format to JPG.

   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.

4. Drag the Quality slider down to 1.
5. At the bottom of the window click the plus (+) button to zoom in a bit.

6. Notice how this very heavily compressed JPEG (on the right) looks bad, with banding/striping in the blue sky and a loss of detail.

   Also notice at the bottom of the window it says this JPEG is about 8 KB in size. That’s much smaller than the PNG which is about 323 KB.

7. Increase the Quality slider one number at a time (2, 3, and then 4) and notice how the preview changes, stopping at a quality of 4.

8. At the bottom of the window click the minus (–) button so you’re back to 100%.

   Both images look good, and the JPEG is still only 25 KB which will download quickly.

9. At the bottom of the options on the right (you may have to scroll down to see this), make sure Convert to sRGB is checked on (it should already be checked).

   This ensures colors will not shift when this image is put on a website.

10. At the bottom right of the window click Export and:

    • Make sure the file is named yourname-opera-house-web.jpg.

      NOTE: When naming files for the web, do not use spaces in the filename. Use dashes or underscores instead.

    • Navigate to the Photoshop Class folder.

    • Click Save.

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

Exporting a Transparent PNG

When you need a file with transparency (for use in PowerPoint, webpages, etc.) you’ll need a PNG file.

1. From the Photoshop Class folder, open the file 2F Profile photo.psd.

   NOTE: The checkerboard pattern indicates transparency, which will be maintained by the PNG format (unlike JPEG which does not support transparency).

2. There are extra transparent pixels around this graphic that we don’t need and would increase our file size. Using the Crop tool to manually remove them would be time consuming and hard to figure out where exactly to crop in to. Luckily there’s a feature made specifically for this!

   • Go to Image > Trim.
   • Set Based on to Transparent Pixels.
   • Click OK.
3. Go to File > Export > Export As.

4. We can reduce the size here (instead of using Image Size as we did before). On the right, set Width to 600 px and hit Tab to go to the next field and apply the change.

   NOTE: The exact pixel dimensions you’ll use for your files will depend on how they are being used.

5. At the top right of the window, set Format to PNG and:

   • Make sure Transparency is checked on.
   • Leave Smaller File (8-bit) unchecked. This option is good for reducing file size, but will reduce the number of colors from millions (24-bit) to only 256 colors (8-bit) and at of this writing does not support partial transparency (although it used to in previous versions of Photoshop).

6. Click Export at the bottom right.

   • Name the file yourname-profile-photo.png.
   • Navigate to the Photoshop Class folder.
   • Click Save.