Add images to a page in CMS

Uploading and inserting images is a two-step process.

Photo Standards

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:
 

Thumbnails

No larger than 150 pixel width (185 pixels for project pages)
Less than 10 KB
 

Large Images

No larger than 510 pixel width
30-40 KB
(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

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

 

JPEG

 

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:

  1. Open image editing software.
     
  2. View at magnification to see entire image.
     
  3. Crop out any parts of image not needed. Set to 100% magnification.
  4. Check image size by going to Image Image Size.
  5. Files should be no larger than 510 pixels wide for larger images and 200-250 pixels wide for smaller images.
     
  6. Go to File Save for Web.

    Settings: JPEG 
    Preview:Choose 2-Up or 4-Up
    Click on preview windows – experiment with quality settings
    (note: usually 35 good setting).
     
  7. Click on Optimized and leave Progressive box unchecked.
  8. Take note of file size (30-40k for 510 pixel images, under 15k for 200-250 pixel images).
     
  9. Click OK.

 

GIF

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:

  1. Open File in PhotoShop.
     
  2. Select File Save For Web.

    Settings – should be set to:
    GIF 
    Adaptive 
    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.
     
  3. Click OK.
  4. Your image is optimized and ready to be added to your resource manager.

Advanced Settings

Different Palettes that can be used in Save for Web Dialog Box

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

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

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

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


 

To upload an image to the Web server   

  1. Place the cursor where you want the image to reside on the page.
     
  2. Click on the Image Manager button.

    The Image Manager appears.
     
  3. Navigate to the folder location where you would like to store the image. Once you have reached your destination folder, click on the folder. Doing this copies the folder address to the Directory box.

    To view the sub files or folders, double-click on the folder.
     
  4. Click on the Upload Image tab.
     
  5. Click on Browse , locate your image file.

    Display Name – The name you enter here will appear in the Resource Gallery. It will not display on your page.

    Description – You might want to leave information about the file for future users. Use this option at your discretion.
     
  6. Click Upload.

    Your image is now uploaded to the CMS Web server.

 

To insert an image onto your Web page and add alternative text   

  1. Enter a short description of the image in the Image Alt Text field.

    Image alt text field

    You must include this short description on images to comply with the American Disabilities Act.
     
  2. Click Insert .

    The image is placed on your page.
     
  3. To revise or change alt text already entered, right-click on the image.

    Select Set Image Properties.

    Go to the Image Alt Text field to revise the text.

 

To link an image to a Web page   

  1. Select the image.
     
  2. Click on the Hyperlink Manager button.

    The Hyperlink Manager appears.
     
  3. On the Hyperlink Manager , insert the Web address of the page you want to link to in the field marked URL .

    If is it a page within CMS, use the round blue icon to locate the Web address.

    If you are linking to a page on an external site, enter the full Web address beginning with www .
     
  4. Leave the rest of the fields at their default settings.
     
  5. Click OK .

    The image is now linked.
     
  6. Using the Web Author Console , click on  Preview , and test your link.  

    When the browser opens in preview mode, click on the image to make sure it takes you to the right Web page.


You can also add PDF links or make a map for your page.

Once your page is saved, take another look at it to
get your pages found on the Web.