Site Help
Topics
Glossary
Site Map
Many links on the Web Guide are available to EPA Intranet users only. If you are an outside contractor working for EPA, please contact your EPA representative for more information. If you are another federal agency or other party interested in EPA's web policies and procedures, please contact EPA through the "Contact Us" page on this site.
Questions?
Call the EPA Call Center
PDF Disclaimer
You will need Adobe Acrobat Reader to view PDF files. See EPA's PDF page for more information about getting and using the free Acrobat Reader.
Tips and Tricks for Graphics
EPA has many approved procedures, standards and guidance for Graphics and Multimedia. These are requirements on the US EPA web site. Also see: all EPA Procedures, Standards and Guidance (http://yosemite.epa.gov/oei/webguide.nsf/standards-guidance).
The use of graphics is a very important aspect of web design. Not only do graphics make web pages more visually appealing, they can often portray information in a way that text cannot. Because graphic files add to the load time of pages, it is very important to know how to keep your graphics files small, as well as which type of graphic to use in different places.
- Conform to Standards and Guidance for graphics on the Web contained in the Web Guide: http://yosemite.epa.gov/oei/webguide.nsf/approved_cat?openView
&RestrictToCategory=Graphics+and+Multimedia
- Keep the number and size of graphic files used on one page to a minimum to decrease load time. Obviously, the more graphics you have on a page, the longer it is going to take to load.
- A standard EPA web page should not exceed about 50KB, including standard page elements, text contents, and graphics. Standard elements are around 7KB, so add up the text and graphics file sizes to determine the page size.
- Most graphics can be around 200 pixels wide and still convey useful information.
- Specify alternate text within the image tag with the alt attribute. For images that don't require alternate text specify alt="" so that a screen reader tool will skip over the graphic. Refer to the presentation made at the April 2005 Web Workgroup meeting in Washington, DC for more information: http://intranet.epa.gov/webgroup/meetings/04-05/descriptions.html#cont4
- Specify the pixel dimensions within the image tag with width and height attributes. For example, < img src="../images/region8.jpg" width="101" height="97" alt="Region 8 states outlined in blue" > This allows the page to load quicker because the browser will not have to determine the WIDTH and HEIGHT.
- Do NOT use WIDTH and HEIGHT attributes to shrink an image. Instead, images should be compressed in both physical size and memory (size in kB) by using graphics software. For more detailed information on graphics file formats and image compression see the Product Review guide to Making Web Graphics Smaller
- Do not use graphical buttons on the EPA web. Instead, use a list of text links. Rationale: Encouraging CSS formatting!
- Web graphics should be in .gif or .jpg format. Compress graphics files to the smallest reasonable size for quicker downloading. GIF (.gif) is a good format for images with large areas of flat color, while JPEG (.jpg) is usually used for photos and drawings with color gradation. Please visit the following for more information: http://www.epa.gov/productreview/guide/graphicsize.html
- Reduce the size of GIFs using smaller color palettes, thereby decreasing download times. Gifs can usually be made using far less than 256 colors with little to no loss
in detail.Please visit the following form more information: http://www.epa.gov/productreview/guide/graphicsize.html
- For detail specific pictures use a JPEG image. JPEGs incorporate millions of colors into their pallette, so the are often more crisp. However, because of the amount of colors involved, they can be larger files, so consider saving the JPEG to different compression rates in your graphics editing software. See: http://www.epa.gov/productreview/guide/graphicsize.html
- For larger images, consider using thumbnails on your main page and linking to the larger image on a separate Web page rather than making the larger image inline. For more information about handling thumbnails, please visit: http://yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/charts
- When creating graphics with transparent backgrounds, if the background color assigned to be transparent is the same color as the Web page background (white), the graphic will be much cleaner in appearance
- For copyright issues please visit: http://yosemite.epa.gov/OEI/webguide.nsf/content/copyright
- To learn about the policy on Children’s Privacy and Copyright: http://www.epa.gov/privacy/policy/other/2190_2.pdf
- Want to use pictures of EPA employees? http://yosemite.epa.gov/OEI/webguide.nsf/policy/personal
- Using thumbnails: http://yosemite.epa.gov/OEI/webguide.nsf/standards-guidance/charts
- The Graphics Workgroup suggests keeping an original copy of files at higher resolutions for later editing. Note that every time a jpg is saved a bit of information is lost in the file.
- For further information about using graphics:
