Use cases

When producing a CFPB material, consider if a visual is needed and, if so, which type is most fitting. Before choosing or creating an image, articulate the image’s purpose. Is it being used to explain a financial concept? Is its intention to encourage consumers to take an action? Based on the image’s purpose, consider if an illustration, custom photo, or stock photo would best serve that purpose.  

Illustration

Illustration can help explain complex processes. Illustration also has the ability to be socially and politically neutral. Visit the Illustration page for more guidance. 

Photography

Photography can show real-life scenarios and people. Photography has the ability to convey a serious tone, which may be better suited than illustrations for complicated, sensitive subject matter.  

• Custom photography allows you to determine several details such as a photo’s background, props, models, and color palette. Custom photos require planning and coordination, and it is difficult to capture a spontaneous environment, such as a natural disaster, in a custom photo.   
• Stock photography offers a range of complex scenes and is instantly available so does not require photoshoot planning. A stock photo’s details cannot be controlled, so pay careful attention to its details to ensure it feels authentic.

Guidelines

Platform and format 

When determining an image, consider how and where it will be viewed. Will it appear in a social media post with the primary goal of attracting attention? Will it serve as an introductory, supplemental image on a web page? 

An image’s dimensions can also impact what’s possible. If the image appears in the hero pattern, text will sit on top of it and need to be readable across breakpoints. If the image accompanies body copy in an info unit group, it will have limited space.  

Performance 

When deciding to use photos on consumerfinance.gov pages, be mindful of how they may impact the page’s performance, such as how long it takes for the page to load. This is an important consideration, as some users may not have broadband internet. 

• Avoid using multiple photos on a page, as this can significantly weigh down the page. 
• Photos on consumerfinance.gov should be a PNG format, 72 dpi, RGB, and exported at 2x size to appear clearly on retina screens. A photo’s dimensions depend on the pattern in which the photo will appear, so reference the “design specs” tab on a pattern’s page to export a photo at correct dimensions. 
• Check a web page’s performance by using a tool such as Lighthouse. To run Lighthouse in Chrome, click View > Developer and select “Developer Tools” from the drop-down menu. A panel will appear in your browser window. At the top of the panel, click the “Audits” tab. If you do not see an “Audits” tab, click the right-facing arrow and select “Lighthouse” from the drop-down menu. Select “Performance” and generate the Lighthouse report. Review and address any alerts relating to the images.

Tone 

A photo can instantly convey a feeling. Regardless of what a photo depicts, aim for photos in CFPB materials to have the following qualities: 

• Approachable 
• Actionable 
• Authoritative 
• Authentic 

These qualities come through in a photo’s visual details. Aim to achieve the following details when shooting photos or choosing stock images.

Visual detail	Example
Natural interaction If the photo shows people, their body language and facial expressions feel natural and not staged.
Authentic atmosphere The photo’s atmosphere feels warm, relatable, and like you’re glimpsing into a real scenario.
Inclusive When photographing or choosing images, consider skin color, age, gender identity, income level, and range of ability. Be inclusive and representative of the American public. Be mindful not to reinforce stereotypes.
Feeling of being in control When showing a person accomplishing a task, the composition feels organized and actionable.

Accessibility

Ensure text is legible  

In general, it is best to avoid placing text on photos, as this will compress the text and make it unsearchable and unreadable by screen readers.  

If you do include text on an image, such as social media post, ensure the text and photo reinforce one another.  Include only a short headline and make certain there is sufficient contrast between the text and background. Platforms such as Facebook recommend text take up no more than 20 percent of the image.  

Add alt text 

When using photos in a digital product such as a web page or social media post, provide alt text to describe the image and be read by a screen reader.   

• Facebook: Add a photo to your post. Before publishing, hover on the photo and an “Edit” button will appear in the upper left corner. Click the “Edit” button and editing options will appear on the left side of the photo. Click “Alternative Text.” Enter a description in the “Custom alt text” field and click the “Save” button.  
• Twitter: Add a photo to your post. Before publishing, click “Add description.” Enter a description in the “Description” field and click the “Save” button.