Video: GIFs Are Forever, Let’s Make Them Better!

[00:00:00] All right, let’s give it up for the CascadiaJS crew, and also Rachel. Those were some tough tech challenges there. Basically in a few minutes, swapped out the entire AV chain. I really, really appreciate it. Keep those clapping hands ready because I’m going to ask by round of applause, how many of you were born after the year 1987?

All right. Congratulations to everyone who clapped. You are officially [younger] [00:01:00] than the GIF image file format. But to be fair, it didn’t come to web browsers until a few years later, thanks to Netscape Navigator 2. 0. We started being able to use it in the year 1995. And What’s interesting about it is that it’s been almost 30 years, if you can believe it, since then.

And a lot has happened, a lot has changed, we do a lot of things differently. But animated GIFs are still around. They’re still a part of the web experience. And so we have to ask ourselves, why? Why is that the case? And maybe we can find some clues if we take a look at the main selling points of the GIF image file format to begin with.

So, what were its main draws when it debuted straight out of CompuServe back in 1987? Was it the fact that there were 256 colors per frame? Was that the reason it stuck around? Probably not. We can do millions of colors with basically any other image format. Was it the fact that it had single bit transparency support?

That was [00:02:00] Really useful for a number of years there, but don’t like those pixelated alias edges on the corner. We can do lots of gradations of transparency. Now, was it the fact that it could contain image sequences? I think that that might be the answer to the question here, because with that enabled was a very distinctive and interesting style of animated clip.

These animations could be silent. Most of the time they loop and most importantly. They play in line with the surrounding content. They weren’t like a full screen feature presentation. There’s something that tended to complement whatever was around it. And that allowed Animated GIFs to occupy a really interesting and unique space more like emojis or emoticons than like traditional images or more traditionally full screen showcase video.

Animated GIFs became a way to share more extreme or complex reactions. [00:03:00] Very specific references and in jokes. And to break outside the artifice of whatever the surrounding context was, break that fourth wall, make eye contact with the viewer and say, Hey, you’re seeing this too, right? And when we think about the animated GIF like that, we realize that in the popular zeitgeist, outside of the developer community, when someone says, Hey, that was a funny GIF, or I’m going to send you a GIF, They’re not talking about the image file format anymore.

They couldn’t care less what spec came out of CompuServe in 1987. What they’re really talking about is GIF as a shorthand for the silent inline animated clips. And if we think about them that way, it kind of begs the question of why are we still doing them the same way as we were in 1995 if the context surrounding them has broadened so much, what opportunities might there be to improve on their [00:04:00] experience?

So let’s start from that core set of five features I just talked about. Five characteristics, animated, silent, looping, inline, autoplaying. And over the course of this talk, we’re going to add five more to that list. Five more foundational features. I’m going to start with the first one. We’re going to start slow.

We’re going to talk about text alternatives. Now I know what you’re thinking, Tyler, this is CascadiaJS. We know about alt text already. It’s not even specific to GIFs. Why are we talking about it right now? You know, we should just skip on to the next thing. And I wish I could, Cascadia. I wish I could. But when WebAIM tested the top million homepages on the internet, you know how many of them were missing alt text?

These are homepages. First impressions. Top million! Homepages, over half of them were missing their alternative text. So, we clearly have a ton of work to do in this regard. So, you all are JavaScript developers, you’re [00:05:00] probably going to be in a position to influence interfaces, interfaces that accept user generated content.

Make sure you’re talking to your managers and your team about UI for describing these images. Make sure you’re thinking about ways to broadcast the information, educate your users, look into ways to automate and smooth out that process. If you’re a content creator and you’re thinking about using animated GIFs or GIF like animations, follow my colleague Scott’s advice over at Cloud Four.

He wrote this great article, Write Alt Text Like You’re Talking To A Friend. Takes a lot of the guesswork and the overthinking out of it. Once you have that alt text, plop that thing into the alt attribute. And now let’s move on to some more exciting features. How’s that sound?

I love Cascadia. You’re all on board for my little preachy alternative tech section. I absolutely love it. We’re going to kick things up a notch. We’re actually going to tackle the next two at once. We’re going to make higher quality animated [00:06:00] clips that are also a smaller file size. We’re going to make it better, download faster, more than ever makes us stronger.

