Hacker News new | past | comments | ask | show | jobs | submit login

Don't use GIFs, use audioless mp4s instead. They can be made to work in the exact same way as GIFs (autoplay, loop or not, etc) but are a fraction of the bandwidth.



If you do this, please make extra sure there's no audio track at all. (Not just silent audio.)

Browsers use the presence of an audio track as the trigger to decide whether or not to prevent Windows computers from going to sleep while a video is playing.

I filed a bug on Firefox, but they consider it to be pretty low priority: https://bugzilla.mozilla.org/show_bug.cgi?id=1684718


This is exactly what we do on https://www.soundslice.com/features/ (the minivideos below the main hero section). Would definitely recommend using MP4s instead of GIFs, for the bandwidth savings.


Second the mp4 part. We started with gifs on bugasura.io and ended up with a pageinsights at 20!

Apparently these gifs are loaded along with the other assets and lazy loading them is not simple.

We moved to mp4 and the scores have increased quite a bit.


Do they work if the user has disabled autoplay in browser media settings? This is one of the first things I do when setting up a browser.


Some (all?) browsers will still play autoplay videos as long as there's no audio track (or if it's muted by default)


Yes, at least in Safari on iOS. If you properly mark it muted it will autoplay when asked.

I believe the user can change the setting to "Never Autoplay" instead of "Stop Media with Sound" but the default only affects with sound.


Have you tested if that works in low-power mode? I know low power mode usually disables autoplay, and a lot of users have it on for significant parts of their daily usage


Low power mode doesn't affect autoplay for me in Safari


I’m curious, would you disable GIF autoplay if the browser’s settings offered it?


No.

Like, i get that they are the same in effect, but I still believe in the semantics different between a moving picture, and a audio-track-less video.

A gif can never have audio.

A img tag can never have audio.

mp4s, m4as, webm, embeds tags, video tags, etc, can either have or not have audio, its a surprise.

Because they are videos, not moving/animated pictures.

Anywho, apng is a real standard now, so one can just use that instead of gifs.


Yes. The performance of playing gifs is awful. Even better if gif autoplaying could be gated by the dimension of the gif. Under 100x100? That's fine, autoplay it. But some nutjob's 1000x1000 gif? Please spare me.


Yes please.


encoding an MP4 to work on all platforms is not as easy as exporting gif. gif will work on all platforms past and future, 10x the size tho they may be

(I encode as MP4 but i have to say it’s annoying to find it doesn’t work on some version of safari)


IIRC, ~everything other than Apple devices works with vp8 and webm. Apple devices like mp4 and x264.


Non apple devices are also fine with h264. AFAIK it’s the video codec with the most support and what I would pick if I’m going to be throwing the one same file at every device.


Most linux distros do not support it by default. I would encode in both h264 and vp9 which would cover everything and the browser should be able to pick the file it supports.


> Most linux distros do not support it by default.

Sure, but the number of end users who don't install nonfree codecs on their own must be numbered in the dozens.


I didn't have them installed for years and found almost everything still worked. I think the only website that didn't was twitter which I don't really use.


Firefox doesn't support it out-of-the-box.


Can they be used exactly like gifs? I have seen a few sites with mp4s but Firefox blocks them.

I do not think even sites like Dribbble have figured it out. I have a lot of issues there with videos.


Maybe they had sound, even if it was silence? https://support.mozilla.org/en-US/kb/block-autoplay


Well, Firefox blocks gifs to me too.

It depends on how you configure it. Any option you choose, make sure the first frame is informative.


The vast vast majority of people don't configure their browsers at all.

What matters is what the defaults are.


By default Firefox blocks anything that has audio, and lets anything that is mute play. In fact, now that I searched it again, it seems that there is no option to make gifs behave differently from video files anymore.

That's not what the GP saw.


Firefox doesn't block any MP4s for me. Sounds like your addons, or a cross site security error.


In what way does Firefox block them? If you mean they don't autoplay: that is how it is meant to be. Please do not annoy your users.


