Web, email and Projection Workflow

Recommended sequence of steps for preparing a finished image for the web, email or projection

---

This workflow assumes you have already used the Scan to Print or one of the Raw to Print workflows to create a final image.  If you do not have a final image, please use one of the workflows on the workflow page to create your final image.  And then use this workflow to prepare the final image for web, email or projection.
 

When creating an image to be shown on a web page, sent in an email or displayed by a projector, there are seven factors to consider.  These factors are listed below.  Of these, the primary consideration is image quality.  Striving for more image quality will increase file size.  A large file size will result in slow web sites and large emails.  Reducing file size too much will result in a degraded image.  Therefore, the creation of images for the web, email or projection is always a subjective balance of quality and size.

1. Image quality - Will colors and tones be accurate when seen on someone else's computer?  Will the image be smooth or pixelated?
2. Display size - When viewed, how large will the image be?
3. File size - Will web pages and email take too long to load?
4. File Format - JPEG, PNG or GIF?
5. File resolution - Web and email resolution is not the same as for printing.
6. Target audience gamma - Will the image look brighter or darker on another computer platform?
7. Color space - What, if any, color space should be used?

 

Remember, just because a step is listed here, does not mean it has to be done.

 

Show All Detail Steps  |  Hide All Detail Steps

---

1. Open the original image.
2. Click Image > Duplicate.  The Duplicate Image dialog box will be displayed.
3. Give the image the name that will be used on the web or in the email.  Click OK.
   1. Avoid special characters.  Why?
      1. Avoid special characters, especially the underscore character _ and spaces.  The underscore character may not be processed correctly by a web server or scripting languages.
          
   2. Use lower case letters.  Why?
      1. Inconsistent use of upper and lower case may cause problems.  A file whose actual name is MyImage.jpg on a web server but is coded in the web page as src="myimage.jpg" will not be found if the web server is Unix or Linux based because these operating systems are case sensitive.  While Windows based web servers are not case sensitive, it is best to use a consistent naming standard.
          
4. Close the original image file.
5. Remove sensitive information.
   1. What does this mean?
      1. Image metadata provides a means for the photographer to store sensitive information about persons.  Medical professionals can store patient information in the DICOM category of metadata.  If your image file contains confidential information, you will want to consider removing or masking this information before emailing the image or posting it to a web site.
      2.  
   2. Tell me how?
      1. Metadata is accessed by clicking File > File Info.  Look in each category and remove any sensitive information.  Patient information is usually located in the DICOM category.
      2.  
