Images

We use images to enhance the website’s design. They help connect the content across webpages and improve user experience.

Guidelines

• Use high-quality, licensed images, or those created for your site.
• Get a signed HRSA release form for any images using trademarks, logos, well-known people, or other private groups.
• Provide alternative text (alt text) descriptions for all images. Ensure it conveys the image’s meaning.
  • Describe the image clearly
  • Keep it under 250 characters
  • Do not include “image of" or “picture of"
  • Use null alt text (alt="") for decorative images
• Follow the HRSA Web Editorial Style Guide and HHS 508 guidelines when creating image captions. 

Formats

• Photos: JPG at 72 dpi | compression no less than 80%
• Illustrations and icons: PNG at 72 dpi | transparent background
• Icons and logos: SVG

Sizes

• Ensure all images are at least 640 pixels (px) wide. 
• Resize images proportionally to maintain their aspect ratio. Do not stretch or condense images. 
• Check the component or grid layout on the page to determine image size. 

Sizing by use type

Image size depends on where you plan to use the image.

Components

These use fixed ratios, widths, and heights. Crop and resize images to exact values for optimal display.

Body content

You can tell an image’s size based on its ratio and width. For the width, look at the number of grid columns it uses and multiply by 120 px.

Photos and illustrations use ratios of 16:9, 4:3, or 1:1. Use the following image sizes for popular image ratios and grid layouts.

16:9 image ratio

4:3 image ratio

Examples

Full width image, 16:9 ratio