• Text Resize A A A
  • Print Print
  • Share Share on facebook Share on twitter Share

Photography and Video Embedding

Incorporating images and videos to support content can be beneficial to the user, if done correctly.


Usage

For billboard graphics, HHS.gov incorporates a photography style where parts of images may be blurred slightly to bring the users’ focus to the main subject in an image.

In general, it is strongly recommended that text not be incorporated as part of the graphic. This ensures proper legibility, accessibility, and Search Engine Optimization (SEO). An example of the photography styling used on HHS.gov is shown in figure 13.

Figure 13, caption follows.
Figure 13: The HHS.gov user-driven billboard carousel image with photo styling applied.

Recommended Image and Video Dimensions

For photos, we recommend the following dimensions:

  • 480 x 640px
  • 520 x 390px
  • 225 x 300px
  • 120 x 160px
  • 60 x 80px

For videos, we recommend the following dimensions:

  • 360 x 640px
  • 292 x 520px
  • 168 x 300px

Recommended Image and Video Positioning

Regarding image positioning, we recommend left aligning images that are thumbnails, or small previews making content easier to scan. However, usability findings show that a consistent left margin is helpful in reading page content, like an article, giving users a place to return to easily. In this case, we recommend right aligning the image. We also recommend that images larger than half the content area width on the desktop platform view (640px) be centered with copy above and beneath it.

Figure 14, caption follows.
Figure 14: Example of a blog listing with a thumbnail graphic aligned left.
Figure 15, caption follows.
Figure 15: Example of a blog post with an inline graphic aligned right.
Figure 16, caption follows.
Figure 16: Example of a blog post with an inline video that takes up the entire width of the content area.
Content created by Digital Communications Division (DCD)
Content last reviewed on July 20, 2017