How do I maintain sharpness when scaling down Mp4 H264 video on browser?

  • 2
  • Question
  • Updated 1 year ago

I managed to create a sharp video after doing a lot of research. However, now my problem is when scaling down in the browser. I am trying to do some screen captures similar to this:https://framer.com/features/design/

I contacted some folks from Framer and they mentioned that they used a big retina screen (higher pixel density) and a mac software called ScreenFlow for capture and export with no additional compression software. I noticed that ScreenFlow has an option to use an algorithm that maintains the sharpness when the video is scaled down.

My workflow is all in windows, considering that main application to be captured is Windows-based only.

My workflow: 

1-Camtasia captures with fixed size of 960x720 ( I read that H264 footage should have a size that is multiple of 8 and 16 to avoid pixelation). 

2-Import and edit in Adobe Premiere, export with H264 codec, no audio and with maximum output and quality. 

3- Import into Handbrake, chose HQ1080p30 preset, modify the video for constant framerate, and constant quality of 15, an output is Mp4 optimized for the web and NO changes in the size.

4-When my video plays on the browser with the 960x720  size (same as exported) is perfect. However, when things start scaling down I notice the font gets fuzzy, which is bad for a responsive website. I would like to avoid serving different versions of the video for different screen sizes because the page I'm building will have 4, so if the page is too heavy will go against any user experience guideline and will be penalized by the Google search engine.

Note: Premiere, Camtasia, and Handbrake don't have the option to use an algorithm that maintains sharpness when the size is scaled down, or at least I could not find it.

I put a small HTML code in code pen so you can visualize this problem::https://codepen.io/danielvianna/pen/xrvzzJ

Note: just change the sizes to (multiples of 8 and 16)

  • 832x624
  • 768x576
  • 704x528
Photo of Daniel Vianna

Daniel Vianna

  • 1 Post
  • 0 Reply Likes

Posted 1 year ago

  • 2
Photo of Dubie

Dubie

  • 1002 Posts
  • 779 Reply Likes
Why are you running it through so many processes?

If you are using Camtasia,  just record and edit in Camtasia and export out as mp4.

Also not that it is a real big deal,  but the most common standard today is a 16:9 ratio
and the most common sizes are:

1920x1080  (1080p)
1280x720  (720p)
960x540

Not that it's written stone but best practice is to record and render in the same size.
The more you process the more it degrades quality.

:)
(Edited)
Photo of SnagitTest

SnagitTest, Employee

  • 7 Posts
  • 1 Reply Like
I would do everything you can to record it in the same size you need it. That is ideal and will save a lot of potential work. However, I agree that there will be other ways to view it and you can't have a video for every size.

My suggestion would be to record it in a "standard size" and may be easier to convert for various browsers / systems. For example, I recorded all the videos for my book on Camtasia Mac in 1280x720. I have never had any issues with viewing the videos. They look as good on my laptop as they do on my iPad. I put them into a PDF file as the delivery mechanism so I'm sure that helps to control the environment around them but I still haven't had any issues with viewing them. I'm not sure how they would look on a big retina screen though...haven't tried it.

HTH