GIFs Are Forever, Let’s Make Them Better

GIFs are forever… Let’s make them better! CascadiaJS 2024

1987

1995

2005

2015

2024

256 Colors Per Frame?

256 Colors Per Frame? Single-Bit Transparency?

256 Colors Per Frame? Single-Bit Transparency? Image Sequences?

Here is a cool example of a silent GIF I like this loop of a kitty with a soccer ball even better, though

“Using emoji, emoticons and GIFs in a texted conversation instantly signals the difference between sincerity and a joke or sarcasm.” — Jenna Wortham The New York Times

Tired: GIF, an image file format

Wired: GIF, a shorthand for silent, inline animated clips

Animated Silent Looping Inline Autoplay

Animated Silent Looping Inline Autoplay Text alternative

Of the top 1,000,000 home pages… Source: webaim.org/projects/million (March 2024)

Of the top 1,000,000 home pages… 54.5% were missing alt text! Source: webaim.org/projects/million (March 2024)

Describe the image for blind and low-vision users A peeved groundhog repeatedly shouts “Hey!…Hey!…Hey!”

cloudfour.com/thinks/write-alt-text-like-youre-talking-to-a-friend

Animated Silent Looping Inline Autoplay Text alternative

Animated Text alternative Silent Looping Higher quality Inline Autoplay

Animated Text alternative Silent Looping Higher quality Smaller size Inline Autoplay

WebP Since 2014 (v32) Since 2018 (v18) Since 2019 (v65) Since 2022 (v16.0)

WebP Since 2014 (v32) Since 2018 (v18) Since 2019 (v65) Since 2022 (v16.0) AVIF Since 2020 (v85) This Year (v121) Since 2021 (v93) Since 2023 (v16.4)

974 KB 226 KB 66 KB GIF WebP AVIF

974 KB r e h g Hi ! ! y t i qual 226 KB 66 KB GIF WebP AVIF

Local libvips sharp gif2webp FFmpeg ImageMagick

s e c i v r e S Local libvips sharp gif2webp FFmpeg ImageMagick : e r U S o l c s i d L Ful ! T n e i l c They’rE a cloudfour.com/made …and many others!

Animated Text alternative Silent Looping Higher quality Smaller size Inline Autoplay

Animated Text alternative Silent Looping Higher quality Smaller size Inline Motion prefs Autoplay

clip.avif f i v a . c i t a t s

Animated Text alternative Silent Looping Higher quality Smaller size Inline Motion prefs Autoplay

Animated Text alternative Silent Looping Higher quality Smaller size Inline Motion prefs Autoplay Playback control

Motion sensitivity often depends on content + context

≠

MP4 (H.264) Since 2010 (v4) Since 2015 (v12) Since 2015 (v35) Since 2008 (v3.2)

MP4 Since 2010 (v4) Since 2015 (v12) Since 2015 (v35) Since 2008 (v3.2) WebM Since 2013 (v25) Since 2020 (v79) Since 2014 (v28) Since 2022 (v16.0) (H.264) (VP8 / VP9)

974 KB 226 KB GIF WebP 81 KB 66 KB 59 KB MP4 AVIF WebM (H.264) (VP9)

Local FFmpeg Handbrake Adobe Media Encoder

s e c i v r e S Local FFmpeg Handbrake Adobe Media Encoder : e r U S o l c s i d L Ful ! d E s A i b I’m stiLl cloudfour.com/made …and even more alternatives!

Animated Text alternative Silent Looping Higher quality Smaller size Inline Motion prefs Autoplay Playback control

Animated Text alternative Silent Looping Higher quality Smaller size Inline Motion prefs Autoplay Playback control

<figure> <video controls autoplay loop muted playsinline … … width=”…” height=”…”> <source src=”clip.webm” type=”video/webm” /> <source src=”clip.mp4” type=”video/mp4” /> </video> <figcaption> An example of a video used as a GIF. </figcaption> </figure>

<video controls autoplay loop muted playsinline … … width=”…” height=”…” aria-labelledby=”clip-label”> <source src=”clip.webm” type=”video/webm” /> <source src=”clip.mp4” type=”video/mp4” /> </video> <div id=”clip-label” aria-hidden=”true”> An example of a video used as a GIF. </div>

