Web Graphics and Formatting 101 February 10, 2010

University of Nebraska Medical Center Tools of the Trade You don’t need Photoshop to do most basic photo editing. One commonly available tool is Microsoft Office Picture Manager. You may find it on your computer by going to: Start > Programs > Microsoft Office > Microsoft Office Tools > Microsoft Office Picture Manager Many other free photo editing programs are also available but they are not supported by ITS and so we’ll stick with the basics today.

University of Nebraska Medical Center How Are Web Images Different? Though most images you receive from a photographer nowadays will be digital, they are not ready for the web out of the box. Web- ready photos have a… Lower resolution Different color mode Smaller size (dimensions and filesize) Different file format Accessibility requirements

University of Nebraska Medical Center Resolution Standard web resolution (a.k.a. “screen resolution”) is equal to 72 pixels/inch Newspaper resolution is pixels/inch; print/photographic resolution is 300 pixels/inch Resolutions higher than 72 ppi will “blow up” to fit to a monitor (thus, a set width of 4 x 6 at print resolution will actually be 16.7” x 25” on a monitor) To ready a print photo for web use, you first must “derez” the image to get it ready for screen use.

University of Nebraska Medical Center Changing an Image’s Resolution In Photoshop: With the image opened, click “Image > Image Size.” In the popup window, enter “72” and select “Pixels/Inch” in the Resolution field. Click OK In Microsoft Office Picture Manager: This program does not allow you to change an image’s resolution. You will need to reduce your image’s size to the final dimensions you want. NOTE: Once you reduce resolution, you can’t go back!

University of Nebraska Medical Center Color Mode All web-ready photos need to be in the RGB (Red-Green- Blue) color mode Some images will come in the CMYK (Cyan-Magenta- Yellow-Black) mode, which is specifically for print and will not work correctly on the web.

University of Nebraska Medical Center Adjusting the Color Mode In Photoshop: With the image opened, click “Image > Mode > RGB Color” In Microsoft Office Picture Manager: This program does not allow you to change an image’s color mode. Saving it in the correct format, however, will ensure it’s web-ready.

University of Nebraska Medical Center Image Size and Cropping Image sizes can be manipulated to fit a limited size space, such as those used within the UNMC web templates Images inserted into a site at an incorrect size will either: a.Cause the space to distort to host the image, shoving text around and/or breaking your site; b.Be cut off by the frame designated for that image; c.Be automatically “shrunk” by the template and look terrible. Cropping is a useful way to reduce an image’s size and keep/increase the focus on your chosen subject

University of Nebraska Medical Center Resizing and Cropping Images In Photoshop: Cropping: With the image opened, select the Crop Tool ( ), drag it across the area you want to keep, then hit Enter. Resizing: With the image opened, click “Image > Image Size.” In the popup window, enter your smallest dimension in the Pixel Dimension group. Click OK. Making an image fit a set space: With the image opened, click “Image > Canvas Size.” In the popup window, uncheck “Relative,” enter your pixel dimensions, and click OK.

University of Nebraska Medical Center Resizing and Cropping Images In Microsoft Office Picture Manager: Cropping: With the image opened, select “Picture > Crop,” drag the black bars to surround the area you want to save, then hit OK in the right-hand bar. Resizing: With the image opened, click “Picture > Resize.” In the right-hand bar, click “Custom Width x Height” and enter the smallest pixel dimension. These will be relative. Making an image fit a set space: After resizing, use the “Picture > Crop” command to reduce your largest dimension to the right size. Your current pixel size is listed on the right under “Picture Dimensions”

University of Nebraska Medical Center Image Format Web browsers can only display three different image file formats: JPG (or JPEG), GIF, and PNG-24 JPGs are best used with images that feature many colors, such as photographs, but tend to produce larger file sizes GIFs are much smaller in terms of file size (thus loading faster) but have a more limited range of colors and are best used with simple graphics like logos, text, and drawings. Can also be transparent. PNGs are an improved GIF, with larger file size than a GIF but color ranges like a JPEG. Can do photos and transparencies well.

University of Nebraska Medical Center Saving an Image in a Web-Ready Format In Photoshop: With the image opened, click “File > Save for Web and Devices” In the right-hand side of the popup window, select either “JPEG,” “GIF” or “PNG-24” and check the “Optimized” box Click Save, then name and save the file. In Microsoft Office Picture Manager: With the image opened, click “File > Export” In the right-hand side, select your format under “Export with this file format” then click OK

University of Nebraska Medical Center File Size Every picture you see on a web browser must first be downloaded to the user’s machine (though it is often cached for faster loading later) Larger images take longer to load, or may cause a site to “hang” as it waits to download the image File sizes can be reduced by compressing a photo – reducing its quality slightly by removing a certain amount of data from the file Compressed images are smaller and easier to load, helping the whole site seem “faster”

University of Nebraska Medical Center Compressing an Image’s File Size In Photoshop: With the image opened, click “File > Save for Web and Devices” In the right-hand side of the popup window, enter “80” under Quality and click Save In Microsoft Office Picture Manager: This step should often be done before resizing Select “Picture > Compress Pictures” In the right-hand side, select a compression level that fits the basic size you need, then click OK

