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.
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)