Animated Text alternative Silent Looping Higher quality Smaller size Inline Motion prefs Autoplay Playback control

<video controls autoplay loop muted playsinline … … width=”…” height=”…” aria-labelledby=”clip-label”> <source src=”clip.webm” type=”video/webm” media=”(prefers-reduced-motion: no-preference)” /> <source src=”clip.mp4” type=”video/mp4” media=”(prefers-reduced-motion: no-preference)” /> </video> <div id=”clip-label” aria-hidden=”true”> An example of a video used as a GIF. </div>

Web components!

<video controls autoplay loop muted playsinline … … width=”…” height=”…” aria-labelledby=”clip-label”> <source src=”clip.webm” type=”video/webm” /> <source src=”clip.mp4” type=”video/mp4” /> </video> <div id=”clip-label” aria-hidden=”true”> An example of a video used as a GIF. </div>

<video controls loop autoplay muted playsinline … … width=”…” height=”…” aria-labelledby=”clip-label”> <source src=”clip.webm” type=”video/webm” /> <source src=”clip.mp4” type=”video/mp4” /> </video> <div id=”clip-label” aria-hidden=”true”> An example of a video used as a GIF. </div>

<gif-like> <video controls loop muted playsinline … … width=”…” height=”…” aria-labelledby=”clip-label”> <source src=”clip.webm” type=”video/webm” /> <source src=”clip.mp4” type=”video/mp4” /> </video> <div id=”clip-label” aria-hidden=”true”> An example of a video used as a GIF. </div> </gif-like>

class GifLike extends HTMLElement { static motionQuery = window.matchMedia( “(prefers-reduced-motion: no-preference)” ); connectedCallback() { this.video = this.querySelector(“video”); GifLike.motionQuery.addEventListener(“change”, (query) => { this.toggle(query.matches); }); this.toggle(GifLike.motionQuery.matches); } toggle(state) { if (state) { this.video.play(); } else { this.video.pause(); } } } customElements.define(“gif-like”, GifLike);

class GifLike extends HTMLElement { static motionQuery = window.matchMedia( “(prefers-reduced-motion: no-preference)” ); connectedCallback() { this.video = this.querySelector(“video”); GifLike.motionQuery.addEventListener(“change”, (query) => { this.toggle(query.matches); }); this.toggle(GifLike.motionQuery.matches); } toggle(state) {

this.toggle(query.matches); }); this.toggle(GifLike.motionQuery.matches); } toggle(state) { if (state) { this.video.play(); } else { this.video.pause(); } } } customElements.define(“gif-like”, GifLike);

toggle(state) { if (state) { this.video.play(); } else { this.video.pause(); } } } customElements.define(“gif-like”, GifLike);

class GifLike extends HTMLElement { static motionQuery = window.matchMedia( “(prefers-reduced-motion: no-preference)” ); connectedCallback() { this.video = this.querySelector(“video”); GifLike.motionQuery.addEventListener(“change”, (query) => { this.toggle(query.matches); }); this.toggle(GifLike.motionQuery.matches); } toggle(state) { if (state) { this.video.play(); } else { this.video.pause(); } } } customElements.define(“gif-like”, GifLike); ! e r E h d SHaRe gist.github.com/tylersticka

Animated Text alternative Silent Looping Higher quality Smaller size Inline Motion prefs Autoplay Playback control

web.dev/articles/lazy-loading-video

… … <gif-like src=”…” alt=”…”></gif-like> r o c B e w y t n e v e Enhance SSR or el … r e p l e h e t a l p m e t cMs block or <gif-like> <video controls loop muted playsinline preload=”none” … poster=”…” … … width=”…” height=”…”

Here is a cool example of a silent GIF I like this loop of a kitty with a soccer ball even better, though GIF is a shorthand for silent, inline, animated clips

Alternative text is chronically overlooked low-hanging fruit

974 KB Newer formats work in all modern browsers, load faster and look better 226 KB GIF WebP 81 KB 66 KB 59 KB MP4 AVIF WebM (H.264) (VP9)

Video gives users more control

<gif-like> Web components are a great choice for progressive enhancement </gif-like>

tylersticka.com @$tylersticka$@$social.lol /in/$tylersticka ! m a e t Hire my cloudfour.com

GIFs Are Forever, Let’s Make Them Better

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75