Web Images

Nested Applications
WSG - Images - Image Repositories

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/militaryimages

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):
  • image
  • 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:
  • NPS Logo Blue
  • 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):
  • animatied GIF by Marvel
  • 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.
<rect fill="#ff9900" height="100" id="background" rx="4" ry="4" width="100"></rect> <rect fill="#ffb13b" height="50" id="top-left" rx="4" ry="4" width="50"></rect> <rect fill="#de8500" height="50" id="bottom-right" rx="4" ry="4" width="50" x="50" y="50"></rect> <g fill="#ff9900" id="circles"><a href="http://www.w3.org/Graphics/SVG/" target="_parent" xlink:title="W3C SVG Working Group home page" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="50" cy="18.4" id="n" r="18.4"></circle> <circle cx="72.4" cy="27.6" id="ne" r="18.4"></circle> <circle cx="81.6" cy="50" id="e" r="18.4"></circle> <circle cx="72.4" cy="72.4" id="se" r="18.4"></circle> <circle cx="50" cy="81.6" id="s" r="18.4"></circle> <circle cx="27.6" cy="72.4" id="sw" r="18.4"></circle> <circle cx="18.4" cy="50" id="w" r="18.4"></circle> <circle cx="27.6" cy="27.6" id="nw" r="18.4"></circle> </a></g> <g id="stars"><a href="http://www.w3.org/Graphics/SVG/" target="_parent" xlink:title="W3C SVG Working Group home page" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M 63.086 18.385 c 0 -7.227 -5.859 -13.086 -13.1 -13.086 c -7.235 0 -13.096 5.859 -13.096 13.086 c -5.1 -5.11 -13.395 -5.11 -18.497 0 c -5.119 5.12 -5.119 13.408 0 18.524 c -7.234 0 -13.103 5.859 -13.103 13.085 c 0 7.23 5.87 13.098 13.103 13.098 c -5.119 5.11 -5.119 13.395 0 18.515 c 5.102 5.104 13.397 5.104 18.497 0 c 0 7.228 5.86 13.083 13.096 13.083 c 7.24 0 13.1 -5.855 13.1 -13.083 c 5.118 5.104 13.416 5.104 18.513 0 c 5.101 -5.12 5.101 -13.41 0 -18.515 c 7.216 0 13.081 -5.869 13.081 -13.098 c 0 -7.227 -5.865 -13.085 -13.081 -13.085 c 5.101 -5.119 5.101 -13.406 0 -18.524 C 76.502 13.275 68.206 13.275 63.086 18.385 Z" id="black-star"></path> <path d="M 55.003 23.405 v 14.488 L 65.26 27.64 c 0 -1.812 0.691 -3.618 2.066 -5.005 c 2.78 -2.771 7.275 -2.771 10.024 0 c 2.771 2.766 2.771 7.255 0 10.027 c -1.377 1.375 -3.195 2.072 -5.015 2.072 L 62.101 44.982 H 76.59 c 1.29 -1.28 3.054 -2.076 5.011 -2.076 c 3.9 0 7.078 3.179 7.078 7.087 c 0 3.906 -3.178 7.088 -7.078 7.088 c -1.957 0 -3.721 -0.798 -5.011 -2.072 H 62.1 l 10.229 10.244 c 1.824 0 3.642 0.694 5.015 2.086 c 2.774 2.759 2.774 7.25 0 10.01 c -2.75 2.774 -7.239 2.774 -10.025 0 c -1.372 -1.372 -2.064 -3.192 -2.064 -5.003 L 55 62.094 v 14.499 c 1.271 1.276 2.084 3.054 2.084 5.013 c 0 3.906 -3.177 7.077 -7.098 7.077 c -3.919 0 -7.094 -3.167 -7.094 -7.077 c 0 -1.959 0.811 -3.732 2.081 -5.013 V 62.094 L 34.738 72.346 c 0 1.812 -0.705 3.627 -2.084 5.003 c -2.769 2.772 -7.251 2.772 -10.024 0 c -2.775 -2.764 -2.775 -7.253 0 -10.012 c 1.377 -1.39 3.214 -2.086 5.012 -2.086 l 10.257 -10.242 H 23.414 c -1.289 1.276 -3.072 2.072 -5.015 2.072 c -3.917 0 -7.096 -3.18 -7.096 -7.088 s 3.177 -7.087 7.096 -7.087 c 1.94 0 3.725 0.796 5.015 2.076 h 14.488 L 27.646 34.736 c -1.797 0 -3.632 -0.697 -5.012 -2.071 c -2.775 -2.772 -2.775 -7.26 0 -10.027 c 2.773 -2.771 7.256 -2.771 10.027 0 c 1.375 1.386 2.083 3.195 2.083 5.005 l 10.235 10.252 V 23.407 c -1.27 -1.287 -2.082 -3.053 -2.082 -5.023 c 0 -3.908 3.175 -7.079 7.096 -7.079 c 3.919 0 7.097 3.168 7.097 7.079 C 57.088 20.356 56.274 22.119 55.003 23.405 Z" fill="#ffffff" id="white-star"></path> </a></g> <g id="svg-textbox"><a href="http://www.w3.org/Graphics/SVG/" target="_parent" xlink:title="W3C SVG Working Group home page" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M 5.3 50 H 94.68 V 90 Q 94.68 95 89.68 95 H 10.3 Q 5.3 95 5.3 90 Z" fill="black" id="text-backdrop"></path> <path d="M 14.657 54.211 h 71.394 c 2.908 0 5.312 2.385 5.312 5.315 v 17.91 c -27.584 -3.403 -54.926 -8.125 -82.011 -7.683 V 59.526 C 9.353 56.596 11.743 54.211 14.657 54.211 L 14.657 54.211 Z" fill="#3f3f3f" id="shine"></path> <g id="svg-text"> <title>