I’d love to see a similar comparison starting with a much better source image, but I don’t have time to do the tests myself right now.
I’d also love to see a comparison of (a) a high-quality image downscaled using a very high quality resizing algorithm and then JPEG compressed versus (b) JPEG compressed first to match the size of image a and then resized in-browser by various browsers’ resizing routines. There was a pretty big difference between the way browsers resize images the last time I checked a few years ago.
Using nearest-neighbour resampling on the low-res image is an absolute joke. He didn't even look at an objective quality measurement (PSNR). The human visual system is very sensitive to edges, and the high-res image has more pronounced blocking artefacts. Downsampling a high-res image is an unnecessary load on the end user, the 8x8 block transform was chosen for good reason.
I'm not necessarily saying the low-res is superior, but I disagree this ad hoc method is the 'best' way (compared to optimising the coding).
Whether downscaling a high res image is an excessive load on the end user depends a lot on the end user. From what I understand (but I’m not an expert, so please correct if this is wrong), bandwidth is the main bottleneck not only on I/O latency but also on CPU use, not image rescaling. I’m guessing even mobile phones of the last few generations don’t even break a sweat when downscaling images (can’t they use GPU for this?). As always, it would be a good idea to actually test CPU use / latency / battery drain from rendering images at different sizes/JPEG quality levels on the target client device.
I agree eye balling the results is just as important, but I don't believe everyone should adopt this method because one dude thinks it looks better. Personally, I dislike the blocking artefacts around the neck and badge of the high-res image, even if some details are sharper.