Skip to:Main Content

Washington and Lee University

Washington and Lee University
Washington and Lee University Campus Image

Creating and Optimizing Images for the Web

Flash Tutorial on Sizing and Compressing

Sizing and Compressing Images

In order to maximize load time and image quality, images should be sized to the appropriate page dimensions and reduced to a resolution of 72 dpi before upload. If your image requires no cropping or color correction, simply go to the File menu in Photoshop and select Open. Browse to the image on your deskop or network drive and click the Open button.

To size your image, go to the Image menu and select Image Size. Make sure the Constrain Proportions box is checked in the Image Size dialog box and then enter the appropriate width for your image in pixels (not percent) in the Pixel Dimensions section. Click OK. The image will be resized to the width you selected, and the height will be constrained to retain the original proportions of the image.

Your image will probably get smaller on your screen once you click OK. Don't worry. Simply go back to the File menu and select Save for Web (or Save for Web and Devices). Here you will see your image in the web-ready size. You can adjust the image quality, size and format in this view before saving it for the Web.

JPEG OR GIF?

You can choose to save your image as either a JPEG or a GIF. JPEGs produce better image quality with a smaller file size for photographs, while GIFs work better for text or line art. If your image is a combination of text and photos (like a banner ad), it is usually best to save it as a JPEG.

File Size

When saving your image for the Web, you want to make the file size as small as possible without sacrificing image quality. For JPEG images, You can adjust the image quality in the Quality box of the Save For Web (or Save for Web and Devices) screen. As you adjust the quality up or down you will see the file size in the lower left corner of the screen change as well. It will also show you the load time on the slowest connection speed (28.8 Kbps). You want to aim for 30K or less for all of your images. The smaller the better, as your page will load faster.

For GIF images, you can reduce the file size by changing the number of colors you use in the Colors box. However, you’ll note that you begin to lose image quality quickly once you reduce the colors from the recommended 256.

Image Size

To change the image size of your image within the Save for Web function, click on the Image Size tab in the right column. Make sure the Constrain Proportions box is checked and adjust the width or height as necessary, then click Apply.

Saving Your Image

When you’re finished adjusting your image quality and size and are ready to save your image, click the Save button and select a destination for your saved image.

Optimizing Images for the Web

Photoshop is a very flexible tool that will allow you to create complex images and save/optimize them easily for Web viewing. The Window menu in the main Photoshop toolbar allows you to display a number of additional menus which will help you to create the images you need.

Useful Windows in Photoshop:

  • Tools: Gives you tools like the move tool for moving elements around in your document, the marquee tool for cropping, the dropper tool for color selection, the paint bucket tool for filling in color, and the type tool for adding text to an image.
  • Character: Allows you to select font faces and sizes, adjust spacing, and align text.
  • Layers: Allows you to create layered documents to facilitate the manipulation of text and images in your graphic.

Cropping Images:

Cropping your image is easy using the Photoshop Rectangular Marquee tool. (Dotted line rectangle at the top of the Tools menu). Click on the marquee tool and then in your image, and drag your mouse to select the section of the image that you want to crop. (If you hold the shift key down while you drag, it will make the selection square.)

To crop the selected area, go to the Image menu and select crop. You can then size your cropped area to a specific dimension using the Image Size function discussed above.

  • Tip: Most images in the CMS are constrained to a specific width with a flexible height, so you need only specify a width for your image to appear correctly on the Web. Thumbnail images are a notable exception—they are set at 80 pixels square.

Cropping to a Set Dimension:

To crop your image to a specific proportion (constrained height and width), select the horizontal Marquee tool and go to its toolbar (below the main Photoshop toolbar) and choose Fixed Ratio in the Style dropdown menu. Specify your desired width and height and then click in the image using the rectangular marquee tool. The dimensions of your selected area will be fixed at the dimensions you specify. You can then size your cropped area to a specific width or height using the Image Size function discussed above.

Creating Banner Ads and Multi-Layered Images

Layered documents are useful when you are creating an image that combines multiple photographs, or photos and text. Placing each element (photo, text) on a separate layer in the document allows you to manipulate the elements independently to create your desired layout before saving the image.

To create an image using layers, go to the File menu and select New. Specify your desired dimensions in pixels (see a list of common dimensions for banner ads and other images in the system) and make the resolution of your image 72 pixels/inch (dpi). Make sure the Color Mode selector is set to RGB color and choose your Background contents (backgrounds can either be white, transparent, or the color currently set as the background color in your tools menu.) Give your image a name, click OK and it will create the image in a new window.

