Using Cinemagraphs

Showing motion in images.

File Sizes and Specs

There are no hard and fast requirements, but here are some factors to consider:

Video files need to be fully downloaded, not streamed, before they start autoplaying. Because of that, the total file size is important — someone should not have to wait more than 3 seconds for a cinemagraph to load and play.
Users may be on devices with different screen sizes and on varying connection speeds.
Use this tool to calculate average download times. Assume 7 Mbps for 3G mobile, 14 Mbps for 4G mobile, and 50–100 Mbps for desktop broadband.

Based on that, below are some starting points for full-bleed cinemagraphs. Note that target dimensions and length are suggestions. You can experiment with those and other encoding settings as long as you hit the max total file size limits.

Type	Dimensions	Length	Target File Size	Download Times
Mobile Cinemagraph	400px × 870px (Or any 0.46 aspect ratio)	30s	Aim for 2.5mb per 15s Aim for total size: 5mb	On 3G/4G mobile network: 5–10s (Assuming 7 Mbps for 3G, 14 Mbps for 4G)
Desktop Cinemagraph	1920px × 1080px (Or any 16:9 aspect ratio)	30s	Aim for 5mb per 15s Aim for total size: 10mb	On home broadband network: 1–3s (Assuming 50–100 Mbps)

Beyond that, here are the settings to use to ensure wide support and maximizing image quality:

Bitrate Settings	Codec	File Format
Bitrate Encoding: VBR, 1 pass Target Bitrate: 3 Mbps Maximum Bitrate: 5 Mbps	H.264	.mp4

Lucas W. has made Adobe Media Encoder presets for encoding and exporting video. Use these as a consistent starting point.

Download Presets

Poster Images

Poster images are required for various off-platform support, and should match the aspect ratio of the cinemagraph. Following the above, here are the image dimensions:

Type	Dimensions
Mobile Poster Image	1000px × 2174px (0.46 aspect ratio)
Desktop Poster Image	3000px × 1688px (16:9 aspect ratio)