6. Crop the image and set display size and resolution using the Crop Tool .
   1. Tell me more
      1. When optimizing an image for web, email or projection, there are two sizes to consider.  The display size and the file size.  Display size determines how much real estate the image will occupy when shown on a web page, opened from an email or shown by a projector.  File size affects how long it takes a web page or email to open.
          
   2. What size for web?
      1. Display size is determined by the web site administrator or web site author.  They need to tell you what size the image must be.  They will either tell you a specific size for width.  Or they will tell you both the width and height.  The size they give you must be in pixels and not inches or centimeters.  For resolution, use 72 pixels/inch.
      2.      Show me the steps
         1. Ctrl + zero (Command + zero) to fit the image on the screen.
         2. Type the letter f until the image is in full screen mode with menu bar.  This displays a gray background.
         3. Type the letter c to activate the Crop tool .
         4. In the Options bar, enter the width supplied by the web administrator followed by the letters px.  For example, 250 px for 250 pixels.  (If the Options bar is not visible, click Window > Options.)
         5. If the web administrator gave you a height, enter the height followed by the letters px.  Else, leave height blank.
         6. In the Resolution field, enter 72 and make sure the unit of measure drop down box is pixels/inch.
         7. Click in the gray background area and drag the Crop Tool over the image to create a selection.  The area that is selected will become the new image.  The area outside the selection will be cropped.
         8. You may drag any of the corner handles to resize the selection.  If no height was supplied, you may also drag any of the side handles.
         9. To move the selection, click and drag inside the selection to move it.  Do not click near the center marker, else the marker, and not the selection, will be moved.
         10. When finished, press the Enter key.
      3.  
   3. What size for email?
      1. The display size for email is more subjective than for the web.  Typical sizes for the long edge are 5, 6, 7 or 10 inches.  I would not use a size smaller than 4 inches (10 cm rounded) or over 10 inches (25 cm rounded).
      2.      Show me the steps
         1. Ctrl + zero (Command + zero) to fit the image on the screen.
         2. Type the letter f until the image is in full screen mode with menu bar.  This displays a gray background.
         3. Type the letter c to activate the Crop tool .
         4. If the image is in portrait orientation, enter the desired height in the Options bar followed by the letters in for inches or cm for centimeters.  For example, 10 cm for 10 centimeters.  (If the Options bar is not visible, click Window > Options.)
         5. If the image is in landscape orientation, enter the desired width in the Options bar followed by the letters in or cm.
         6. In the Resolution field, enter 72 and make sure the unit of measure drop down box is pixels/inch.
         7. Click in the gray background area and drag the Crop Tool over the image to create a selection.  The area that is selected will become the new image.  The area outside the selection will be cropped.
         8. You may drag any of the corner handles to resize the selection.
         9. To move the selection, click and drag inside the selection to move it.  Do not click near the center marker, else the marker, and not the selection, will be moved.
         10. When finished, press the Enter key.
      3.  
   4. What size for projection?
      1. You will need to find out from the projector owner the projector's stated resolution, sometimes called the natural resolution.  Likely, the resolution given to you is not a true resolution, but a maximum width and height.  It should be very similar to computer monitor sizes, such as 1024 x 768.  The first number will be width and the second number will be height.  Both numbers are in pixels.
      2.      Show me the steps
         1. Ctrl + zero (Command + zero) to fit the image on the screen.
         2. Type the letter f until the image is in full screen mode with menu bar.  This displays a gray background.
         3. Type the letter c to activate the Crop tool .
         4. If the image is in portrait orientation, enter the projector height in the Options bar followed by the letters px.  For example, 768 px for 768 pixels.  (If the Options bar is not visible, click Window > Options.)
         5. If the image is in landscape orientation, enter the projector width in the Options bar followed by the letters px.  For example, 1024 px for 1,024 pixels.
         6. In the Resolution field, enter 72 and make sure the unit of measure drop down box is pixels/inch.
         7. Click in the gray background area and drag the Crop Tool over the image to create a selection.  The area that is selected will become the new image.  The area outside the selection will be cropped.
         8. You may drag any of the corner handles to resize the selection.
         9. To move the selection, click and drag inside the selection to move it.  Do not click near the center marker, else the marker, and not the selection, will be moved.
         10. When finished, press the Enter key.
      3.  
7. Make gamma adjustment.
   1. What does this mean?
      1. Your computer's operating system gamma value affects image brightness.  The gamma values between Windows based computers and Mac computers are different.  You will want to adjust the image's overall brightness if any of the following conditions are true.  Show the conditions
         1. The image was edited on a Mac computer with a gamma of 1.8, but the image will be viewed mostly on Windows based computers.
         2. The image was edited on a Windows based computer but the image will be viewed mostly on Mac computers with a gamma of 1.8.
         3. The image was edited on a Mac computer with a gamma of 1.8 and it is not known what operating system will be used to view the image.  In this situation, we are going to assume the image will be viewed mostly on Windows based computers.
      2.  
   2. How do I make the adjustment?
      1. Create a Levels adjustment layer by clicking Layer > New Adjustment Layer > Levels.  Or by clicking the Create new adjustment layer icon on the Layers panel and selecting Levels.  The Levels dialog box will be displayed.
      2. If the image was edited on a Windows based computer and will be viewed mostly on Mac computers, change the gamma slider value from 1.00 to 0.81.  Click OK.  Or, you can use the predefined Levels adjustment on the Downloads page.
      3. If the image was edited on a Mac computer and will be viewed mostly on Windows based computers, or it is not known what computers will be used to view the image, change the gamma slider value from 1.00 to 1.22.  Click OK.  Or, you can use the predefined Levels adjustment on the Downloads page.
          
