Web Images

Looking for just the right image to communicate your point? Check out the Public Affairs Office’s online image gallery on the NPS Brand and Style Guide Resources website, http://intranet.nps.edu/style_guide/Resources.html. Standard DOD/DON guidelines must be taken into account when posting imagery. Check out the latest DON instructions for the details. Images must be original, free of copyright, or been granted permission for use.

See the image repository created by the NPS Library: https://libguides.nps.edu/military-images

Images are also available through an ITACS subscription with iStock.com.

WSG - Images - Preparing your images for the Web

Preparing your Images for the Web

The images you create or acquire for your website should be optimized. Optimizing includes:

Saving the image as a file type that can be displayed across the web
The image file size is reduced (compressed) for optimal web delivery while maintaining image quality.

File Size Guidelines

For background images, try to keep the file size around or below 10KB.
For banners or header images, a file size up to 60KB is acceptable.
For high end photographs, try to keep them around 100KB maximum.

Boudreaux, R. (2011, April 14). Tips for optimizing your web images [Web article]. Retrieved Dec 1, 2015, from https://www.techrepublic.com

Two types of images appear on the web – Bitmap/Raster images and Vector images. Bitmap formats (JPG for example) are best for images that have a wide range of color gradations, such as most photographs. A bitmap image, however, cannot be scaled without losing quality. Vector images (such as SVG) are created using mathematical formulas and can be scaled to any size without loss of quality. For more information on these two image types, see this page: https://etc.usf.edu/techease/win/images/what-is-the-difference-between-bitmap-and-vector-images/.

The web has four primary images file types: JPG, PNG, GIF, SVG. Recommendations for usage are found in the following dropdown menu.

WSG - Images - File Types

Usage: Primarily used for digital photos, complex multi-color images.
Image Type: Bitmap image
Compression: It has a “Lossy” compression. When an image is saved in this format, the algorithm uses inexact approximations (or partial data discarding) to represent the content. This approximation results in an image with a smaller file size and reduced quality that will load quickly across the web. This format is good when you want multi-color images that load quickly.
Browser Support: Works universally on the web, in all browsers.
Example JPG image (706px x 471px):

Usage: Recommended for logos, simple graphics, and graphics where you want to retain transparency.
Image Type: Bitmap image
Compression: It has “Lossless” compression. It stores an exact pixel-by-pixel representation of the image, but requires more space (larger file size). PNGs are suitable for logos. Lossless compression generally, but not always, results in larger files than lossy compression (Wikipedia)

Browser Support: Works universally on the web, in all browsers.
Example PNG image:

Usage: Very simple graphics, logos, and animations; Color palette is limited to 256 colors, so not used for photographs.

Image Type: Bitmap image
Compression: Lossless compression
Browser Support: Works universally on the web, in all browsers.
Example GIF image (the animation was created by Wikipedia user Marvel and distributed via GNU license):

Usage: SVG (scalable vector graphics) is a vector image type that is scalable without any loss of resolution or definition. Maintains quality with scaling. Can be interactively scaled using CSS and is used for animations.
Image Type: Vector image
Compression: Lossless compression
Browser Support: Does not work in all browsers - Not supported in IE8 or earlier.