Images best practices

 

Studies show that people remember 80% of what they see and only 20% of what they read.

Your content is interesting, valuable information. Let it reflect your dedication to assisting and empowering the people of the State of Connecticut.

 

Why Should We Use Images In Our Content? 

 

If a related image is shown with the content, a user will likely engage longer. If an image can support your message or make it easier to digest, your content performs better.

In fact, a recent Pew Research Center study revealed that content with visuals are viewed 94% more.

 

Break Content Into Chunks 

 

Images not only increase visual appeal, they break up large chunks of content and make it scannable. These scannable pages let users quickly determine if they include the content they’re seeking.

Reading through large paragraphs of text is time-consuming, especially on mobile devices. If users leave the page because they don’t have the time or patience, it will likely increase pressure on agency call centers and in-person resources.

Our goal is to give users the information they need online to decrease the volume of calls and visits.

 

Best Practices for On-page Content 

 
  • Use images to reinforce key messages quickly and attract an audience.
  • Use color to guide the audience through the page, highlight key areas, and add visual interest.
  • Use graphs and diagrams to clearly illustrate and compare data.

Learn more about Creating “Scannable” Content.

 

How Images Can Change Your Content

 

Take a look at these two versions of a department’s article below. Based on first impressions, which one are you most drawn to reading?

Without question, content with images will attract more readers. Example 2 will perform better because it has engaging visuals, color to break up chunks of text, and separate sections of text to direct the reader’s eyes.

Block of text without any images or graphics
Example 1
A Featured Story with images and graphics
Example 2

Types of Images to Use 

  • Photos, especially of faces or hands, can be used to help a reader more easily identify with the content.
  • Illustrations can be used when the content is less formal.
  • Graphs are best used when there is data to display.
  • Diagrams are best used to show items in comparison: flow charts, mind maps, etc.
  • Buttons can be used as calls to action, or to navigate around the website (an accessibility benefit when contrasting colors are used).

Image Accessibility 

 

Alternative text (also called alt text) provides a helpful written description of a visual element on your webpage. Accurate alt text is essential for accessibility and UX (user experience).

Screen reading devices read alt text out loud, so if the alt text contains a file name, a URL, or a keyword, it won’t make sense to the reader. Although you may be tempted to use alt text for SEO purposes, called ‘keyword padding’, alt text is intended to help users who cannot visually see an image understand the purpose of the image.

Accessibility is everyone’s responsibility! Learn more about Accessibility.

Helpful tips

When choosing images for your content, select one that shows a person’s face or hands.

Studies show that our brains are highly oriented toward the human face. When looking at a photo of a person, our eyes tend to gravitate toward the face first.

Remember - screen readers can’t read graphics, so be sure to include alt text that helps explain icons or graphics you have on the page. Learn more about our accessibility best practices.

How well your web content can be accessed and received by all users, including users with a disability. This is especially important, and legally mandated, for our government websites. It is a great idea to take a deeper dive into accessibility standards when writing content for CT.gov.

Text describing the appearance of a visual element on a webpage. It is indexed by search engines (SEO) and read aloud by screen readers (accessibility).

Assistive technology that automatically reads written content aloud. 

(User experience) How the user interacts with/experiences your web content.

Related pages

Accessibility best practices 

Build inclusive websites that are accessible to people with diverse abilities.

On-page content structure 

Make it easy for the user to find what they need by structuring content clearly.