We’re going to do this. Thanks to Modern Browser Support for, there are actually a bunch of image formats that we could use, but the two I’d recommend checking out are WebP, which has been supported in Chrome for a decade now, and AVIF, which I want to say, make a cutting edge joke here, because Edge just added support earlier this year, giving it baseline support in Modern Browsers.

Take one of my favorite animated GIFs, Homer Simpson backing into the hedge. The most popular version of this I could find online clocks in at just under a megabyte. You can’t really notice on this screen, but it’s got some aliased pixel, you know, edges. It’s suffering a little bit from those 256 colors.

The WebP and the AVIF versions of this are a fraction of the size. It’s not even close. Not only that, this isn’t a straight translation. I actually recaptured this asset from the original source material. It’s a little higher resolution. Better image quality, better color depth, and it [00:07:00] still comes in at a fraction of the original asset’s size.

If you’re working on a project, you can generate AViF and WebP assets using a variety of different headless tools. Most of them are based off of LibVips. You, this is CascadiaJS. You want to check out Sharp first, if you, if you check out any of these. You can also use a remote service, which is really helpful if you need to generate these sort of assets yourself.

What I when I started to write out all of the options, there are so many. So I decided I’m just going to be super biased and link to the one that’s paid me before. So Cloudinary was a client of Cloud Four. They’re a sponsor of this event too, which is super cool. Go check out my company’s case studies. We seriously worked on some really cool marketing stuff together. Really cool developer-centric widgets. But after you’re done checking out that case study, you should go check out one of the dozens of competitors. You know, do your research, but cloud nurse the best. So once you have those assets, it’s as simple as taking that image element.

And swapping out that file URL, that file path in the [00:08:00] source. If you’re concerned about compatibility, if Edge’s support for AVIF was a little too recent, totally get it. You can use the picture element. Just specify source elements inside with each format in the order of most performant to least.

Browser will display the first one that it understands and you get those higher quality images. And smaller size assets. We are really cruising now three down out of this list. So let’s move on to respecting motion preferences. Rachel talked about this a little bit, just to recap quickly. All modern operating systems have toggles now for opting into reduced motion for animations.

How can we respect that when it comes to GIFs? Well, if you think about an animated version of a clip, like this one here, classic from Office Space, this is something that we could conceivably make a static alternative asset to. So, maybe it lacks quite the same punch if you’re used to the motion version, but all the meaning is intact.

Someone isn’t missing out on anything. [00:09:00] We can actually serve up both of these depending on the user’s preference. So, here’s a picture element again, if you might remember it from a couple slides ago. The default image here is the static version. So, follows fails, just show the static one. Assume that someone isn’t comfortable with animation before you bombard them with it.

And then you can add a source with a media attribute. This lets you say, if you prefer, if you have no reduced motion preference, Here’s the version with the animation. And the browser will dynamically swap this out, even if someone changes their motion setting after a page is already loaded. It’s, it’s phenomenal.

Four out of five down. The producers are probably backstage wondering if they accidentally put a lightning talk in this slot. I mean, we are really cruising. And you know what? I’m not slowing down for them. I had to wait that whole time for my AV stuff to get switched out. We’re gonna keep going. So, we’re gonna talk about the last feature on my list, which is Playback control.

And you might be wondering, Tyler, why are we [00:10:00] wasting time on playback control? We just added a static asset. There’s no, you know, you don’t need playback control if they can just go to a non animated version. And I wish that were true. But as Rachel touched on earlier, Motion sensitivity has a lot of variation.

It is not binary. Someone might find an animated GIF or a similar clip perfectly fine when they’re at a stationary desk, but if you’re looking at it on your phone in the backseat of a car, it can be a very different situation. Same thing if an animation is pretty chill, pretty subtle, not a lot going on.

That, that’s very different than viewing something that’s a little bit more turbulent, a little bit more you know, shall we say barfy to look at for a long period of time. So if what you want is individualized control, if you want to be able to put the control in the user’s hands, you really need to swap image for video, and specifically a video with the controls attribute.

