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.
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?
Web or WebCMS Questions?
Call the EPA Call Center
1-866-411-4EPA (4372).
Computer Questions?
Call CTS
1-866-955-4CTS (4287).
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 EPA Procedures, Standards and 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 important to keep your graphics files small, as well as know which type of graphic to use.
- Reduce the number and size of graphics used on one page to decrease load time. The more graphics you have on a page, the more requests our users make, and the longer the page takes to load.
- Many 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 screen readers will skip the graphic.
- Specify the pixel dimensions with width and height attributes. For example,
<img src="image.jpg" width="101" height="97" alt="Region 8 states"/>.
- Don't scale images in HTML. Images should be compressed in both dimensions and file size with graphics software.
- Compress graphics files to the smallest reasonable size for quicker downloading. GIF and PNG are good formats for images with large areas of flat color, while JPEG is usually used for photos and drawings with color gradation. Try converting GIFs to PNGs and see if there is a saving. More often than not, there is. Developers often hesitate to use PNGs due to the limited support in browsers, but this is now a thing of the past. The only real problem is alpha-transparency in true color PNGs, but then again, GIFs are not true color and don't support variable transparency either. So anything a GIF can do, a palette PNG (PNG8) can do too (except for animations).
- Use smaller color palettes to reduce the size of GIFs and PNGs. GIFs and PNGs can usually be made using far less than 256 colors with little to no loss in detail. When you see an image useing four colors and a 256 color "slots" in the palette, there is room for improvement.
- Run pngcrush (or any other PNG optimizer tool) on all your PNGs.
- Run jpegtran on all your JPEGs. This tool does lossless JPEG operations such as rotation and can also be used to optimize and remove comments and other useless information (such as EXIF information) from your images. Also consider saving the JPEG to different compression rates in your graphics editing software.
- 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.
- Consider using CSS Sprites.
- 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
- Keep the original copy of files for later editing. Note that every time a JPEG is saved, you lose information.
- For further information about using graphics:
- Take the Using Graphics Well course in the EPA Web Training curriculum, sponsored by OPA.
- Review these resources online:
