Optimizing and publishing video for ecommerce and web
Using video content can significantly improve important metrics such as reach, engagement, and conversion rates. Studies have demonstrated that video content can increase the time users spend on a page by 88% and improve message retention by over nine times, compared to text.
However, videos can also pose a significant challenge to website performance, responsiveness, and overall user experience (UX). This is especially true for mobile users, as videos can slow down their connection and negatively impact their browsing experience. It's worth noting that while many people prioritize image optimization, video optimization is often overlooked.
To provide the best video experience, it's essential to be responsive and adapt content to user conditions. An optimization strategy that preserves visual quality while keeping the bitrate at a minimum is crucial. This approach should include fitting the resolution to each user's screen size and setting a target visual quality that uses content-based compression to limit the bitrate.
Additionally, optimizing bandwidth by delivering high-efficiency encodings to devices that support them can also help. Once the video is correctly encoded, it's important to deliver and integrate it correctly into your website using cloud storage and a CDN (Content Delivery Network). Finally, configuring your domain, personalizing the video player, and monitoring analytics you can take control of all the aspects of your media experience.
Best video formats
MP4 with H.264 and AAC is a broadly supported baseline for web video. Other codecs can reduce file size at comparable visual quality, but support varies across browsers and devices. Check current compatibility for your audience before selecting an encoding.
When you provide more than one encoding, list them as alternate <source> elements in the HTML video
player. The browser selects a source it can play, so a compatible fallback can serve viewers whose browsers do not
support a more efficient option. See the current video codec guidance and
source element reference.
Optimizing video resolutions
The easiest way to deliver video in a web is to use the video tag, since it allows to directly use the default video player available in HTML5. But, before publishing the video we should at least resize it down to a maximum resolution and limit the framerate. Usually HD or full HD are reasonable limits for the resolution. Regarding the framerate, usually a limit of 30fps is also enough.
With the HTML5 video tag we may adopt a similar approach to images. We can adapt the resolution of the video to the viewport size, using breakpoints. -Video derivatives with lower resolution will need lower bitrates for a good visual quality, free of noticeable artifacts-. This also brings an indirect way to adapt the bitrate to different network conditions, as mobile resolutions are typically lower than desktop.
There are four resolutions frequently used in the web with 16:9 videos which we can adopt:
FHD (1080p): 1920 x 1080 px
HD (720p): 1280 x 720 px
FWVGA (480p): 854 x 480 px
nHD (360p): 640 x 360 px
Moreover, in many webs like online stores, we may need custom aspect ratios. In this case, we may set the breakpoints based on the short side of the video using the same values: 360p, 480p, 720p, and 1080p.
Optimizing video compression
To reduce the bitrate, compression codecs use different mechanisms that discard information. As more and more information is discarded, a number of compression artifacts appear. The artifacts can be categorized in spatial (location-based) or temporal (time sequence-based).
Spatial artifacts are visible when the video is paused, and are similar to image compression artifacts.
Blurring is a loss of detail, typically in fine textures (like fabrics, hair, skin) and near sharp edges. It's due to discarding of high frequency information.
Ringing and halos take place near sharp edges. This artifact -also related to the removal of high frequency information- it's due to a loss of balance between frequency components.
Blocking consists of the appearance of blocks of pixels with squared shapes. They happen due to the division of a frame in blocks to encode it. High compression rates result in noticeable differences between adjacent blocks.
Color bleeding consists of a loss of sharpness in color edges, resulting in overlapping or bleeding colors. This artifact is usually caused by chroma subsampling, especially in the presence of saturated colors with sharp edges.
Temporal artifacts appear when the video is playing.
Flickering consists of frequent luminance or chrominance changes over time -like in blinking lights-, generally in the form of grain of different sizes. It tends to occur first in the presence of fast motion and around sharp edges and texture details.
Floating. This artifact appears in static low textured areas -like sky or a plain wall- in which the quantization noise produces illusory motions.
Mosquito noise is characteristic of excessive compression, and resembles a mosquito flying around. It's a type of flickering caused by the random movement of ringing-related artifacts around high-frequency content, like sharp edges.
So, compression codecs try to minimize this kind of artifacts supporting different coding strategies to control the quality of the video. Two important parameters are the bitrate and the CRF. The first can be used to assure the bandwidth used by the video. The second is a proxy for visual quality, relying on a fast metric that tries to catch visual dissimilarities, which will differ from one codec to another.
Setting a fixed bitrate generally means wasting bandwidth with some videos and damaging visual quality in others. Since depending on the content of the video -slow vs sudden movements, fine textures vs solid colors-, different levels of bitrate will produce different artifacts on the video. While setting CRF assures the visual quality in most cases, but it also risks producing bitrate peaks in videos with sudden or fast movements in which the underlying metric is likely to become unstable.
Ideally, an optimization strategy combines a number of codec parameters to assure a target visual quality, avoiding bitrate peaks, under different optimization criteria tailored to content characteristics and quality requirements.
Adding additional encodings
The most straightforward approach to stream video over HTTP is to use the HTML5 video player, and a video encoded using the H264 format in a mp4 container. Then, this will be as simple as using the video element with the url in the source attribute. However, this solution does not take advantage of video bandwidth optimization using modern video codecs.
<video controls>
<source src="video-name.mp4" type="video/mp4">
</video>Like the HTML picture element, the video element supports multiple sources to allow the browser to pick the best it can play. Actually, the browser is going to try loading the video source following the defined other. So, if we transcode the video using recent standards with higher efficiency but limited browser support, we may cascade the options from the most to the least efficient. So that the browser is going to pick the best it can reproduce.
For instance, you can provide multiple encoded versions of a video and list them from the most efficient option to a broadly compatible fallback.
<video controls>
<source src="video-name-hevc.mp4" type="video/mp4; codecs=hevc">
<source src="video-name.webm" type="video/webm; codecs=vp9">
<source src="video-name.mp4" type="video/mp4">
</video>Offering multiple encodings can improve compression efficiency, but increases media management and conversion work, especially when combined with resolution variants. For many sites, reducing resolution to match the display size has a larger impact than adding more codecs.
Adaptive bitrate streaming
Progressive video delivers a single encoded file, so its quality stays fixed as a viewer's connection changes. Adaptive bitrate streaming prepares several versions at different resolutions and bitrates, then lets the player switch between them as bandwidth changes. HLS and MPEG-DASH are common adaptive streaming protocols.
For HLS, the video is encoded into multiple renditions and divided into segments. A multivariant playlist describes the available versions so a compatible player can select a suitable stream during playback. This approach can help maintain playback as bandwidth changes, though it adds encoding, storage, and player setup. It is most useful when viewers benefit from multiple stream qualities; simpler short clips may not need that added pipeline. See Apple's HLS playlist documentation for implementation details.
Abraia's video compression tool helps prepare smaller video files for publishing. Adaptive streaming requires a separate encoding and delivery setup.