General Guidelines

Images can be very beneficial to your department's web pages and this section will assist you in the proper use of images within the City's website.  Use the following guidelines and information any time you need to add images to your web pages.

• All images must be uploaded to the City's image server using the image upload tool.
• Do not link to an image on an external website.
• Use images sparingly and only use images that contain enough text to support them.
• Do not upload or display copyrighted images without written consent from the artist or photographer and clearance from the Media and Communications Office.
• Do not apply borders, shadows, beveled edges, or any other embellishments to images.
• All images must have descriptive alt text.
• All images must be aligned left or right to allow for text wrapping. If the image must be wider and will not allow text wrapping, then make sure it is wide enough to fit the entire content area. The Dimensions sections cover this.
• Do not use images to display text or important information unless that information is also available in the text of the page.

Image Filenames

Filenames are often overlooked when creating images and PDFs.  When naming these documents it is best to offer descriptive names and separate words with either an underscore or hyphen.  The names do not have to include every single detail of the image or document but some important keywords that describe the image or document would be beneficial to your page.  For example, if you have an image that consists of a bicyclist riding down Pacific Avenue, then the filename should be, "Bicyclist-Riding-on-Pacific-Avenue."

Dimensions and Resolution

Image dimensions, resolution, and file size are very important to how quickly a page loads in our users' browsers. If the dimensions, resolution, or file size are too large or there are too many large images on a page then the users may skip to another section or leave the site entirely due to the increased load time. It is very important to keep all settings to a minimum.

All uploaded images should have a width and a height that is appropriate for the content. For example, if your image will only be 275 pixels wide and 175 pixels high, then upload an image that is no larger than this. The image to the right is 275 pixels wide and 175 pixels high.

The maximum width for images should only be used for certain images. Banner images or image that display a great amount of detail would be perfect examples of this. A banner image is generally a wide, short image that may advertise an upcoming event. Below is a sample of what a banner image could look like.



For banner images follow the guidelines listed below.

• Uploaded image width must be no larger than 730 pixels when using a one-column page layout.
• Uploaded image width must be no higher than 530 pixels when using a two-column page layout.

Other images certainly have a maximum width but use it sparingly. If your image only needs to be 275 pixels wide in the page, then only upload an image that is 275 pixels wide.

Layout

All non-banner images must be aligned to the left or right of the content area with the following margins applied.  Also, be sure to place images next to relevant text when possible.

Questions

The Media and Communications Office is here to help. If at any point you need assistance with the content of your pages, feel free to contact Goldin Doles at (253) 573-2506 or via email.