Showing motion in images.
Lucas’ Production Checklist for Video
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
Lucas W. has made Adobe Media Encoder presets for encoding and exporting video. Use these as a consistent starting point.Download Presets
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:
|Mobile Poster Image||1000px × 2174px
(0.46 aspect ratio)
|Desktop Poster Image||3000px × 1688px
(16:9 aspect ratio)