It’s about gifs! In answer to his question, I was born after 1987. I am younger than the gif image format – though it didn’t come to the web until 1995 (NetWeb Navigator). Dang, 30 years. A lot has changed – but gifs have not!

What’s it got going for it? - 256 colours per frame? – no biggie anymore - single-bit transparency – likewise - image sequences (animations) <- this is the one

The animated clips, inline, looping, silent, is what has made gifs stick around. It is what has made them such an improtant part of digital communication. They allow heightened/extended emotional beats than emojis, allow niche references and allow authors to kinda break the 4th wall and speak to the user like “do you feeling this too”? a lot of these animated inline clips might not even be gifs anymore!!

how might we implement animated, silent, looping, inline and autoplaying clips in modern HTML? we also need to add some modern features: - text alternative (write alt text like you’re describing it over the phone to a friend). just use the alt attribute, great. that’s it. (we didn’t have that in 1995 apparently) - high quality and smaller in file size! ie, use an image format that isn’t gif. web-first formats: webp and avif. they have really good compression ratios… there’s lots of local tools for this. for fallback, use a picture element enclosing multiple source elements. - motion preferences: “please don’t start automatically” and in fact we can do this using media attributes in the picture element. default to the static version, and progressively enhance to the animated version and have a source element with a media attribute inside to match ‘no-preference’ and change the source. noice! - playback control: sometimes you want to stop it manually! fine-grained control. ditch the picture element and using video elements with a controls attribute. formats include mp4 w/ h.264 and webM and makes even smaller files than those image formats from before. bad news, you will need to touch FFmpeg. the autoplay loop muted playsinline attributes make it behave like an ordinary gif.

wow, that was a short talk… wait hold on. our new video gif doesn’t have alt-text, and also it’s autoplaying. didn’t we try to make it respect motion preferences. oops.

we can give alt text back using plain html. one option is to put the video in a figure element and put a figcaption inside that, too. that’ll work (and you can hide it in css). you could use an aria-label but that might get skipped by either your screenreader or translation tools so you have to do it in a slightly more convoluted way.

how do we make it respect preferred motion? can’t we just put a media attribute inside the video element’s sources? sadly not, since media attributes in video elements get turned into perpetually loading. hmm. not great.

we can solve this problem using javascript and web components (framework-agnostic!). we just need to do the playback control. we remove the autoplay attribute so you have to opt-in to play. then you stick it in your new element and write some javascript (oh no).

he then waled through the code. i should probably steal it, idk, i don’t envision myself using gifs much. boom. that’s all the things.

we could keep going… we’ve just used native html web-standard features. you could do lots more!

gifs are very old… and have so much opportunity for improvement. what else does?

one big benefit of gifs, and indeed the whole reason they’ve become so socially important, is shareability. you can’t share a web component or video with markup and so on. we can use our web-components to make the download hand out a gif. also, most people using gifs are doing it through giphy or whatever with an interface and the format doesn’t matter.

big organisations (social media platforms) are already transcoding all their gifs to videos.

a big thing what makes gifs gifs is the fact that the same gif is used in many different contexts. that shared emotional moment. the nice thing about gifs is you don’t have to think about them very much. some large applications don’t even support webp/m yet (despite being involved in their creation – this is @microsoftword lol)

well, that was fun. a bit high-energy tech-talk-y, but tolerable.

learning: - yeah, seems obvious but yeah gifs aren’t a file format they’re a way of communicating. also gifs are hella outdated, use an alternative format. but gifs are soooo easy to make! - idk what web components but this made them look quite straightforward and nice, though idrk what id use them for

todo: - [ ] make all the images on my website very small file sizes (smaller and dithered!)