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 .
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.
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.
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 .
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.
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:
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:
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.