Skip to content

Media best practices

Managing the media on your website is an important part of your site's performance and success. Below you’ll find our recommendations for general media web-prep.

A couple of notes:

  • Why is there a file upload limit of 10 mb?

  • It’s always important to optimize your media for fast web performance. We’ve listed ideal file types and sizes that will allow for quality media at healthy loading speeds.

  • WordPress has a series of limitations when it comes to database size and a hard limit of 10mb helps maintain a healthy cap on the YFC database while providing longevity for future file uploads.
  • A normal constraint of responsive web design is that we can’t always control how a user will see the media onsite. It’s important to allow for plenty of space around the edge of your images and media to accommodate for variance in media container and screen sizes. As a general practice for non-textural media (background images and graphics), we recommend placing critical content in the center third of your images.

Images

File Formats For Photos Jpeg or PNG

File Formats for Graphics, Icons, or Logos SVG or PNG

Optimal Size <500-600kb When selecting media for your site, it is ideal to have the core content in the middle third of the picture, due to varying viewports (meaning how it will view on maybe a desktop vs a phone).

Optimal Ratios

  • 16:9 — 1920x1080 for Hero Images, CTAs, Pathway Images or Landscape Images
  • 4:3 — 1080 x 1440 for 50-50 Tabs, Full Width CTA’s, Full Width Narrative
  • 3:2 — 1440 x 960 for Article Info Images and Carousel Images
  • 1:1 — 1440 x 1440 (Large) or 32x32 (Small) for Icons in Perk Cards and Program Singles

Image Alt Text Be sure to always name your photos appropriately and add concise and clear Alt Text as you upload images. This ensures that your media is accessible to screen readers and site crawlers.

Photos

  • Jpeg or PNG
  • <500-600kb

Compression programs

  • Mac: https://imageoptim.com/mac
  • PC: https://imageoptim.com/online

Videos

Link Formats For Embeds Vimeo or Youtube Link

File Formats For Background Videos WebM or Compressed, Web-Ready MP4

Ideal Length for Background Videos 10-30 seconds

What is the optimal background video size?

  • B-roll and textural media
  • 1080p
  • <10 mb
  • We recommend using the compression tool, Handbrake to process big videos.
  • Embedded videos from external sites are a great solution for keeping the page lightweight if you have a longer piece of media.
  • For Embeds (Videos that have a play button and audio):** we just need a Vimeo or Youtube Link

How can I lower my video bitrate when exporting?

  • When exporting a video for your site, lowering the bitrate is a simple way to optimize size.
  • Targeting a bitrate of 5-7 is a fair goal for reducing the size of your video without sacrificing quality.
  • In most video editors the bitrate can be adjusted via the export screen. Premiere, for example, even shows the predicted file size as you adjust the bitrate — allowing for less ambiguity when choosing a bitrate to target <10 mb
  • NOTE: It is not pertinent that background videos on your site be of optimal cinematic quality. While we don't want to include especially poor media — these elements won't be under particularly scrupulous observation as a full-length story feature might.