University of Nebraska Medical Center Image Accessibility People with visual impairments can access websites using screen readers, which “see” images set for them These readers rely upon alt-tags, brief descriptors embedded in the HTML, to describe the image to the browser Alt-tags are added at the time the image is added to your site, and should be added to all images Good alt-tags are descriptive, respect all HIPPA and privacy requirements, and are less than 10 words max

University of Nebraska Medical Center Adding an Alt-Tag to an Image In Red Dot: When in the Red Dot text editor, click the Insert Image ( ) button In the popup window, select the image you want to upload, then enter your alt-tag in the “Alternative Text” field, then click “Insert” If adding an alt-tag to a previously-posted image, click on the existing image then click the Insert Image button to adjust that image’s alt-tag.

University of Nebraska Medical Center Recap of Web Image Prep Process 1.Reduce the image’s resolution 2.Reduce image’s size by cropping and/or reducing scale 3.Save your image in web-ready format (JPG, PNG-24, or GIF) a.Compress image quality to 80% or thereabouts 4.Upload image to site. Add descriptive alt-tag for use by screen readers and people with low vision 5.Check image on the site to make sure it appears at the correct size, loads quickly, and has an alt-tag

University of Nebraska Medical Center Where Can I Access Web-Ready Photos? If you don’t have the time or resources to get original photography or graphics, we’ve got you covered. The Online Photo Collection is available at: This searchable database contains hundreds of pre-approved dynamic photographs for use at no cost, and is updated as PR expands the collection. Each photo is available in screen-ready and print versions as well – no need to reformat!

University of Nebraska Medical Center Adding Images to the UNMC Website

University of Nebraska Medical Center UNMC Web Templates All images are added to the site through the RedDot content management system There are a number of different, specific image sizes and rules to be used with the RedDot templates All these formatting rules are covered in the UNMC Web Style Guide at More will be added as more options for graphics and images are added to the templates throughout the year

University of Nebraska Medical Center Rotating an Image In Photoshop: With the image opened, click “Image > Rotate Canvas > Arbitrary” Enter the degrees you want to rotate, then click “CW” for clockwise or “CCW” for counter-clockwise, then click OK In Microsoft Office Picture Manager: With the image opened, select “Picture > Rotate and Flip” In the right-hand side, enter a positive number of degrees to rotate clockwise, or a negative number of degrees to rotate counter-clockwise

University of Nebraska Medical Center WWW Second Level Main Photo Example: Crop to 520 x 300 pixels Make sure document has a transparent background. If the image is the “background” layer when opened with a graphics program, then duplicate that layer then delete the original “background” layer. Rotate 1.5 degrees counter clockwise Save as.PNG with transparencies. In Photoshop, go to File > Save for Web and Devices, choose “PNG-24”, check the “Transparency” box and click Save.

University of Nebraska Medical Center College Main Photo Example: Crop to 428 x 458px Make sure document has a transparent background. If the image is the “background” layer when opened with a graphics program, then duplicate that layer then delete the original “background” layer. Rotate 1.5 degrees counter clockwise Save as.PNG with transparencies. In Photoshop, go to File > Save for Web and Devices, choose “PNG-24”, check the “Transparency” box and click Save.

University of Nebraska Medical Center Institute Main Photo Example: Crop to 421 x 256px Make sure document has a transparent background. If the image is the “background” layer when opened with a graphics program, then duplicate that layer then delete the original “background” layer. Rotate 1.5 degrees counter clockwise Save as.PNG with transparencies. In Photoshop, go to File > Save for Web and Devices, choose “PNG-24”, check the “Transparency” box and click Save.

University of Nebraska Medical Center Faculty/Leadership Portrait Example: Crop to 225 x 300px Save as.JPEG. In Photoshop, go to File > Save for Web and Devices, choose “JPEG”, for Quality select 80 and click Save. Once imported onto the page, right align the image and add horizontal and vertical margins of 10 pixels. In RedDot, right-click the image on the page and click Edit Image. Select “Right” under “Image Alignment:”, enter 10 into the “Horizontal margin:” and “Vertical margin:” boxes and click OK.

University of Nebraska Medical Center Images in Body Copy Example: Generally, no larger than 300 x 300 pixels and right-aligned to prevent crowding text Save as.JPEG. In Photoshop, go to File > Save for Web and Devices, choose “JPEG”, for Quality select 80 and click Save. Always keep a margin to separate text and image. In RedDot, right-click the image on the page and click Edit Image. Select “Right” under “Image Alignment:”, enter 10 into the “Horizontal margin:” and “Vertical margin:” boxes and click OK.

University of Nebraska Medical Center “Vital Signs” Image Example: Crop to have a max width of 160px and a max height of 111px Save as.JPEG. In Photoshop, go to File > Save for Web and Devices, choose “JPEG”, for Quality select 80 and click Save.

University of Nebraska Medical Center Are There UNMC Web Style Rules? The UNMC web style guide is now online and contains: These guidelines in greater detail Text and image formatting guides Explanations of UNMC’s overall web strategy The document will continue to evolve as we expand the tools and training for web developers. You may download it at the Branding Resources site (