8. Add a copyright notice to the metadata.
   1. Tell me how
      1. Click File > File Info.
      2. Make sure the Description category is highlighted.
      3. Change the Copyright Status to Copyrighted.
      4. In the Copyright Notice field, enter the copyright notice in the form of the word Copyright, followed by the copyright symbol ©, followed by the year the image was taken or copyrighted, followed by the name of the copyright owner.  For example, Copyright © 1978 John Doe.  The year should not be the current year unless the image was taken or copyrighted in the current year.
      5. To create the copyright symbol, type Alt + 0169 (Option G).  Windows users should make certain they use the numeric keypad on their keyboard and not the top row of keys.
      6. Close the metadata dialog box.
          
9. Add a visible copyright notice to the image.
   1. Tell me how
      1. Set the foreground color to the color you want for the symbol and text.
      2. Create a new layer by clicking the Create a new layer icon at the bottom of the Layers panel.
      3. Activate the Type tool and click in the document.  The layer created in the previous step should become a Type layer.
      4. Set the desired font family, style and size.
      5. The format of a copyright notice is the word Copyright, followed by the copyright symbol ©, followed by the year the image was taken or copyrighted, followed by the name of the copyright owner.  For example, Copyright © 1978 John Doe.  The year should not be the current year unless the image was taken or copyrighted in the current year.
      6. To create the copyright symbol, type Alt + 0169 (Option G).  Windows users should make certain they use the numeric keypad on their keyboard and not the top row of keys.
          
10. Flatten the image by clicking Layer > Flatten Image.
11. Convert to 8 bit.
    1. Why?
       1. If your image is in 16 bit mode, it will need to be converted to 8 bit mode since the web generally does not support 16 bit images.
       2.  
    1. Tell me how
       1. Click Image > Mode > 8 Bits/Channel.

 

1. Click File > Save For Web & Devices.  This will open the Save dialog box.
2. Select the desired layout option.
   1. Tell me more
      1. At the top of the dialog box, click either the 2-Up tab or the 4-Up tab.  If you click the 4-Up tab, click the preview where you want your optimization adjustments to be shown.
      2.  
3. Select output file format and initial quality by selecting one of the Preset options.
   1. Explain this
      1. This option determines the file type (JPEG, GIF or PNG) as well as the initial image quality and file size.
      2.  
   2. Which setting should I use?
      1. For photographic images with many colors and continuous tones, including black and white images, select one of the JPEG settings.  For graphics, such as line drawings or logos with limited colors, select either the GIF or PNG setting.
      2.  
