8 ms·

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 bandwi

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.

janekm 5y ago
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).
- oefrha 5y ago
  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.
- technobabbler 5y ago
  > 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 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 https://ezgif.com/gif-to-mp4/ezgif-7-68b177ec1944.gif WebP: 1.64 MB MP4: 300 kB AVIF: 274 kB
  - janekm 5y ago
    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 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!
    - technobabbler 5y ago
      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.
  - janekm 5y ago
    As another example the encoder at https://compress-or-die.com 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&expert-mode=yes&size%5B%5D=373&size%5B%5D=211&start_frame=1&fps=100&colors=14&color_method=blend-diversity&dithering=&lossy=0 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.
  - handrous 5y ago
    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.
    - brokenmachine 5y ago
      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+.
      - makeitdouble 5y ago
        > 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.
        brokenmachine 5y ago
        >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.
- Eelongate 5y ago
  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.
throwawayboise 5y ago
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.
- Rebelgecko 5y ago
  Some (all?) browsers will still play autoplay videos as long as there's no audio track (or if it's muted by default)
- _g5q8 5y ago
  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.
  - BoorishBears 5y ago
    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
    - _g5q8 5y ago
      Low power mode doesn't affect autoplay for me in Safari
- SimeVidas 5y ago
  I’m curious, would you disable GIF autoplay if the browser’s settings offered it?
  - taftster 5y ago
    Yes please.
  - MrStonedOne 5y ago
    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.
capybara_2020 5y ago
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.
- astroalex 5y ago
  I have issues with videos on Twitter. It's not every video, but about 10% refuse to play in Firefox.
- devmor 5y ago
  Firefox doesn't block any MP4s for me. Sounds like your addons, or a cross site security error.
- hateful 5y ago
  Maybe they had sound, even if it was silence? https://support.mozilla.org/en-US/kb/block-autoplay https://support.mozilla.org/en-US/kb/block-autoplay
- gpvos 5y ago
  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.
  - mceachen 5y ago
    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/blob/1f6d907769fd2b01900eb88ce64bf0d732998aa0/defaults.env#L783 https://github.com/photostructure/photostructure-for-servers...
    - Groxx 5y ago
jazzyjackson 5y ago
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)
- dehrmann 5y ago
  IIRC, ~everything other than Apple devices works with vp8 and webm. Apple devices like mp4 and x264.
  - austhrow743 5y ago
    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.
    - Gigachad 5y ago
      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.
      - Eelongate 5y ago
        > 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.
        Gigachad 5y ago
        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.
    - dehrmann 5y ago
adrianh 5y ago
This is exactly what we do on https://www.soundslice.com/features/ https://www.soundslice.com/features/ (the minivideos below the main hero section). Would definitely recommend using MP4s instead of GIFs, for the bandwidth savings.
- avinashjn 5y ago
  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.
hahamrfunnyguy 5y ago
What do you use to encode the MP4s?
- SSLy 5y ago
  ffmpeg
nfriedly 5y ago
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 https://bugzilla.mozilla.org/show_bug.cgi?id=1684718
Gigachad 5y ago
You have to encode it in multiple formats because many systems do not support proprietary codecs.
- wildrhythms 5y ago
  Is there a format that is not proprietary and works for this purpose?
  - Gigachad 5y ago
    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.
- nybble41 5y ago
  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/Video_codecs https://developer.mozilla.org/en-US/docs/Web/Media/Formats/V...

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.

janekm 5y ago

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).

oefrha 5y ago
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.
technobabbler 5y ago
> 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 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 https://ezgif.com/gif-to-mp4/ezgif-7-68b177ec1944.gif WebP: 1.64 MB MP4: 300 kB AVIF: 274 kB
- janekm 5y ago
  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 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!
  - technobabbler 5y ago
    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.
- janekm 5y ago
  As another example the encoder at https://compress-or-die.com 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&expert-mode=yes&size%5B%5D=373&size%5B%5D=211&start_frame=1&fps=100&colors=14&color_method=blend-diversity&dithering=&lossy=0 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.
- handrous 5y ago
  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.
  - brokenmachine 5y ago
    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+.
    - makeitdouble 5y ago
      > 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.
      - brokenmachine 5y ago
        >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.
Eelongate 5y ago
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.

throwawayboise 5y ago

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.

Rebelgecko 5y ago
Some (all?) browsers will still play autoplay videos as long as there's no audio track (or if it's muted by default)
_g5q8 5y ago
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.
- BoorishBears 5y ago
  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
  - _g5q8 5y ago
    Low power mode doesn't affect autoplay for me in Safari
SimeVidas 5y ago
I’m curious, would you disable GIF autoplay if the browser’s settings offered it?
- taftster 5y ago
  Yes please.
- MrStonedOne 5y ago
  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.

capybara_2020 5y ago

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.

astroalex 5y ago
I have issues with videos on Twitter. It's not every video, but about 10% refuse to play in Firefox.
devmor 5y ago
Firefox doesn't block any MP4s for me. Sounds like your addons, or a cross site security error.
hateful 5y ago
Maybe they had sound, even if it was silence? https://support.mozilla.org/en-US/kb/block-autoplay https://support.mozilla.org/en-US/kb/block-autoplay
gpvos 5y ago
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.
- mceachen 5y ago
  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/blob/1f6d907769fd2b01900eb88ce64bf0d732998aa0/defaults.env#L783 https://github.com/photostructure/photostructure-for-servers...
  - Groxx 5y ago

jazzyjackson 5y ago

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)

dehrmann 5y ago
IIRC, ~everything other than Apple devices works with vp8 and webm. Apple devices like mp4 and x264.
- austhrow743 5y ago
  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.
  - Gigachad 5y ago
    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.
    - Eelongate 5y ago
      > 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.
      - Gigachad 5y ago
        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.
  - dehrmann 5y ago

adrianh 5y ago

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

avinashjn 5y ago
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.

hahamrfunnyguy 5y ago

What do you use to encode the MP4s?

SSLy 5y ago
ffmpeg

nfriedly 5y ago

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 https://bugzilla.mozilla.org/show_bug.cgi?id=1684718

Gigachad 5y ago

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

wildrhythms 5y ago
Is there a format that is not proprietary and works for this purpose?
- Gigachad 5y ago
  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.
nybble41 5y ago
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/Video_codecs https://developer.mozilla.org/en-US/docs/Web/Media/Formats/V...