• Container Format
• The file/structure used to store stuff (MP4, WebM, AVI)
• Audio data, Video data, Meta data
• Algorithm used to compress/encode video/audio
• Video: H.264, VP8, VP9, Theora
• I’ll probably just say MP4 Video, WebM Video, etc
Structure of a WebM File
• Really just a subset of Matroska container (MKV)
• Made of “Elements”
• Contains discrete pieces of data (like PNG chunks)
• Video data, audio data, meta data, everything
• “SeekHead” element acts like a table of contents
• Sounding familiar… ?
Optimize WebM Structure
• Only 1 SeekHead element, placed at the front…
• Great open source tool mkclean
Other Standard Optimizations
• Are you caching the file?
• Do you have a Last-Modified
Optimizing Animated GIFs…
… the other “video” format
Animated GIFs: Amazing it even works
“The Graphics Interchange
Format is not intended as a
platform for animation, even
though it can be done in a
- GIF89A Specification
Animated GIFs: The Good
• Universal support on all
• No patent or licensing concerns
• Easy, widely available creation
• A culture that has grown around
creating and sharing funny
Animated GIFs: The (Unbelievably) Bad
• 256 colors per video frame
• LZW compression sucks for
• Animated system not designed
differences between video frames
• No sexy video tricks
• chroma subsampling, discrete cosine
transforms, or motion compensation
• No hardware support on mobile
• More CPU, RAM, Power
• 5x to 10x larger than a properly
Animated GIF as MP4
• Convert GIF to MP4 with ffmpeg
• Alter the HTML markup
HTML5 Video Optimization Check List
• Is your video optimized for how it will be used?
• Is your <VIDEO> tag using the right size?
• Is your <VIDEO> muted? Strip the audio!
• Does your server use HTTP Range Requests?
• What about Last-Modified?
• What about Expires/Cache-Control?
• Are you using multiple <SOURCE> tags?
• Is the smallest file first?
• Are all the videos roughly the same bitrate?
HTML5 Video Optimization Check List (con’t)
• Are your MP4 files optimized for fast start?
• Are your WebM files optimized for fast start and fast seeking?
• Animated GIFs
• Use lossless for animations
• Use Lossy for video clips
• Advanced: Try converting to MP4 instead…
Optimizing HTML5 Video