4. If creating a JPEG image...
   1. Select one of the three JPEG preset options.  But which one?
      1. There are three JPEG settings.  Try each one in turn from low to medium to high.  As you try each one, review the optimized image for quality and file size, not display size.  File size will be represented as a number and will be shown beneath the image.  If you selected either the 2-Up tab or the 4-Up tab, then an unoptimized, or original, sample of the image is also displayed.  Compare the optimized image to the original image to judge quality.  Once you find a JPEG setting that is close to your desired image quality and file size, you can click in the Quality field and change the value to fine tune the balance between image quality and file size.
      2.  
   2. Make sure Progressive is unchecked.  Why?
      1. This feature allows an image to be viewed first as a low resolution image as it downloads from the web server to a browser.  But not all browsers support this option and this feature is generally not needed and results in slightly larger file sizes.  Progressive is not needed for images to be emailed or projected.
      2.  
   3. Make sure ICC Profile is checked.  Why?
      1. This will allow the image to be converted to the sRGB color space, as described below.  If not checked, the resulting image will have no embedded color profile even if the original image does.  The sRGB color space is the most common color space supported by the web.
      2.  
   4. Make sure Optimized is checked.  Why?
      1. This feature does not optimize image quality.  Rather, it provides maximum file compression which reduces file size.
      2.  
   5. Use Quality to fine tune image quality and file size.  What does this mean?
      1. Preparing an image for web or email is a subjective decision that balances image quality with file size.  Increasing image quality will also increase file size.  Decreasing image quality will decrease file size.  As you change image quality, review the optimized image to see the impact to both quality and file size.
      2.  
   6. Make sure Blur is zero.  Why?
      1. This feature applies a blur to the image and can increase file size.
      2.  
   7. Make sure Matte is None.  Why?
      1. This feature is used to apply a solid fill color to transparent pixels.  Generally, photographic images do not have transparent pixels.  Graphic images often do, but that is covered later.
      2.  
   8. Click the Flyout Menu arrow next to the Preset drop down box and make sure Convert to sRGB is checked.  Why?
      1. For those browsers that support color profiles, this option, along with the ICC Profile check box, will convert the image's current color space to the sRGB color space, which is the most common color space supported by the web.
      2.  
5. If creating a GIF or PNG graphic...
   1. Select the desired format.  But which one?  GIF or PNG?
      1. Neither format should be used for photographic images.  Rather, they should be used for graphics of very limited color.  Of the two, GIF is the more common.  Start with GIF 128 Dithered.
      2.  
   2. Make sure Color Reduction is Selective or Grayscale.  Why?
      1. The Color Reduction option determines how the color lookup table, or LUT, is generated.  The Selective option generally creates a graphic whose colors are truer to the original.  The grayscale option should be used for graphics with black, white and grays.
      2.  
   3. Make sure Dithering algorithm is either No Dither or Diffusion.  What does this mean?
      1. Dithering is a technique of simulating colors that cannot be reproduced by your computer system by using reproducible colors from surrounding pixels.
         
         Graphics with solid colors may not require dithering.  Graphics with continuous tone colors may need dithering.
         
         If dithering is specified, each dithering option will increase file size but the Diffusion option does an overall good job of dithering while increasing file size less than the other options.
          
   4. Make sure Transparency is checked for web, but not email or projection.  Why?
      1. It is very common to leave transparent pixels transparent for graphics to be used on a web site.  In this way, the web page's background color can be seen through the graphic.  For email and projection, it is generally desirable not to have transparent pixels.  Therefore, turn transparency off for email and projection graphics.
      2.  
   5. Make sure Transparency Dithering is No Transparency Dither.  What does this mean?
      1. If Transparency is checked, this option tells Photoshop not to apply dithering to semi transparent pixels and to leave them semi transparent.
      2.  
   6. Make sure Interlaced is unchecked.  Why?
      1. Similar to the Progressive feature for JPEG images, this option allows a low resolution of the graphic to be displayed on a web browser while the graphic is downloading.  This option will slightly increase file size.  GIF and PNG graphics should be small files anyway, so this option is generlly not needed.  Interlacing is not needed for graphics to be emailed or projected.
      2.  
   7. Set Lossy (GIF only) as needed.  What does this option do?
      1. This option reduces file size by selectively removing pixels, much like JPEG lossy compression.  Monitor file size and graphic quality in the preview window while changing the Lossy value.  Increasing the Lossy value will discard more pixels and reduce file size.
      2.  
   8. Set number of Colors to 256 and adjust downwards as needed.  What does this mean?
      1. Both GIF and PNG file formats can store a maximum of 256 colors.  By reducing the number of colors in the graphic, you can reduce file size.  Review graphic quality and file size while reducing the number of colors.
      2.  
   9. Adjust Dithering as needed.  What does this mean?
      1. You already selected the dithering method in step C.  If you selected No Dither, this option will be disabled.  If you selected one of the dithering methods, then select a dithering percent that gives you the desired balance between graphic quality and file size.
      2.  
   10. Set Matte as needed.  Explain this
       1. This option color fills partially transparent pixels.  It will not color fully transparent pixels.  For web graphics, it is generally desired to leave transparent pixels transparent.  So this option should be blank or None for web graphics.  If you wish to color fill partially and fully transparent pixels for email and projection, select a Matte option and uncheck the Transparency option.
       2.  
   11. Amount should be disabled.  Why?
       1. Amount is only enabled when the Transparency Dither option is used.
       2.  
   12. Make sure Web snap is 0%.  Why?
       1. This feature is used to shift colors to web safe colors.  The concept of web safe colors was developed when computer monitors could only display a couple of hundred colors.  Monitors today can display millions of colors.  Therefore, this concept can generally be ignored.
       2.  
   13. Ignore the Convert to sRGB option used with JPEG files.  Why?
       1. The GIF and PNG file formats do not support embedded color profiles.  Therefore, this option will be ignored by Photoshop when creating GIF and PNG files.
       2.  
   14. I used the above options, but the photograph looks terrible.  Why?
       1. Neither the GIF or the PNG format were intended for photographic images with large numbers of color and continuous tones.  The JPEG format should be used for photographic images.
       2.  
