Image standards

Follow the standards below when planning, preparing and publishing images to meet digital and SEO best practices and accessibility requirements.

Images

• Be sure to save an image (photography, graphics) using the correct file type to best optimize the image for digital use: 
  • JPG/JPEG: Use this format for photographs, images with gradients, or a lot of colors (more than 256).
  • PNG: Use this format for vector artwork, solid colored shapes, or any image where you need transparency. PNGs should only be used when necessary since the file size is much larger than JPEG.
• Prepare images to the dimensions (width x height) as noted for each pattern. Keep in mind that most images sizes are 2X (two times the display size) for optimal display on high definition displays and to accommodate image adjustments when a layout reflows on mobile.
  
  
• To help a digital experience load fast in all situations (users internet speeds or device) aim for images to be as small as possible without compromising quality. Keep images under 200k for speedy load times for our end users.
  
  
• Note whether the pattern requires a single image for display across all devices or individul images for desktop, tablet and mobile. 
  
  
• Make images accessible following the alt text and color accessibility guideline information below.
  
  
• Follow SEO image best practices to add value to the audience and search engines.
  
  
• Do NOT embed important text like headings, menu items or CTAs into an image. This is an issue for many reasons, including the following:
  • Accessibility – Content that exists within an image can’t be read by a screen reader and therefore the user will not be privy to that content.
  • Adaptability/responsiveness – Images get compressed as devices and screen sizes reduce in size, which makes reading content on an image challenging.
  • SEO – Search engines can’t read text in an image.
  • Page performance – The more images on a page, the longer load time.
  • Component availability – If an AEM component exists that can support the text needed, the component should be leveraged, such as Pull Quotes.
  • Branding – The image doesn’t follow brand guidelines or may have inconsistencies with design patterns.
  • Page updates – Updating content that is embedded in an image requires a creative to update the image and get it uploaded to the page vs. re-authoring the page with the new content.
  • Intent – Consider the intent of the image. Are you trying to communicate something to the user? If so, embedding text in the image is likely not the best practice. If the intent is simply decorative and doesn’t add context that isn’t already incorporated as text on-page, text in the image may be fine. (Note: It is OK when text appears in a screen grab from a video since the copy is decorative.)

Alt text (alternative text) 

• Alt text requirements vary based on the type of image. Follow the guidelines listed below for the specific image type (informative, decorative or complex).  Whether to treat an image as informative or decorative is a judgment that authors make, based on the reason (intent) for including the image on the page.
• Alt text serves several functions: used by screen readers, displayed when image does not load, and provides helpful info to search engines.

Informative “non-decorative” image add meaningful information and must have a text alternative (alt text) that describes the information or function represented by them. Character count (including spaces) should not exceed 100.

Decorative images are “eye-candy”  included to for aesthetic reasons. These images require “null” alt text by inputting "" in place of alt text. Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the page more visually attractive, or the image is a screen grab from a video that contains animated typography.

Complex images such as an infographic, chart, illustration or image that is combined with copy must have alt text. Several approaches (listed on the next slide) for alt text can be used. Use the approach that provides the best solution for your content.

• Option 1 – Body copy and alt text: Incorporate the image’s key messages into the body copy of the page so that users who can’t view the image will still receive the information it’s delivering. Add generic alt text that communicates the story or the point you are trying to make by including the image.
  
  Example of body copy: As shown in the chart below, of the AIDS vaccine trials underway in 2015, six were in Phase II and I/II, 29 were in Phase I.
  
  Example of alt text: Infographic showing AIDS vaccine trials in 2015.
  

• Option 2 – Caption and alt text: Add a summary of the information the image is conveying below the image and use alt text that includes the image title, such as “Infographic: XYZ.” The summary copy (caption) should reference the title found in the alt text.
  
  Example of alt text: Infographic: Societal impact of opioids.
  
  Example of caption: Infographic: Societal impact of opioids — The annual societal costs of opioid abuse, dependence and misuse in the U.S. in 2007 reached $5 billion in criminal justice expenses and $25 billion each for health care and lost workplace productivity.
  
  
• Option 3 – Long description: Add a link below the complex image that reads: View full text description of this image and link to a full description on the very bottom of the page or on a second page. Use this approach only when necessary since it negatively impacts the user experience since users need to leave the page to read.

More tips for alt text

• Character count (including spaces) should not exceed 100.
• Include alt text that is descriptive enough to provide “good context” to the visitor.
• When an image is a link, the alt text needs to describe the link’s destination or the purpose.
• Use single quotes instead of double. Example: Chart titled ‘Increases lead to improved outcomes’.

Infographic, charts and graphs

• If the infographic includes essential text that is not found within the article, then the information must be also added as text or made available as alt text.
  Meet color contrast requirements:
  • When text is placed on a background image, the text should contrast greatly from the background. 
  • For large text (18px/24pt or larger) maintain a contrast ratio of at least 3:1 and normal text (less than 18px/24pt) 4.5:1. 
• To check contrast use the contrast checker tool: https://webaim.org/resources/contrastchecker.
  Use the Optum digital color palette for the approved colors. 
  
• Flashing images should not contain more than three flashes per second unless the flashing content is small and there is a way to stop the image and include alt text.