In your Layers window you will see that your image has a single, locked background layer in the color (or transparency) you selected. If you want to edit this layer, the easiest way to do so is to right-click (PC) or control-click (Mac) and select Layer from Background, which will give you the option to create a new, unlocked layer.

Adding Layers

To add additional layers to the image, either go to the Layer menu in the main toolbar and click New, or click on the little page icon at the bottom of the Layers window. You can then add images or text to your new layer.

Adding Images

To add an image, open the image in Photoshop and make sure that the height and/or width are set to fit within the size of your new layered image (resolution must be 72 dpi). Select part (using the marquee tool) or all of the image, and copy and paste it onto the new layer of your image. You can move the image around in the layer using the Move (arrow) tool or the arrow keys of your keyboard.

Adding Text

To add text, create a new layer in your Photoshop document and click on the Horizontal Type Tool (T). Click on the layer and select the area to place your text. You can then type or paste your text into the text box and change font face, style, etc. in the Character window. To select all of the text in the layer to make changes, you can highlight the text in the text box or double click on the capital T in the desired text layer in your Layers window. You can move the text around in the layer using the Move (arrow) tool or the arrow keys of your keyboard.

Adding Color

There are two common ways to add color to any layer of your document.

  • Using the Color Picker: Go to your Tools window and click on the Set Foreground tool (the left square of color toward the bottom of the window). A Color Picker dialog box will open. To specify a color from the Approved Color Palette for the W&L Web site, open a browser window to the Color Palette Page. Each of the colors on that page has an associated 6-digit hexidecimal code beginning with a # sign. Copy that code excluding the # and paste it into the # box in the bottom center of the Color Picker dialog box. The Foreground Color picker will snap to that color. Click OK and the selected color will now appear as the foreground color in your tools window.
  • Using the Dropper Tool: If you want to match a color from another image (i.e. the background of a photograph), the Eyedropper tool is your best bet. Go to your Tools window and select the eyedropper icon toward the bottom of the window. Place the eyedropper over the color you wish to pick and click. This will set the foreground color to the color you selected. If you wish to note that color's hexidecimal code for future reference, you can click again on the Set Foreground tool and it will open a Color Picker dialog box which indicates the hexidecimal code in the # box in the bottom center.

Linking Layers

If you want to move two or more layers together, you can link them by highlighting them using control-click in the Layers window and clicking on the Link (chain link) icon at the bottom of the window.

Showing/Hiding Layers

If you want to see what your image looks like without one of more layers, you can turn off specific layers by clicking on the eyeball icon next to the layer in the layers window. Clicking again in that box will make the layer viewable once more. Once your image is finished, you will want to save the layered Photoshop (.psd) file for future reference using the regular Save function in the File menu. This will enable you to edit the image or modify it for future use if necessary. You can then Save for Web, which flattens the layers, discards hidden layers and creates a Web-ready file for use online.

Special Effects

Photoshop has a wide range of tools to add special effects to your images. We recommend that you keep things simple, sticking to the Web Services Approved Color Palette and Fonts, and keeping special effects to a minimum. That said, there are a few tricks which can help to optimize your graphics for visibility and legibility:

Drop Shadows

Drop shadows can help increase legibility of text on a busy background or add depth to an image. To add a drop shadow to a text or image layer in your Photoshop file, go to the Layers menu and select Layer Style, then Drop Shadow. Select Normal in Blend Mode and set the color of the shadow by clicking in the rectangular color box next to the Blend Mode drop-down. You can play with the size, angle and opacity of the drop shadow using the Opacity, Angle, Distance, Spread and Size tools. Once the shadow appears as you want it, click OK. You can later remove the Drop Shadow effect by control-clicking on the FX icon in the layer and selecting Disable Layer Effect.

Bevel and Emboss

Borders

If you would like to add a border, white or otherwise, to a photo, the easiest way to do so is to size the photo slightly smaller than you need it and increase the canvas size to add colored space around it. To do so, go to the Image menu and select Canvas Size. Specify a new canvas size in pixels, making sure to make it the same number of pixels larger in both width and height than your current image size so that the border will be even on all sides.

Color Correction

If your photo is over- or under-exposed, you can adjust the exposure and color quality by selecting Adjustments in the Image menu. Select Levels and play with the Input levels to achieve the desired effect. You may find the Color Balance and Hue/Saturation tools to be equally helpful.