6. If constrained by file size, adjust file size.
   1. What does this mean?
      1. Sometimes a web site administrator or email administrator and even juried show judges put a limitation on file size.
      2.  
   2. How do I do this?
      1. Click the Flyout menu arrow next to the Preset drop down menu and click Optimize to file size.
      2. In the dialog box, type the file size limitation (in kilobytes) in the Desired File Size field.  If the limitation is 150KB, enter 150.  If the limitation is 1.5MB, enter 1500.
      3. Make sure Start With is Current Settings.
      4. Make sure Use is Current Slice even though your image does not have slices.
      5. Click OK.
      6. Please note, if the resulting file size is less than what you specified, then Photoshop has used the maximum image quality settings it can and was unable to achieve your target size.  And if the resulting file size is greater than what you specified, then Photoshop has reduced image quality as much as it can but was still unable to achieve your target file size.
          
7. Preview image in default web browser.
   1. Tell me how
      1. Make sure the optimized image is the selected one in the preview window.
      2. Click the browser preview button located in the lower right side of the dialog box.
      3. Your default web browser will open with the image displayed along with image and HTML property information.
      4. Review your image to be sure it is the display size and quality you want.
      5. Close your browser.
          
   2. Preview in other browsers
      1. Click the down arrow in the browser preview button located in the lower right side of the dialog box.
      2. Select Edit List.  The Browsers dialog box will be displayed.
      3. Click the Add button.  A file browser dialog box will be displayed.
      4. Use the dialog box to find the other browser's executable file installed on your computer, highlight it and then click Open.  On a Windows based computer, Internet Explorer is usually located at C:\Program Files\Internet Explorer\iexplore.exe and Firefox is usually located at C:\Program Files\Mozilla Firefox\firefox.exe.
      5. Repeat steps 3 and 4 until all your browsers are added to the list.
      6. You can make one of the browsers the default preview browser by highlighting it and clicking the Set As Default button.
      7. When finished, click OK to close the Browsers dialog box.
      8. Click the down arrow in the browser preview button again.
      9. The browsers you added will be listed at the top of the flyout menu.
      10. Click one of the browser names and that browser will open the image.
           
8. Click Save.
9. In the Save Optimized As dialog box, select a location for the file.
10. Save as type should be Images Only.
    1. Why?
       1. The other options generate HTML code that is not needed for email or projection.  For web images, the HTML generated is an entire web page that is not CSS compliant.
       2.  
11. Click Save.