HTML5 Video: How Resizing and Scaling Affects Quality

Quick summary ↬ Have you wondered how the converted HTML5 video will look in browsers and whether compression or rescaling will affect the quality? Here you will find the answer.
Posted , by Denis Sokol (Last update )

This is a companion article to the comprehensive guide on HTML5 video integration. In this article, you will learn how compression or other processing of HTML5 video (resizing or downscaling) affects quality and will see a comparison with YouTube. A two minute video is used.

DESKTOP

This should demonstrate how dimensions, conversion and formats affect quality. Desktop versions first. You have to evaluate it on the desktop PC.

Original webm (1192x794 9.4M), with poster, no preload

// Extracted poster fist frame (Result: 55K jpg)
# ffmpeg -i demo-2m-desktop.webm -frames:v 1 demo-2m-desktop.jpg
// If you need some specific second
// # ffmpeg -ss 2.5 -i demo-2m-desktop.webm -frames:v 1 demo-2m-desktop.jpg

Safari on iOS (iPhone) is unlikely to play it. You might also have the issue I'm having with the playback progress bar (it keeps jumping or setting at the end).

Converted to mp4 (1192x794 2.2Mb), with poster, no preload

# ffmpeg -i demo-2m-desktop.webm -c:v libx264 -profile:v main -vf format=yuv420p -c:a aac -movflags +faststart -r 24 demo-2m-desktop.mp4

Looks like the best default to go with.

Original webm downscaled (resized) to 750px width webm (750x500 812K), with poster, no preload

# ffmpeg -i demo-2m-desktop.webm -vf scale=750:-1 -r 24 demo-2m-desktop-750.webm
// Poster (Result: 29K jpg)
# ffmpeg -i demo-2m-desktop-750.webm -frames:v 1 demo-2m-desktop-750.jpg
// Get dimensions
# ffprobe -v error -select_streams v -show_entries stream=width,height -of csv=p=0:s=x demo-2m-desktop-750.webm
750x500
// Alternative option
# ffprobe -v error -show_entries stream=width,height -of default=noprint_wrappers=1 demo-2m-desktop-750.webm
width=750
height=500

Safari on iOS (iPhone) is unlikely to play it. Lengthy processing. Blurry quality even for full screen size (width = 100% in CSS, blog width equal to 750px video). However, awesome size - 812K only. It is worth noting that when you watch this video not embedded in the website (i.e. without applying CSS styles), the quality is better. Try opening this video in your browser outside of the integration with the website and you will see less blurring (same when you remove width/height styles in CSS). Theoretically, this is an awesome option for sending by email or when you need to showcase a non-embedded video. Just imagine, only 812K!

Resized webm converted to mp4 (750x500, 1.1Mb), with poster, no preload

# ffmpeg -i demo-2m-desktop-750.webm -c:v libx264 -profile:v main -vf format=yuv420p -c:a aac -movflags +faststart -r 24 demo-2m-desktop-750.mp4

The size is increased in compare with the resized webm. Same quality issues. Bigger than webm but will play on iOS (iPhone). However, you don't need a desktop size on an iPhone, so this option seems useless.

Original webm downscaled to 750px with conversion to mp4 (750x500 1Mb), with poster, no preload

# ffmpeg -i demo-2m-desktop.webm -vf scale=750:-1 -r 24 demo-2m-desktop-750-from-original.mp4

Size similar to above. Quicker operation than converting webm → webm. The same quality issues. Probably even worse quality.

Original webm uploaded on YouTube (desktop)

MOBILE

This should demonstrate how dimensions, conversion and formats affect quality. Mobile versions. You have to evaluate it on the phone. Original video recorded at iPhone SE resolution emulated in DevTools (F12) by the Screen Recorder app. The device emulator shows 375x667 but the result is 396x706 - see also this article.

Original webm (396x706 12Mb), with poster, no preload

// Get poster
# ffmpeg -i demo-2m-mobile.webm -frames:v 1 demo-2m-mobile.jpg
// Get dimensions
# ffprobe -v error -select_streams v -show_entries stream=width,height -of csv=p=0:s=x demo-2m-mobile.webm
396x706

Safari on iOS (iPhone) is unlikely to play it. Big size in compare with mp4 below. You might also have the issue I'm having with the playback progress bar (it keeps jumping or setting at the end).

Converted to mp4 (396x706 2.5Mb), with poster, no preload

# ffmpeg -i demo-2m-mobile.webm -c:v libx264 -profile:v main -vf format=yuv420p -c:a aac -movflags +faststart -r 24 demo-2m-mobile.mp4

Seems to be the optimal version for mobile. When tested on a ~6" phone full screen, the quality seems to be even better than the original webm.

Original webm uploaded on YouTube (mobile)

Usually YouTube manages to render at the best quality for any screen size, but not this time when you upload the video with this initial resolution (396x706). Try full screen on a ~6" phone and see the problem. Also the video is not yours but on YouTube, possibly with their ads and the risk of being removed if the policy changes.

Other things

1. The issue raised here has not been resolved natively in the browser as of May 2022. You can test it on this very page.

2. This is about the progress bar (a timeline) issue:

The video is 2 minutes long, right now it's at 0:22, but the timeline is at the end.

iPhone specific examples

See my HTML5 Ultimate Integration Guide in section 4.3 for some interesting examples of how a video recorded on an iPhone and then converted is rendered in browsers. The examples are interesting because we fit higher resolution videos to the same 396px width and you can see the quality yourself.

I post useful information on my blog and share my experience for free. I don't post links to Amazon or anything like that. If my articles educated you, or maybe even helped you earn or save money or find a job, you can buy me a coffee.

Posted (Last update )