Gfycat is just a service that provides h.264 video versions of gifs. Yes, h.264 videos are embeddable. So is WebM, but native support for it is worse than h.264.
That said, embedded videos will limit your browser compatibility unless there is a fallback. On the other hand, older browsers are also likely to have problems with 150MB webpages heavy on javascript.
When I loaded it the page was 60mb and took over 1 minute to fully load.
But I didn't know that.
I started trying to read the article. All I saw were static images that didn't show the author's point at all, until some of them finished loading and started to flash and cause re-layouts.
Now the page is incredibly hard to read because all the images are on auto repeat.
This is a UI disaster, especially for a post about good UI. h264 works and would have shrunken the page dramatically. It gives me controls that let me play, stop, or rewind video. It can play partially loaded videos (which is hit and miss with GIFs depending on browsers).
At the very minimum you could use JS to stop the GIFs from playing when the user isn't mousing over (something I've noticed at Polygon). It keeps them from being insanely distracting.
It's a small text article with animated screenshots. It doesn't load well, it doesn't scroll well, it isn't easy to read. The only reason I stuck on the page was to see just how much time it took to fully load. If it wasn't for the fact I had decided to come here and point out how unusable it is I would have bounced off the page and never come back.
Here's the thing: animated GIF are not the solution. To almost anything. They're designed for small animations, not long high resolution screen captures or real video. If it's over ~150kb or so you should probably start rethinking your format choice. If it's 3 MB, you made a mistake. If it's in double digits like some of the versions before they were updated you've made a HUGE mistake.
Some people only get 200mb a month of data on their cell plans. This one page would use up 75% of that. For animated screenshots.
Some of us consider that a feature. If you go inline then either your video is distracting and hard to scroll past or tiny and hard to see. Neither of those is a good experience.
On top of that, A 150mb page kept locking up Firefox. I have multiple tabs open, so maybe that didn't help but I had to back out of the page for fear that it'll crash.
I hope we get multi-process Firefox soon. Or that Mozilla ships a lightweight browser using their new "Servo" web render engine (Rust based).
It's so annoying that a single tab can crash the whole browser, and it's also a security risk on Windows. The common "sandbox" model there is to spawn child processes with very limited user rights (like IE 8+, Chrome, Safari+Webkit2).
And I hope we won't have it (although I know they are working on it and it's on the roadmap, so I have no illusion).
Given the number of tabs I have constantly open, I know that Chrome cannot handle it (I guess IE is the same here) and a multiprocess firefox won't either.
To be honest, I did not experience it first hand myself, because I've read this behaviour from many other people.
What I know is that I have more than 300 tabs in Firefox currently, both on my home machine and my work machine, and I don't have any problems with it.
Edit: And I would add that my task manager is also not polluted with hundreds of chrome processes.
There are extensions or settings in most browsers that will lazy-load tabs for you. No transfer or rendering occurs until you open the tab.
That aside, what could possibly require opening 300 tabs? That must be an absolute productivity killer... Why not use a bookmark manager or "read later" service or something?
I don't know what would need 300, but if I'm in the middle of working on a project, I might [open link in new tab] dozens of tutorials, docs and other resources as I gradually become more familiar with the domain and the gaps in my knowledge.
Sure, they should get pruned to bookmarks, but you can't argue if a person's method of staying in the "zone" works for them, I suppose.
Lets do the math. 150MB/visit @ 0.12/GB using Amazon CloudFront[1] costs $0.018/visit. This post was pretty popular here and I'm sure on other sites. It's probably safe to assume they got over 50,000 hits. For that much traffic it'll cost them roughly $900 in bandwidth.
However, I bet all the lost traffic due to people leaving the page was probably worse than having to pay $900.
https://d262ilb51hltx0.cloudfront.net/max/800/1*rjIGH2VNUxDe...
And this one is 32MB:
https://d262ilb51hltx0.cloudfront.net/max/800/1*a7_PF64-SfAd...
Total size of gifs in this page: 149MB.
Is Gfycat embedable? We should encourage its adoption.