Prepping Your Images for the Wheaton Website
Images are an important feature on your website, showing people, events, atmosphere, and so much more. This document takes you through a few key few steps to make your images web-ready and web-fabulous.
Considerations when using images:
1) Use images sparingly. Be sure that the images you use support your department's message.
2) Knowing how your image will be used helps you determine an appropriate size.
3) Size is important to keep in mind as your audience may have older browsers or slow internet connections.
Thumbnails should be 125 pixels wide or less. They are often used only in the News column (right column).
Images mixed with page text can be up to 200 pixels wide.
Images that span the width of the center column should be no more than 350 pixels wide.
Open the original image in your image editing software (such as Photoshop).
Immediately select File|Save as. . . and give your file a new name. This will preserve the original and, if you select a related filename, make it easier for find the source later on (ex. original = bridge.jpg; edited version = bridge1.jpg). Find a simple system, let others know (if they work on your images too), and be consistent.
Set the resolution of the image.
The standard image resolution for web images is 72 pixels or dpi (printing requires much higher resolution of 300 dpi or more). You can often improve a photo dramatically by doing a few simple things, including cropping it and adjusting brightness and contrast. Image editing software (again, such as Photoshop) will allow you to preview possible changes before you finalize them. Select the "save for web..." option and use the slider to manipulate the image before saving.
Save your image
Before you get inundated with images, set up a folder (wherever is most convenient) titled "Images." Use this to house your images. Choose file names that make sense and be consistent--take a step back and think if someone were to work on your computer, without any explanation, could they understand your image filing system. Make sure to use lower case letters and not to use any spaces or punctuation other than hyphens and underscores for any files to be used on your website.
The following instructions are for PhotoShop users.
Once you have your image "web ready" and it has been saved:
1) Select File|Save for web
2) Make sure to use "jpg" if it is a photo or "gif" if it is text or line art.
3) You will see a screen showing you the image you are saving. If the quality is acceptable, click OK; if not, for images (.jpgs) you can adjust the quality by moving the Quality arrow back and forth. You will not have to make this adjustment for .gifs. When you are satisfied, click OK.
4) The next screen will ask you to name your file. Again, if this file is an image, make sure this file is a .jpg. If this file is a text item or a line drawing, it should be saved as a .gif.
For those requiring assistance with PhotoShop, you can utilize training resources on Element K. For basic image preparation, the best courses to take are:
Self-paced Courses
Photoshop® CS: Basic Image Enhancement (for PCs)
Photoshop® CS: Basic Image Enhancement (Macintosh)
Specific sections that may be helpful:
Photoshop's Environment
Sizing Images
Adjusting Images
Saving Completed Images
Self-paced Courses
Photoshop® CS2: Exploring Photoshop CS2 for Macintosh
Photoshop® CS2: Working with Images for Macintosh
Specific sections that may be helpful:
Sizing Images
Photoshop® CS2: Exploring Photoshop
Problems, Questions, Concerns?
Contact the Web Strategy Team (at web@wheatoncollege.edu or x3506):
- if you have forgotten your password,
- for general inquiries and editor assistance beyond our Help Pages,
- to set up a new account for a content editor, and
- for content issues on Wheaton pages outside of your area.