The browser’s support for this is even better than for images. [00:11:00] We’ve got baseline support for years for MP4 with the H.264 codec, and WebM with either the VP8 The higher number’s usually better. If we look at our earlier example, you can see that those file formats are comparable in file size. So it’s at the lowest of the low options.

Quality’s indistinguishable. The list of headless tools you can use to generate or transcode this stuff is a little smaller. It’s almost all based on FFmpeg. But there are GUIs, too, like Handbrake and Adobe Media Encoder that can generate these files. And if you want to generate them locally, there are dozens of options.

But seriously, did I mention that we did some really awesome work with Cloudinary and you should totally check it out later. I, I’m really, really proud of it. Not enough people have read that case study. I see the analytics. Once you have the asset though, there you swap out the image for video. Now, this probably looks pretty familiar.

If you, if you are used to an image element, you’ve got your source, you got your width, you got your height. But the long line of attributes, I [00:12:00] just want to step through them really quick because they’re important. Controls, that’s what make sure that there are visible controls for the end user to change and manipulate the experience.

You can make sure the animation auto plays if you want it to behave like a GIF. You can optionally loop it, you don’t need to, but most GIFs are, so there you go. Muted lets the browser know, no, I’m not being a bad citizen, I’m not going to try to play this video down beneath the scroll and have the user tear their hair out wondering where the sound’s coming from, I promise.

Don’t play sound for this. And playsinline makes, lets the browser know, this is intended to be with surrounding content, it’s not supposed to be a full screen takeover. And when you have all of those things together you get a GIF like video. If you want broader support video supports a source element, just like picture does.

Put them in the order, smallest to largest. It’ll display the first one that it has support for. And then you get your GIF like video. Playing inline, and the user can pause it [00:13:00] whenever they want to. Alright, we’re done, right? I mean, that was the last feature on my list. So, thank you very much for coming, and oh, you know what?

I don’t think I’m done yet. Now that I think about it, that image example I showed earlier, it sure did have some alt text. And I don’t think there’s any of that with that video markup that I showed. And also, I talked about the autoplay attribute and Doesn’t that mean that it’s just gonna autoplay for everyone?

There’s no reduced motion preference there. Guys, I think, I think we may have taken one step forward and two steps back. But don’t worry, we can fix it. Let’s start by fixing the alternative text. That’s a little simpler. So, we have a few options. I would love if there was just an alt attribute for video.

I have a to do that’s been on my to do list for six months to open an issue. But or to contribute to one that is already open. But we can add a [00:14:00] figure element in a fig caption. That’s an easy way to expose alternative text to screen readers. If you don’t want the caption to display, you can use CSS to hide it visually.

Alternatively, you can use aria label. It’s really important that you keep that controls attribute, though. If you do not keep that controls attribute around, the assistive tools will not associate the label reliably with the video. If you want to be extra awesome, You can actually use aria labeled by, which is going to associate a separate element.

The reason that’s extra awesome is because if someone needs the alternative text and they use a translation tool to go from one language to another, it’s more likely to work when there’s a separate element. So it’s a little verbose, but we got out of the woods when it comes to the text alternative.

We need to talk about motion preferences. So, in a perfect world, we could do something similar to what we did with images. We could use a source element and have the media query [00:15:00] for reduced motion there, and it would just sort of work the way the picture example would, but it doesn’t. Browsers actually do support the media attribute on video source elements, which is awesome.

It’s a very recent addition to some browsers. But it doesn’t work the way image does. There’s not really a concept of, oh, a video can sometimes not be a video, the same way that an image can sometimes be an animation. So if you do something like this, it’ll sort of work, except it’ll basically just, if the reduced motion preference is on, just enter this limbo state there’s no escape from. And unlike picture, there’s no dynamic changes. So even if you somehow were to figure out that that’s the problem, you’d have to reload the page for it to take effect. And basically what I’m saying is natively. We’re kind of screwed. So What do we do instead? Well, you could use any real JavaScript progressive enhancement technique, but you know what?

