Region home pages or any home page that has a photo in the top right corner should have straight edges and square corners. Project pages and other photos online should have straight edges and square corners .
Important Image Notes
If you make changes to a graphic that you have already turned into a GIF or JPEG, start over with your original image file, which might be a Photoshop file, for example. Don't make a change to the GIF or JPEG and then compress it again. The quality of the image degrades each time you do this.
Also, when turning an image into a Web graphic – the image should be in RGB or Grayscale. In Photoshop, change this using the Image pull-down menu and choose IMAGE, MODE, RGB Color.
Do not use Clip Art
Clip art refers to any prepackaged artwork, graphic images, and other designs in digital form. Clip art cheapens our brand by making us look unprofessional. This standard applies to Web pages, PowerPoint and print publications.
If you need help with graphics, please contact Steve Riddle in the WSDOT Graphics Communication Office (360) 705-7421.
Photos With Graphic Enhancements
Need an arrow, circle or other graphic added to your photograph to highlight a specific part of your photo? If so, let us help. Please send your original photo, with a description of what you are trying to highlight, to WebHelp .
Image Size Requirements
The size of a graphic includes two factors - the "weight" in bytes and the size in pixels.
The required sizes are:
No larger than 150 pixel width (185 pixels for project pages)
Less than 10 KB
No larger than 510 pixel width
(No more than 3 or 4 per page)
All images need to be optimized before being placed in the Resource Manager and inserted into the page.
Resizing images is not as easy as dragging the corner in to reduce the pixel size - it still weighs the same in bytes.
Use an image editor such as PhotoShop. If your office doesn't have access to a photo editor software or staff able to optimize photos, contact WSDOT WebHelp and we can optimize them for you.
Types of images
Ideal for photos.
Color photographs, complex images, images that contain smooth gradients and subtle color variations, and images requiring more than 256 colors, use the JPEG format. These are files with the .jpg file extension.
How to optimize a JPEG for the Web:
- Open image editing software.
- View at magnification to see entire image.
- Crop out any parts of image not needed. Set to 100% magnification.
- Check image size by going to Image > Image Size.
- Files should be no larger than 510 pixels wide for larger images and 200-250 pixels wide for smaller images.
- Go to File > Save for Web.
Preview:Choose 2-Up or 4-Up
Click on preview windows – experiment with quality settings
(note: usually 35 good setting).
- Click on Optimized and leave Progressive box unchecked.
- Take note of file size (30-40k for 510 pixel images, under 15k for 200-250 pixel images).
- Click OK.
Ideal for maps, logos and headers.
GIF is the standard format for compressing images with flat color and crisp detail, such as line art, logos, simple cartoons, or images combined with text. The GIF format will preserve the sharp lines of shapes and text. Graphics that you create in a vector drawing program such as Freehand or Illustrator should be saved in the GIF format. These are files with the .gif extension.
Do not use
Animated GIFs, clip art or stock photos.
How to optimize a GIF for the Web:
- Open File in PhotoShop.
- Select File > Save For Web.
Settings – should be set to:
Select Number of Colors
Lock in each color that must be preserved. Select the eyedropper at the far upper left, click on the color in your image that you want to lock in, and you will notice a small white square appear in the color cube for that color in the Color Table. Then at the bottom of the color table, click on the "lock" icon to lock in that color. You can do this for each color you want to preserve.
- Click OK.
- Your image is optimized and ready to be added to your resource manager.
Different Palettes that can be used in Save for Web Dialog Box
The Adaptive palette is used most frequently since it will let you reduce the number of colors to 32 or fewer. It yields more detail overall throughout the color spectrum. This palette adapts to the colors in the image. It picks the most frequently occurring colors in the image for the Color Lookup Table.
Favors broad areas of colors and the preservation of Web colors.
Perceptual: Gives priority to colors for which the human eye has greater sensitivity.
Web: Equates to saving your image in the worst possible color mode just to be sure it will look good on 256-color monitors.
Dithering takes two colors from your color table and calculates a missing intermediate color. An example would be the spray of pixels you see making up a gradient or blend. There are several styles to choose from. Besides diffusion, noise dither is also a good choice. The advantage of diffusion is you set the amount of dithering using the slider. Since reducing colors is the key to smaller file size, reduce number of colors just before you see major drop in quality, then use the dithering slider to improve how the image looks as your keep an eye on file size. Dithering increases file size but also improves image quality. You can counteract this file increase using Lossy slider.
Uses patterns of color and stores them in a compression table. The Lossy slider setting determines how much you want to reuse those patterns. The result is better image compression.
Now that they are optimized for the web, you can add the images to your page.