Below are several suggestions related to preparing images for use on your website. These are general guidelines that are appropriate for any image on the USF site, whether in banner boxes or body content areas. Many more tips on Photoshop techniques for improving the quality of your images can found on our blog.
There are a number of standard images available for use on your site in the Ektron library in the folder labeled: images/approved. These stock USF photos are divided into sizes based on the standard banner boxes. If you have any questions or need help processing images, please contact Tom Henke in WC&S at firstname.lastname@example.org or x2074.
1. Crop to Subject
Frequently, what we respond to in a photograph is a small part of the overall image. With the web, we are always trying to create graphics with file sizes that are as small as possible. As part of that reduction process it is important to remove from the image anything that is drawing attention away from the subject of the photo. Find the subject of the photo and make that and only that what fills your image area. If there's extra background info in the image, crop down to what is important. Here's an example of a picture that is not what the photographer thinks it is and how to improve it through cropping:
The image on the left is really a picture of the front of Lone Mountain. The image on the right is clearly the Transfer Admission Team.
2. Reduce All You Like, But Don't Enlarge
Photos reduce well and you can keep them sharp and crisp with several techniques. But digital photos don't enlarge well in most cases. Pixels don't come from nowhere so when you enlarge an image Photoshop "guesses" what to fill in that new space with. This is an invitation to jaggies or blur. If an image has to be blown up more than 20% you should seriously consider whether it needs to be used as it will almost always end up with noticeable artifacts. Get the original raw photo from the photographer if possible.
As the image is enlarged, the quality of the image degrades — with more artifacts, color splotches, and a "softer" feel.
3. Resize to the Real Size
All photography on web pages should be saved to the actual physical size it needs in its final destination. This means if you are using an image in one of your banner boxes, the image should be exactly the pixel dimensions of that banner box and should not be resized using HTML. Likewise, images used within body content areas should be edited to be the physical size they need to be in that usage.
Failure to resize photos to the proper physical size causes several sad outcomes on web pages. In the case of banner boxes it will cause images to burst the dimensions of the box or not fill the entire box area. When combined with captions this can cause especially alarming results. Resizing using HTML causes problems with load times as browsers still have to download the full image then resize it for the page which eats bandwith and makes pages load slowly. Resizing in HTML also causes images to appear soft or blurry as the pixels are squished in unpredictable ways.
The pixel dimensions of our standard banner boxes are (dimensions are width x height, in pixels):
150 x 150
560 x 150
550 x 320
730 x 150
730 x 320
960 x 320
A range of 275px – 425px is the best target width for images to be used in body content areas. Body content area width on most USF web pages is 560px. Pages without right or left navigation have a width of 730px. There is no reason for any photo be wider than that in content areas, and in most cases something half or two-thirds of the width of the page gives the best presentation, particularly in cases with runaround text.
Left is an example of an image that is taller and wider than the banner box it lives in. The box will not mask out the additional size, the image will spill over the banner area into body copy or gutters. Right is an example of using HTML code to resize an image to squeeze it into a banner box, creating a very unpleasant presentation.
4. Fix Color Problems
It's rare that a photo does not require some color correction. Every camera has unique color bias issues and each photo shoot presents particular problems for lighting. The key to color correction is to look at the photo and identify its problems before trying to correct them. Notice if the image is too dark overall, or has a blue tint, or a lack of contrast and try to solve that problem first. Also remember that, in general, web images will need to be a bit brighter and more colorful than in other applications so adjusting the white point and saturation of a photo are almost always necessary. Check our blog for more detailed tips on correcting common color problems. Here's a few basic things to remember:
- Always make a copy of your image and save it as a .psd file. That way you can always start over if you make a mess.
- Use layers in Photoshop to fix color issues. This will allow you to change your mind and do more or less adjusting as you work.
- The adjustment layers for Curves and Levels do exactly the same thing, they just use different models. Use one or the other, whichever makes more sense to you.
- Use a Vibrance adjustment layer as a final sweet touch. It is a quick way to add a little pop to your images. It also includes a slider for Saturation (intensity of color) so you can do both adjustments in one place.
- When working on RGB images, color adjustments are additive. You can compensate for a bias towards one color like green by removing green, or by adding blue or red. Either method will change the balance and improve the image.
- Photos from inside our classrooms are frequently skewed too yellow due
to the lighting on campus. So plan to compensate for that. Adding blue
is often the best solution.
Here's an example of an image that is too dark due to being lit from the back. A little attention to lightening the darkest part of the image, then boosting saturation, vibrance, and shifting the blue tones slightly makes a large difference.
5. Sharpen, But Only a Little
When you reduce the size of an image pixels get thrown out. That makes edges in your photo less distinct as Photoshop tries to compensate for the missing pixels as best it can. This means your image will likely feel soft or blurry by the time it is reduced to its final size. Using the Unsharp Mask filter in Photoshop allows you to add a bit of artificial crispness back into the image, but a little goes a long way so be very gentle. It is usually better to reduce the photo a little, sharpen a little tiny bit, reduce a little more, and sharpen a little more, in three or four steps, until you get down to your final size. Check our blog for specifics.
Left is an unsharpened image which is a little soft. Center is what happens when too much sharpening is applied: wild contrast, dark edges, and surreal artifacts. Right is with a small, subtle sharpening to make the image crisp.
6. Save the Right Way
First, save your file in native Photoshop format with all adjustments on individual layers. That way you can always return to the master file if you need to. Then save your image using the Save for Web dialog box (below). If it's an photo you should always save it in JPEG format. PNG format will typically produce a file at least twice as large as JPEG so should be avoided in most cases and GIF should be used only for flat color graphics.
In the Save for Web dialog box you can view your image 2-up or 4-up and apply different settings to each preview pane to find what settings give you the best looking final image. Find a quality setting (upper right corner) that gives you a preview that looks good but is as physically small in file size as you can get it. Typically a quality setting in the 50-75 range looks nice. File sizes (seen lower left corner) for 150 x 150px banner images can almost always be kept under 25k. For larger images like 560 x 320px banner boxes 75k or so is more common. 100k is a reasonable maximum upper limit — you should be able to make almost any image on your pages smaller than that.
7. Upload, Place, and alt-tag
After you have finished working on your image, upload it into the Images folder in your program/department website. Then place the image on your page and make sure to change the alt-tag and image title in the HTML to something that describes the content of the image. If you title the image descriptively when uploaded to the library, Ektron will use that title in the HTML and you do not need to modify the code at all. Here are the upload steps:
- Log into Ektron, open the Workarea
- Click on the Library tab at the top of the Workarea
- Use the folder structure on the left to navigate to your site, then open the Images folder in your site
- Click on the Add button at the top of the window
- In the dialog box use the browse button to find the image on your hard drive and upload it.
- In the title field, give the image a descriptive title. This title will be used to populate the alt-tag and title-tag in your HTML. ADA compliance requires the title to be information that describes the content of the image in specific detail. A good title will also improve search engine results.
- Open your page or banner box where you want to use the image. Navigate to the location you want to use the image.
- Click on the library button in the Ektron editor and navigate to your images folder. Select the image.
- If you used an older or general library file, look at the HTML code and make sure the alt and title tags read descriptively. If they do not, add a descriptive title inside the quote marks in the code. [eg: <img src="/uploadedImages/Images/Approved/150x150/airchurch_150.jpg" alt="Univ of San Francisco and St Ignatius church from the air" title="Univ of San Francisco and St Ignatius church from the air" />]