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
A frequent question when we run a video production and publishing pipeline for web is: which format is best?. The standard followed to encode the video will determine if it is supported by the browser or the system. So, MP4 videos encoded with the H264 standard are universally supported, however this is not the case of a MP4 file coded with the H265 standard.
There are three main video encoding options relevant for web and mobile:
H264/AVC. Packaged in an MP4 container H264 is the video format universally supported for web and mobile devices. It enjoys hardware acceleration in any relevant device -computers, tablets, smartphones-. While the advantages are universal support with easy and fast encoding and decoding, the main issue of this format is compression efficiency. For high resolutions -over VGA- a good visual quality may imply bitrates that exceed the capacity of many mobile networks and during peak traffic times. This slows down page speed and results in video stalls and rebuffering. The alternative is sacrificing the quality, producing artifacts in the video like blur or mosquito.
VP9. Supported by Chrome, Firefox and Android, VP9 is a high efficiency royalty-free codec used in WebM files. WebM VP9 encoded videos tend to be lighter than H264 encoded files, but H264 videos look slightly better on mobile devices. However, it is not supported by Apple -macOS, iOS, Safari-, and it shares with H265 the drawback of higher computational complexity and slower and heavier encoding.
H265/HEVC. Also packaged in MP4 containers, H265 features a high compression efficiency, yielding about 40% of bitrate reduction with the same visual quality when compared to H264. There are however some significant drawbacks with H265. The first, a limited support, restricted to Apple devices and software. This limitation is a consequence of much pricier royalties that should be paid by manufacturers using the standard. Besides, its higher complexity means encoding gets heavier and longer, about one order of magnitude compared to H264. In general this means a higher consumption of computing resources and more latency in transcoding for the generation of video derivatives.
In summary, H264 encoded MP4 videos are supported by all browsers while WebM VP9 and MP4 H265 are more efficient. In fact, they are about 30-50 percent more efficient than the H264 standard. However, HEVC and VP9 do not enjoy universal browser or device support, so these options must be provided with a fallback H264 version. Moreover, videos on this formats can be directly delivered from your server, and inserted in your site as a progressive video using the HTML5 video tag standard for playback in the user's browser.
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, we can take a video and transcode it using the principal video codecs, providing three versions: a H265 mp4 version at the top of the list, a webm VP9 variant, and a H264 mp4 - which is universally supported - version as 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>So, this brings an additional opportunity for optimization. To deliver videos with the highest possible compression efficiency we can offer an HEVC version for iOS and macOS users, a VP9 version for Android and Chrome users and a fallback to H264 for the rest and for those using old devices with support limited to H264. However, it usually increases the complexity of media management and conversion, specially when combined with the use of breakpoints. In general, reducing resolution has a much higher impact than the use of high efficiency encodings.
With Abraia you can easily convert and compress your videos to mp4 (H264 and H265) and webm (VP9) to directly embed in your website. We provide the whole video publishing pipeline from editing, branding, and transcoding to publishing, embedding, and viewing.