They may have tried to open arbitrary mp4s and had Firefox not render it.

Firefox seems to only render MP4 files that use yuv colorspace and aa3 audio channels, which require specific ffmpeg flags during transcoding. It took me a day of grinding whackamole to find the magic set of arguments to make all recent, popular browsers actually display a video:

https://github.com/photostructure/photostructure-for-servers...


More specifically, most devices will want _4:2:0_ Y'CbCr. It's highly unlikely that FFmpeg gave you anything that's not Y'CbCr (H.264 can technically encode RGB, but I've never ever seen it in use). And if it chooses 4:2:2 or 4:4:4, you get a warning.

FWIW, if you really want to encode your video in Rec. 2020, you'd almost certainly want a 10-bit encode, and then you're outside what e.g. iOS devices will render again. Rec. 709 is the safe choice.


Possibly a useful doc for ya then: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/V... . And beyond that it depends on the OS, so windows/linux/mac/ios/android/etc will all vary.

Some of this is also probably due to using ffmpeg directly, tbh. It's very happy to produce irrational combinations of things that are technically allowed by specs but not implemented anywhere in practice, often exacerbated by it trying to preserve metadata / colorspace / etc where technically possible.


I have issues with videos on Twitter. It's not every video, but about 10% refuse to play in Firefox.


Not for screen recordings, unless you're doing a screen recording of photos or videos a GIF will typically be more bandwidth efficient (as there will be large areas of single colours and few changes between frames which GIF is good at).


Modern video codecs certainly employ the ancient tricks known to gif; they also compress regions of the same color and encode differences between frames. Plus they don't have a limited 256-color palette per frame, so the result doesn't have to look like washed out garbage.


> as there will be large areas of single colours and few changes between frames which GIF is good at

Pretty sure that's how modern video codecs work too. A lot of movies have regions that don't change much between frames (e.g. backgrounds, or some dude's face staring at the camera all dramatically).

What GIF gets you is a lossless video, which is overkill for most applications. Video codecs can achieve a similar perceptual quality at a tiny fraction of the size, which is why services like gyfcat and imgur will often auto-convert gifs to videos for browsers that support it.

Take this 2MB GIF (https://blackmagic.so/assets/sidebar/most-engaging-hours.gif) and put it through an online converter: https://ezgif.com/gif-to-mp4/ezgif-7-68b177ec1944.gif

WebP: 1.64 MB

MP4: 300 kB

AVIF: 274 kB


Yes indeed all modern video codecs are based on encoding differences between key frames. GIF has the most basic implementation of that (it can update only a window in the image instead of the whole image).

The original GIF can actually be compressed losslessly down to just 1.4MB with a better compressor like https://gifcompressor.com .

MP4 (and similar codecs) are not typically very good at compressing regions of constant colour, while GIF is very good at that. However I have to admit that the output of that converter is acceptable in MP4, better than I would have expected (though noticeably worse quality).

BTW curiously (likely to better performance on regions of constant colour) the non-lossy WebP does better on this example coming in at just 1.2MB!


2 MB is huge over mobile for a simple graphic illustrating one of many, many features.

If you really want to use GIF, it would make more sense to manually create an animation out of frames you define, switching between highlights of that feature, rather than a screen recording that captures every minor, irrelevant animation and follows the hover popup as it moves around a few pixels. That's just a waste of bandwidth. A manually curated GIF of that size could be like 40 kB or so, not megabytes.

Otherwise, I'd argue MP4 is by far the superior option for this use case given its far smaller size, where visitors just need to know at a rough glance what a feature does, not examine it for pixel perfection. An imperfect video that loads in 20% of the time is preferable than waiting forever for a huge gif to load.


All I know is that when I find an actual gif it's really easy to save and share, but when I find a "gif" that's actually a video, shit never works right.

Keep gifs. More gifs, even. Down with videos where gifs would do.

Also, raw size isn't everything. What's memory use look like during playback? CPU use? Higher? Spikier? I know there's hardware decoding for common codecs but wouldn't be surprised if videos still use more CPU than gif, in practice.


Gifs look like garbage for video though, and take up 10x the space.

I'm the opposite. I wish they'd just deprecate gif everywhere and then we'd see better video support.

CPU usage shouldn't be an issue for small web video clips on any semi-recent device, my phone records 4k 60fps HEVC HDR10+.


> Gifs look like garbage for video

We're speaking of animated graphics, right ?

> my phone records 4k 60fps HEVC HDR10+.

Reminds me of the rant of one of the Google camera app devs on a podcast, where they tried to see with the android guys if there was any way to just force kill every other app processes while the camera app if on the foreground to guarantee it would have enough resources upfront to do its job.

Now playback efficiency should mostly rely on the codec and wether it's hardware supported, but I wonder if there would be a pipeline effect when you're trying to play 25 videos at the same time and they all need to go through the hardware decoder.


>We're speaking of animated graphics, right ?

Hmm, wouldn't proper video codecs be better in any case?

Whatever settings they use for animated cartoons would be good for animated graphics. I can't imagine a modern codec could be less efficient than gif.

>Now playback efficiency should mostly rely on the codec and wether it's hardware supported, but I wonder if there would be a pipeline effect when you're trying to play 25 videos at the same time and they all need to go through the hardware decoder.

Hopefully it would stop playing them when they're not visible. But you're right, that is a good question as I doubt the decoders have really been designed with that usage in mind, rather to optimize for a single aforementioned high-res video.


Most video codecs, including H.264 and H.265, encode in frequency space (after DCT transform) on a block-by-block basis, discarding high-frequency information (the edges of text and graphical elements are high frequency information). That's why you can see blurriness and ringing around edges in text and graphical images with a video codec. It's not what they are designed for.

GIF uses Lempel-Ziv compression, meaning it can encode repeating information efficiently ("the next 10 pixels are the same colour as the last 1"). Efficient if there are a lot of areas of the same colour or repeated patterns.

GIF uses RGB colour space just like your screen, so there is no loss of colour information if there are fewer than 255 distinct colours per frame (typical for text & simple screen graphics!). Video codecs (like H.265) typically use YUV420 colour space, meaning that colour information is encoded at lower resolution than brightness.

Palette based colour encoding (like GIF uses) is quite efficient when there is a small number of distinct colours in an image / video (like in the videos in the article...).


As another example the encoder at https://compress-or-die.com does a quite impressive job at compressing the GIF if allowing some loss of visual quality. Taking the number of colours down to 14 and allowing lossy compression I got the file size down to 386kB: https://compress-or-die.com/gif-process?expert-mode=no&exper...

I'd consider that a good trade-off given the universal compatibility of GIFs, and no ringing in the decoded video.


Massive gifs of screen recordings embedded in github readme pages is really obnoxious. Gif is a terrible format for these, the files are frequently several megabytes where a modern video format might have it crisp and legible under 100KB.


You have to encode it in multiple formats because many systems do not support proprietary codecs.


The problem is mostly the Apple devices which don't support non-proprietary formats. H.264 is probably the most universal codec, but it's proprietary and requires a license for commercial use. The non-proprietary VP8 codec is supported by most browsers, but Safari support (outside of WebRTC) requires version 14.1, which was only released this year. And that's only on Mac OS, not iOS—though we might see WebM support for mobile Apple devices in the next release. And then there are complicating factors like "Edge support for VP8 requires the use of Media Source Extensions" and "Firefox only supports VP8 in MSE when no H.264 hardware decoder is available"[0] which stand in the way of a one-size-fits-all solution.

[0] https://developer.mozilla.org/en-US/docs/Web/Media/Formats/V...


Is there a format that is not proprietary and works for this purpose?


AV1 is the proposed future. But Apple has been holding back universal free formats for a while now. Apple is on the AV1 group so in theory they should support it later but they do not yet.


What do you use to encode the MP4s?


ffmpeg




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: