See full event listing

GIFs Are Forever, Let’s Make Them Better!

Everyone loves animated GIFs, right? Not if you have finite bandwidth, a shaky network connection or motion sensitivity! But fear not: Thanks to newly supported media formats, shiny new web standards and the magic of web components, there’s never been a better time for web designers and front-end developers to level up our GIF game!

We’ll discuss the benefits and drawbacks of the animated GIF, its history and place in today’s culture, accessibility and performance considerations, and ways of improving the experience with features available in every modern browser.

Tyler Sticka is a creative director, designer, writer and artist from Portland, Oregon who specializes in expressive yet performant responsive experiences. He co-owns Cloud Four, a boutique web design and development consultancy. Past clients include Walmart, Microsoft and Sasquatch! Music Festival, and businesses in the SAAS, B2B, healthcare, and educational spaces. Tyler’s iOS game “Ramps” was an early App Store hit, which Apple called “simple and stylish” in a weekly feature.

Transcript

Tyler Sticka 0:16 I’m here to talk about gifs, and I am going to start by addressing the elephant in the room. You may have heard me say GIF with a hard G just now. Look, this is a boring argument when it comes to pronunciation, I’ve just been saying it this way for too long to change now, but I want to let the purists that may be tuning in the Say it with a soft g. That’s the way the creator of the GIF insisted it was pronounced. So I just want you to know that I see you. I appreciate you, and I’m really sorry for the next 25 minutes, because your eyes probably going to twitch with that out of the way, I have a question for you. You out there the viewer to ask yourself, were you born after the year 1987 If so, then congratulations. You’re officially younger than the GIF image format, though, to be fair, it didn’t come to the web until 1995 thanks to your favorite browser and mine, Netscape Navigator, 2.0 and in the nearly 30 years since the invention of the format, a lot of things have changed about our culture, about the web, certainly the way we build websites. And yet, GIFs remain in some ways, they’re more prevalent than ever, and that begs the question, Why? Why would something stick around that long? Why would it seem to surge every so often for that long? So to answer this question, let’s dive into some of the distinguishing characteristics of the GIF. All right, what? What’s, what were the claims to fame with the GIF? Image file format? Is it the fact that it supported 256 colors per frame? I mean, maybe that blew some minds back in the day, but now we can display, as you know, millions of colors, you know. So that’s that’s not really a thing. Is it the fact that it supported single bit transparency is probably the reason why folks like Brian and I reached for it in our early days of the web, is because you could have the background show through, but we can do many, many degrees of transparency in just about any other image format at this point, is its support for image sequences, which is kind of the fancy image format way of saying animation. I mean, that has got to be the reason. And it specifically is the characteristic that allowed the GIF to popularize a really particular style of animated clip, an animated clip that was silent, that most of the time, but not always, would loop so it didn’t really need to wait for the viewer to engage with it, and most importantly, it would play in line with the surrounding content. And the reason that’s the most important is because it’s the characteristic that allowed the GIF to be so well suited for spicing up our editorials and our conversations and are message groups. Gifts are a type of asset that can express more heightened emotions than an emoticon or emoji might. They can encapsulate these little in jokes and cultural references that can be highly specific and yet contained to a small moment in time and within the context of a larger amount of content, whether it’s like a big article or a long conversation, you can sort of be this window into it, breaking out into the fourth wall, connecting with the viewer and saying, Hey, are you seeing this too? Are you feeling this emotion as well, and from that point of view, from the way that it’s perceived and the the characteristics that have persisted, we realize that the term GIF no longer primarily refers to an image file format. When the typical user of a GIF says that word. What they’re really talking about is that silent style of inline, animated clip that complements surrounding content.

And so if we have sort of transformed the way that we perceive the word GIF, does that sort of give us an excuse to examine the way that we’re describing it in our HTML in our documents, is the way that we did it in 1995 still the best way. So what we’re going to do is we’re going to take those important characteristics The reason the GIF has persisted, the fact that they are animated. It, that they are silent, that they can loop, that they play in line automatically, and we’re going to double that feature list to include five more modern characteristics that we can start to pepper in to this sort of content. I’m going to say up front that this is going to feel like the we’re building towards an end result that is the perfect gift. Like alternative, every project is different, and part of the value in in building on this step by step, is your team, your organization can decide how far you want to take this what makes the most sense for your users. But we’re going to start really, really simply. We’re going to start with the idea of text alternatives. Now I know what you’re thinking, Tyler, any image, GIF or not, can have an alt attribute. This is not unique to the GIF. Why are we talking about it here in this talk that is ostensibly about GIFs. And you know I you know that, and I know that, but our industry as a whole doesn’t seem to know that, because when WebAIM tested the top million home pages, they found that more than half of them are missing alternative text. These are the top million websites. These are the home pages first impression. We are leaving out alternative text, and so I couldn’t, in good conscience, not mention, especially at an event catering toward developers involved in media, the need to if we’re building interfaces that accept user generated content, we should be pitching, designing, implementing straightforward ways to include, automate, suggest alternative text, and if we are creating the content ourselves, we need to do a better job of that. I know it can be intimidating, but I encourage you to look up to follow my colleague Scott’s advice, and just think of it as if you had to describe the content to a friend over the phone or something like that. Once you have that content, enhancing our 1995 version of the GIF HTML is as simple as plopping it in that alt attribute. I You just saw Stanley Hudson roll his eyes at and when you’ve done that, bam, you’ve just gone one step further away from our 1995 version of the GIF we we’ve modernized it just that much more now, more people than ever can digest that content. And you know, that was so easy, so straightforward, I’m feeling a little confident now. So I think you know what, let’s tackle two more features at once. All right, let’s, let’s, let’s really go for it. Okay, we’re going to make these assets higher quality and smaller in file size. We’re going to make it better, download faster, more than ever. Makes us stronger.

We can do this thanks to baseline support for a lot of newer image file formats. In this talk, I’m going to focus on two that I think are kind of your best bet in terms of the combination of quality and file size savings and browser support. We’ve got your WebP, which has been supported for a number of years, and avif, which is a little younger, but again, really great support across the board. So let’s see how these could apply to one of my favorite GIFs, which is Homer Simpson backing into a hedge. This is the most popular GIF version I can find. It’s got some pixelated, grainy sort of artifacts, because it is a GIF, and it comes in it just under a megabyte for just a couple seconds of animation, if I recapture that clip from the original source, so way higher quality, better resolution, none of the pixels and things like that, we can crunch that thing down to a fraction of the size. So higher quality, smaller size, just by changing the format. And it has all the same features. You can generate these sorts of assets using any number of local tools that you can integrate into your build process or just prepare by hand, or, as others have talked about already today, you can use a third party service. We’ve had good experiences with both event sponsors that we’ve seen that specialize in this, like images. But I also have to shout out cloudinary, because, full disclosure, they are a client, and sorry to delve into self promotion here, but we did some really awesome work with them. There’s this really cool developer demo that if you’re a developer with media you should definitely try out. But there are many others, because I think if you talk to images or cloudinary say, well, transforming assets like this is is kind of table stakes so, but we’ve had good experiences with them, for sure. And once you have that asset using it is really simple. You take that image markup that we’ve been using since 1995 It’s got our nice alt attribute in it, though, and you just go ahead and you plop in the URL to that new asset and it’ll work.

Work just the same. If you’re a little paranoid about browser support, we can broaden the sort of scope of what we’re serving up by wrapping that image in a picture element and providing multiple sources so the browser is going to download the first one that it’s capable of displaying. We can even include as a fallback that dusty old GIF. If you’re really feeling like a completionist in terms of what you pass along to the end user. And with that three out of five done, we are really cruising. I’m like, not even halfway through my talk, but you know what? Let’s keep this momentum going. We’re going to respect the user’s motion preferences now, so a lot of users may have, for a variety of reasons, a preference for reduced motion. Maybe they have motion sensitivity. Maybe it’s just a personal preference. They just find it jarring or distracting. If you have ADHD, it can be a problem. And so every modern operating system has a global settings toggle for opting into reduced motion, and that’s something we can detect in every web standard, HTML, CSS and JavaScript all has the ability to detect this feature. So if we think about an animated GIF, that’s problematic. If you if you have a user who wants to opt into animation, and now we are auto playing one automatically. And in this case, this is a gift from a clip from office space, and it’s the animated version is great. It kind of plugs directly into our memory of the film, right? But we could get this same exact idea across with a static image, and using that picture element that I showed earlier, we can add a media attribute so that we can serve either asset depending on the user’s preferences. So in this case, I’m defaulting to the static version. You could do either way. You could default to the animated version. I like to err on the side of always kind of defaulting to the least disturbing, distracting, damaging version of something and using progressive enhancements to add bells and whistles. So to me, static is a more obvious starting point, but your use case may be different, your audience needs may be different. So, but here we are going to start with the static version as the fallback, and only when there is no reduced motion preference, we go ahead and show that animated version of the clip. It’s even cooler is browsers will change this on the fly. So if the user, even if your web page or your experience is loaded and they change the setting the picture elements smart, and when they return to the page, it’ll swap it out, which is really cool.

Four out of five features done. We have motion preferences that are respected now. Brian and the producers are probably scrambling right now thinking, holy cow, we got to start our Q and A early. Did Tyler think this was a lightning talk? But I’m not going to slow down for them. They seem like nice guys, but we’re, we’re, you know, we’ve got pace here. We gotta keep it going. So let’s go ahead and close things out by talking about playback control. And once again, you may be wondering, well, didn’t we just add a playback control? You know, if the user wants motion, they can have it. If they say they don’t like motion, they don’t get it. What other control is necessary. And the problem with that idea is that motion sensitivity is not a binary. It can change a lot depending on the use case, the situation, the particular user, the surrounding content. I mean, if you think about it, some gifts that might seem fine when you’re seated at your desk, stationary could be a lot more, you know, uncomfortable to read, to view if you’re in the back seat of a moving car. Otherwise. There are also times where a gift has really limited motion. It’s pretty subtle, pretty chill, and that might not disturb someone as much as something that is comparatively turbulent or a little Barfy to watch. And so the only way to account for this, the only way to give the end user fine grain control that they can change their mind about given a certain situation, is really to ditch the image and use video instead, because video offers the user playback controls. Thankfully, browser support is even better in this regard. So there are a bunch of different formats. Other speakers have touched on these. For this talk, I’m going to focus on mp four with h2 64 codec, and WebM with you could use either VP eight or VP nine. I use VP nine for these examples. Both have been supported for even longer than the image formats I talked about, and the quality is identical and the file size is depending on the format. The image format you’re comparing it to is similar or better. So there’s really no drawback in terms of those earlier features I talked about the higher quality, smaller file size, and the situation for generating these is similar. You can use any number of local tools to create these on the fly or as part of a build process, or you can again use a service like those of our esteemed sponsors. Did I mention that we did some awesome work with cloudinary, and you should definitely check it out. I’ll watch the analytics. I’ll know if you didn’t, but once you generate those sorts of assets, either on the fly, when you’re creating the clip or using a transformation service, we then have to swap our image element out for a video element. And a lot of this video element is going to feel really similar to an image element. You got your source, you got your width and height, but boy, that’s a lot of attributes at the start. What’s up with that? So I’m gonna walk through these, because these are the secret sauce that makes it behave like a traditional animated GIF.

This part maybe doesn’t this is the new part where we’re opting into controls. This will allow the viewer to play or pause or do other things with the GIF without having to dive into a context menu. We are auto playing. So that’s like a GIF works. Is the GIF auto plays? Not all gifs loop, but if you do, you’re going to need this loop attribute, and these last two go hand in hand. We need to let the browser know this clip is muted, because that’s what will give it permission to auto play in line with the surrounding content, and not, for example, on a mobile browser, go full screen on playback, which would be a problem. It would no longer feel like a GIF. And if you want to support more formats, kind of like we did for picture, you could ditch the source attribute and instead provide multiple sources. So that’s an option as well. Once you have that in the page, what you’ll find is that with all these attributes present, you have an asset that looks and behaves like an animated GIF, except it’s smaller, file size, higher quality, and the user can toggle its playback whenever they want. So that’s it, right? We’ve got five modern features that we add to the five baseline features. You know, make sure you get your questions in for Q, a, and actually, you know what, I think we have a problem here. Because I don’t know if you noticed, but when I was showing that image with the alternative text, I don’t see that alternative text anywhere in there. And also, there’s that autoplay attribute. Didn’t we like do a bunch of work to make sure that our gifs wouldn’t autoplay if the end user didn’t like reduced motion? I mean, it’s cool that they can pause it on demand, but what do we expect those users to pause every single one of these elements? Now,

I think despite the best of intentions, we may have taken two one step forward and two steps back. That is super embarrassing, but you know what? I think it’s going to be all right. I think that we can fix it using a little bit of progressive enhancement and a little bit of HTML and maybe some other fancy tricks along the way. So let’s start by restoring that alternative text, and thankfully, we can do that with plain HTML in a few different ways. So let’s return to that video markup I showed before. It doesn’t have alternative text. Unfortunately, we can’t really use captions or other video elements because those will only describe the content on demand, and they’re meant to be synced up with timing and everything. We really need to describe this in a way that’s consistent with with image alt attributes. And so one option we can use is we can wrap this in a figure with a fig caption. If you don’t want to show the caption, you could hide it visually. So this will associate in assistive devices, the caption with the video element, regardless of what the attributes on the video element are. So that’s a great solution. If you want a little bit less markup, or you need to combine the video element with an alt attribute and a caption. For some reason, you could also use an ARIA label, but it’s really important if you do that, to keep the controls attribute around, because assistive devices don’t always associate labels with what they consider to be non interactive elements and controls, is what tells the the the technology. Hey, this is an interactive element. There’s a problem with this approach, though, which is that translation tools often ignore ARIA attributes. So if you are using a technology that relies on alternative text, and you are also translating the page into a different language, this would not work, but you can swap it out for ARIA labeled by and put that content in a separate hidden element. So that’s always an option for you. Yeah.

Regardless of which of these that you choose, you can restore that text alternative while retaining the playback control. And that really leaves us with one last bit of regressions that we need to address, which is that preferred reduced motion idea. So you may think to yourself, well, Tyler, when we were going through the picture element, we had the source elements inside, and the source element could have a media attribute that says, only show this asset when there’s no reduced motion preference. So if the video element also supports source attributes, let’s just pop those media attributes over there, right? Done. We get the same feature. Unfortunately, I wish that was true now, as of this year, the source media attribute is supported in video, but it doesn’t function the same way. If we were to do this, we’re not going to see like a poster or some fallback content displayed. We’re just going to see it look like it’s perpetually loading, which is not ideal, especially because unlike picture, this does not refresh dynamically. So even in the unlikely event that someone was savvy enough to think, oh, I have to toggle reduced motion off, it’s not going to do anything unless they fully refresh the page. So we’re stuck, right? We either have to respect the user’s motion preferences give them control, but never both. It has to be one or the other, right? But never fear, progressive enhancement is here to save the day, and I’m going to show an example using web components. You could accomplish this with a variety of JavaScript technologies, but this is the leanest way I found, and I think it’s a really great way to just get the basic concept done with native web technologies that are framework agnostic. So let’s go ahead and take a look at that video markup from earlier, right? Here it is. And really, we’ve got our alt attribute accounted for. We’ve got the smaller, more performant, higher quality, you know, assets, we’ve got the attributes there, but the only problematic part for for reduced motion is that autoplay attribute. So to start with, let’s, let’s remove that from our markup. Okay, let’s say that, by default, our user will have to opt into playing this. That’s the that’s the safest choice for the end user. And now we’re going to enhance that by wrapping it in a custom element. I’m going to call it GIF like but you can call it whatever you want, as long as it has a hyphen in it. And in order for the browser to know what to do with our GIF like element, we’re going to need some JavaScript. And I know folks on in this in this event, are probably not you know, you’re all familiar with JavaScript, but if you’re like me, it does fill you with a certain sense of dread. It’s like, Oh no, what dependency Am I adopting? Oh no, am I going to have to go argue for a new framework from, from with, with the rest of the engineering team, but I’m here to, you know, console you a little bit, because the code we’re going to walk through is 25 lines long, 514 bytes. 304 bytes, if you’re doing the right thing and compressing it on the server. This is not much JavaScript to enhance this experience, right? In fact, it’s so little. I’m going to go ahead and show it all in one slide here, but save your fingers some typing, because I will be sharing it on social media. So just go follow me, and you can just copy the whole thing. So don’t worry about furiously note taking right now. So the way this works is we’re going to create a new HTML element we’re calling GIF like this is how you start your fancy web component. We’re going to create a match media object for that motion query, the same one we were using in our HTML before this will allow us to listen to the value of that and know if it changes.

We have a connected callback method. This is going to be called on every instance of our GIF like elements. So that’s where we’re going to want to store a reference to the video that’s inside of it. Then we’re going to want to toggle whether it’s playing automatically or not. We’re going to want to do that when that motion query changes, and we’re also going to want to do that initially, the first time this connects. And both of those things are going to call a toggle method with the value of the media query, whether it matches or not. If it does, it’s going to go ahead and let it autoplay, and if it doesn’t, it’s going to stop it. And finally, we’re going to let the browser know, hey, please associate this custom element with this class, and that’s it. Once you have that, we have an asset that, by default, will not autoplay. If the user has reduced motion, it will not autoplay. But if reduce motion is off or even turned off while they’re already on the page, it’s going to go ahead and start playing. And yet, if the user doesn’t want to see that content at that particular moment for whatever reason, they can go ahead and toggle its playback on or off.

So we’ve done it. We’re back to an animated, silent, looping, inline, auto playing asset that has a text alternative that is a higher quality, smaller file size, respects the user’s motion preferences and has fine grained playback control. Let’s take a moment and just give ourselves a pat on the back. We, we, we really we were. We went down a couple of rabbit holes there, but we came out with the best possible GIF alternative, and maybe not the best possible because the thing I love about progressive enhancement is that this is just the beginning. I mean, we’ve only got 25 lines there. There’s plenty of space for you to make it your own. If you don’t like the browser Chrome for these videos, you could hide it with JavaScript only when you know that you can show a more stylized or simplified toggle, or if you wanted to outdo what we can natively handle in terms of lazy loading video, you could use a little bit of JavaScript in an intersection observer to make sure this only starts playing when It’s in view, or to even enforce the visibility of a poster element so that you can get that static image version if you want the markups a little bit verbose, admittedly, but there’s plenty of ways that you can simplify it, either using SSR with 11 D or enhance or using a CMS block or a template helper of some sort to make this as simple for your whole team or organization to use as any other element. I mean, the sky is really the limit when you starting from a really streamlined base like we are, with all the techniques we just implemented. They’re all native HTML and web standard features. So let’s review what we’ve learned here today. Okay, we know that the term GIF is more than a file format in the eyes of most users, so we can decouple our understanding of how to implement this from a specific image format. A GIF is a shorthand. Now we know that if you’re gonna change one thing, you gotta improve your alternative text, that pie graph is ridiculous. In 2024 we can all do a little better there. We know that there are plenty of alternative formats that are widely supported and offer much better looking assets at a fraction of the file size. And if you want your audience to have the best, most fine tuned control. The video element is really where it’s at. And if you’re not sure how to progressively enhance things like this, I would really advise you take a look at web components. They’re not really a framework. They’re more just a collection of standards that lets you do fancy little enhancements to things with JavaScript. And if I step back and think about this more broadly, I think what’s even more exciting to me is that we’re talking about gifts. This is, as I said before, almost 30 years old. I mean, talk about a technology that we take for granted that’s it’s this nostalgic anachronism. And if this thing that we’ve taken for granted for 20 plus years has this many hidden opportunities for improvement. Just imagine how many other quote, unquote, solved problems are sitting in the dustiest corners of our medium. They’re just long overdue for some re exploration. I hope if you find more good stuff like that out there. You’ll share it with me and with everyone else.

Thanks everyone for for listening. My team is cloud four. We’re available to hire. You can follow me wherever, and thank you pixel Palooza for listening to me rant about GIFs.

Brian Rinaldi 28:39 Tyler, that was great. I love that. And you had obviously so many fun gifs made the presentation a lot more fun. So I’m curious, like, how one of the things that’s easy for gifts is it tends to be, like, the shareability, right? Like, that’s where, I think, yes, where some of the trouble we have with, like, getting people to transition to is I like, oh, you know, I just go find a GIF, and I just, oh, I’m gonna use that, download it or or put the source in. Like, is, is that something that you feel like is, is made more difficult with, with using video or these alternative formats that I can’t as easily, just kind of share that

Tyler Sticka 29:26 Sure, and this is that’s a very good question, and so I would say I have a couple answers, answers for it. Or one is that I think it’s really important that you prioritize your experiences for certain audiences over others. So I’m a big fan of like the HTML priority of constituencies, which is something like authors over implementers over maintainers, or something to that effect, essentially, like the end user is the most important, and then the people who are the content creators are the second most important, etc. And so in this case.

I think the burden is really on the developers and the designers to accept gifs as a format, and if your audience would benefit from, as you said, the shareability of the GIF, using that baseline for enhancement to consider maybe building in like a download button or like a GIF format button or something, but I think for the vast majority I I get the sense in my timeline that most people who are sharing GIFs are grabbing them off resources like Giphy, and they’re already using WebP and other formats. They just have an on demand button for grabbing those things, or they’re in iMessage where, you know, Apple is probably converting those h2 64 would be under the hood anyway. So I think that that you’re right, there are ways to support that shareability. I totally I have a folder of gifts, right, so I get that use case. But I think it’s also important that we make sure. I’ve seen some people fall into the trap of throwing the baby out with the bath water and going like, well, I like gifts, so I’m going to make all of my users, you know, regardless of what country they’re in or what data plan they’re on right now, download, you know, 10 times larger assets all the time. It’s like, that’s that’s silly. There you can have your cake and eat it too. If you like gifts, keep using them. Look into those CDNs for all for an on demand transformation service, so you don’t even really have to think about them. I think it’s really important that you just start from the user experience first and build out from there. But you’re right. I called the talk gifts are forever because I’m really talking about replacing them in our experiences. I really don’t think they’ll ever fully go away. So, yeah, right, that makes sense, you know? And so I know some some tools, like you mentioned, they do automatically, like, swap them over. Like, can I provide, say, cloudinary or or Imagex, a GIF, and have it served up as video, or is that like something I’d have to do? Maybe

I haven’t tried that in imagik specifically, but I know that cloudinary has tools both directions, so which is really helpful for I swear I’m not. They were a client, but I’m not being paid right now. I just think it’s a really cool feature, which is, I’m not being paid by them right now, but it’s, it’s a it’s cool because that allows you to tackle this problem from either, either direction. So if you need to transcode the asset that the user is giving you, you can do that. But they also have tools that let you take a video that’s been uploaded, and if you want to offer like that download Gif option I mentioned before in your interface, it’s possible to do that too. And thankfully it’s it’s such as I mentioned, like all the social networks, most media is already transcoding GIF to video. So this is thankfully a really common use case. It just tends to be something that I see ignored the smaller the organization is, it seems to really be something that is generally only addressed when you have, you know, like a social media platform that is having to display these things at this enormous scale. But there are things anyone can do if you have a personal website, even just addressing like the alternative text and adding in an image helper is enough to I mean, it’s extraordinary how much faster that stuff will load and how much snappier the pages will be.

Brian Rinaldi 33:34 Yeah, that makes a lot of sense. I was more thinking, because I’m imagining like the what’s, what’s the roadblock? Like, what? What commit, what gets people like it. You know, to, we know it’s a lot lighter, like, so obviously there’s got to be something else. And I think, least for in my, my view, part of it is that, you know, it’s not just the shareability, like, Oh, can I click this and download it? It’s that we’re reusing the same moments, right? Like, it’s not some random clip of video, it’s, it’s a moment that we all know, like, Hey, I’ve seen that in a bunch of other places, and we’re reusing that same moment, right? Which is part of that shareability. Like I posted on my side, somebody pulls it and says, Oh, I’m going to use that same GIF, and it gets reused, and that’s kind of where it gains that, that kind of Yeah, common field. And I think a big

Tyler Sticka 34:28 yes and a big the biggest barrier that I have heard when I talk about this is has to do with broader support. So because GIF has been around so long, it has had, is been supported everywhere for a very long time. You don’t have to think about Codex, or you don’t have to install a command line tool. You don’t have to know what sharp is. You don’t have to know CDN. They just sort of work. Part of that is a stigma that is a little outdated. I see. Sometimes there will be a thread popping up where everyone hates on WebP images, and when I poke at that a little bit, people are like because they don’t work, but they’ve worked in Linux, Windows and Mac for years, and there was a time where they didn’t the majority of that format’s lifespan. They weren’t supported in the operating system natively. So I get the stigma comes from somewhere. I totally get it, but it’s a little outdated. And I do think that we, we hold these things to a slightly it is one of the reasons I think that the format will always be around, in some ways, because it is anachronistic. The idea that this, there’s animation in this image, I mean, it’s kind of a weird idea, isn’t it? It’s a little how I feel about, you know, there being iconographic images. Sometimes are fonts. Like, there’s sort of this idea where there were reasons why that was a cool idea. Some of those reasons are still valid. Some of them aren’t. But now we have all of this, like, these interesting use cases that that sort of have to come along for the ride. So that’s why, like, obviously, I don’t think the GIF will ever go away entirely, but I think that the more that tools continue to improve, that people the more that we get to a place where someone gets a WebP file and doesn’t groan because they know it’ll work with whatever they’re doing, and every organization could do a better job of accepting a more diverse range of file formats. You know, that’s part of the problem. Is that I think some some big tools, I won’t shame companies, but some really big, popular tools, to this day, by companies that have participated in certain image format or video format standards. Will not accept those standards in their enterprise, Office applications and things like that, in certain scenarios. So, but it’s kind of a chicken or the egg scenario, or because, are they not implementing those because there isn’t demand? Or are is there not demand? Because no one’s implementing those features. So that’s why my North Star is always start with the user experience and move out from there. So we know that the user would benefit from higher quality, smaller assets. So let’s make sure the experience we’re working on supports them, and if we need to do a little bit of transforming or format changes along the way. We’ll figure it out, because that’s what the end user needs and deserves. And bonus, it’ll help our server costs and our performance and our Google rankings and all that stuff, because it’ll, it’ll perform much better. Yeah, yeah. That said. That’s awesome. I like that perspective, and I think what we need is, is really one of those classic geo city sites done all with this alternative game, you know, and now you give them the ideas, Brian.

Brian Rinaldi 37:52 There you go. Yeah. All right. Well, this was, this was great, Tyler. I really appreciate you coming out. And I learned a lot. I mean, I definitely, you know, it’s one of those things. I feel like I know that I need to move away from using anime GIFs. I just haven’t. And this gives me, like, a really good impetus to do so, and yeah, and move away from it at your comfort level.

Tyler Sticka 38:16 So if someone comes away from this talk and just gets a little better about their alternative text, I’ll be thrilled you.

Tags

More Awesome Sessions