Web Graphics and Formatting 101February 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 96-128 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 ImagesIn 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 ImagesIn 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:

http://info.unmc.edu/app1/brandphotos/

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 http://info.unmc.edu/brandingresources.htm

• 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: http://www.unmc.edu/aboutunmc.htm

• 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: http://www.unmc.edu/nursing

• 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: http://www.unmc.edu/mmi

•  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: http://www.unmc.edu/chancellor.htm

•  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: http://www.unmc.edu/alliance/admissions.htm

• 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: http://www.unmc.edu/research.htm

•  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 (http://info.unmc.edu/brandingresources.htm)