Unfortunately the MP4 looks worse than the GIF, due to chroma compression in the YUV 420 colorspace. While each pixels luminance value is kept, the color information for a 4-pixel square is stored as a single CrCb pair, which is really obvious when you look at how the orange hat has artifacts against the blue background. Increasing the bitrate won't solve this either, since it's a limitation of the colorspace.
Thank you! I was gonna post the exact same thing. Nice website, though.
I encoded the gif in 420 (subsampling), 422 and 444, having a nice quality with 444 with VLC, I embed the three different videos in a web page and when playing in my browser, they are all as bad as the twitter video! I thought that Firefox was using a standard library to play MP4?
Firefox uses the Windows-bundled decoder on Windows Vista or later. Chroma upsampling happens after decoding so it's the renderer's responsibility (Firefox, Chrome, VLC, madVR etc).
Depending on the webpage you uploaded them, the videos could be re-encoded (or VLC's options could be no-ops and the artifacts hidden when played back in VLC due to better chroma upsampling) hence the problem.
Okay, thanks for the explanation on the chroma upsampling! I use Linux but it should work all the same.
When I said that I embedded the videos in a web page, I wrote a small page from scratch to display them in my browser, locally, without any server. So no re-encoding. I think that VLC just has a better chroma upsampling.
Seeing as how the quality of the source is already completely destroyed by the 256 color gif, I don't think image fidelity really matters that much to the people sharing these...