Best way to increase the display size of a web video

Question

I have a H.264 (ex-MOV, ex-Flash) video of 550px x 250 px. In the HTML player (videojs), I can easily set its size to 640px x 290px and it still looks OK (only a 16.363636% increase in display size).

Or should I increase it's size in "real pixels" by exporting it as H.264 from, say, Avanti or Handbrake at a bigger size? In Avanti, under "Frame size" I specified 640 x 290 and the file size increased by 8% and data rate from 200 kbps to 215.

What are the trade-offs - would enlarging via HTML be stressful for low-end CPUs? Is the 8% increase in file size and kbps worth it for the extra quality, if any?

Answer 1

If it is a flash source, then there is a good chance it has vector elements. You should export at a higher resolution from the source rather than trying to upscale the mov file.

Working from the original will ensure accurate pixel data for any vector elements and produce a much higher quality upscale. (This is actually one of the major reasons for Flash's early popularity.) If that isn't an option or it was a raster format asset in Flash, then it is really a toss up between the two options depending on the quality of the original encoding.

Encoding to a new size can do slower and more accurate upscaling that will produce fewer artifacts, but if the original source you are upscaling from is already pretty low quality, a second generation of encoding loss may very well exceed the amount of quality improvement you get from the rendered out upscale.

So in summary, the best option is to export from Flash at a higher resolution. If you can't do that, re-encode if you can do it without another generation of loss or have a high enough quality source (200kbps is not high enough for a re-encode most likely). Finally, if you don't have that, then stick with the re-size in the player on the fly.