I’m excited. You know what I want to talk about today? I want to talk about light web components. Web components to the rescue! We’re gonna write a really simple one today [00:16:00] So let’s start from that markup I showed before, the one with the alternative text. And let’s destroy that autoplay attribute for now.

Okay? So by default, this thing is going to not autoplay. It’s going to assume someone prefers reduced motion. Be a good citizen. We’re gonna wrap that in a tag. We can name it whatever we like. Like, I like to call it gif-like. Needs to have a dash in it somewhere. And I’m going to show you the entirety of our Web Component source.

Don’t worry, I’m going to walk through it. I just want to show you it doesn’t take a lot. This is a good starting point for a Web Component that handles this situation. So this would be a separate file that you’d load on any page that you’re using the gif-like element in. First, we declare the class. It has to extend HTMLElement.

You can call it whatever you like. I recommend calling it whatever you call the tag to not drive any coworkers crazy. We save a MatchMedia object. This lets us check a media query just like we would in CSS. I’m making it static here because we can check [00:17:00] the same one. So this way, if you have a hundred gif-like tags on your page you’re not going to create a hundred media queries unnecessarily.

The connected callback is going to fire every time that this class is attached to our custom element. Connected to it, some might say. We’re going to store a reference to the video that’s within that element. And we’re going to call a toggle method that we haven’t written yet. Don’t worry, you didn’t miss anything.

From two places. We’re going to call it from a event listener on that media query. So every time it changes, we want to toggle the playback state of the video. And we’re going to call it once initially, based on the initial state, so we don’t have to wait for a change for this to take effect. And here’s a really complicated toggle method.

If it’s true, play the video. If it’s false, don’t. And that’s the core of the class. All we have to do now is tell the browser, hey, that GIF like tag connected to this GIF like class. And that’s the whole web component. Don’t worry, you don’t have to type [00:18:00] furiously. There’s a gist online that has this in there.

It’s a fine starting point you can look up later. So once we have that in place, You’ll see that reduce motion preference is on, we have our video, it’s not auto playing because the person says they prefer reduced motion. If we toggle that though, dynamically it’s going to start playing. And if I as a user am like, that’s distracting, that’s upsetting, I don’t like, why does Sonic look like that they can go ahead and pause the video.

With that, we made it out of the woods. Everyone give yourselves a hand. We made it through some really harrowing stuff there for a second.

The best part though, the most exciting part, is that at this point you now have an awesome hook, a jumping off point for whatever changes you want to make to suit your experience. You don’t have to settle for the [00:19:00] native browser controls if you don’t want to. You could add your own toggle or something like that.

You could use lazy loading using like intersection observers. There’s a great article that Jeremy Wagner and Rachel Andrew wrote on this very topic. If you find that markup too verbose, there’s never been more options to make it a little bit more concise. We’re gonna have a talk later from the, the, one of the co founders of Begin, so that you talk to them about Enhance SSR.

We’ve got Eleventy WebC. You can create a CMS blocker or a blocker, a template helper to help folks out when they’re entering this content. When it comes to the possibilities, they’re pretty much endless when we keep in mind the things that we learned here today. For one GIF is not really a file format anymore in the minds of our users.

We don’t have to be constrained by that because it’s primarily a shorthand for silent inline animated clips. Alternative text is something we need to be better about. Like, we [00:20:00] need to commit to be better about it. It’s such low hanging fruit and we’ve ignored it for so long. We We learned about these modern formats that are supported everywhere and a fraction of the file size.

They look so much better if you’re working on a project and you’re on the fence about image versus video. Video gives users more control. And web components are really great choice for progressive enhancement. And more importantly, the reason I find this topic kind of fun and kind of interesting is it’s such a dusty old corner of the web in a lot of ways, right?

It’s so core. That it almost feels odd to examine it, to poke at it a little bit. But if there are opportunities to improve the user experience hidden in the depths of this thing we sort of take for granted, then what other dusty, underexplored corners of our medium exists that are just waiting for one of us to go in Turn some dials, modernize for our users [00:21:00] today.

I hope you’ll share what you find out there. I’m Tyler Sticka. My company is Cloud Four. Thank you so much for having me, Cascadia. It’s been a pleasure.