Animated GIFs and Space vs Time - Computerphile
ฝัง
- เผยแพร่เมื่อ 1 เม.ย. 2014
- Whether its the Darwin Award nominees or simply another crazy cat, animated GIFs have a lot to answer for. They're also a perfect example of one of Computer Science's fundamental principles - Tom Scott explains.
More from Tom Scott: / enyay and / tomscott
How NOT to Store Passwords: • How NOT to Store Passw...
LZ Text Compression: • Elegant Compression in...
/ computerphile
/ computer_phile
This video was filmed and edited by Sean Riley.
Computerphile is a sister project to Brady Haran's Numberphile. See the full list of Brady's video projects at: bit.ly/bradychannels
"it was the tumblr of its day... it was awesome and then yahoo took it over and it was no longer awesome" wow... history repeats itself...
They work everywhere, on every OS.
Except for the IOS photo viewer.
This explains why when a video messes up, you get their face moving across the screen in the silhouette of a hand and it continues to get messed up until a new key-frame is shown.
yeah, I actually figured out the concept of inter-frame compression before studying it because of that kind of video glitch :)
Pretty much. I don't know for certain, but my guess is errors like that happen when one or more of the keyframes get lost somehow.
I'm too young to remember GeoCities, so I just imagined a world where every single Tumbr user has to code his page by himself. Bloody hell.
you should do a video on webm
The idea that it should be pronounced "giff" because the G stands for graphics is silly. There's no such rule for acronyms. But pronouncing it "jiff" is still silly for one very important reason:
When you hear "giff", and you know that old file extensions contained 3 letters, you know the word is spelled "GIF." When you hear "jiff," you could spell it "GIF," but you'd be more likely to spell it "JIF." In English, nearly all one syllable words that start with G have the so-called "hard G" sound.
This wouldn't be a big problem, except that the "JIF" extension exists. It stands for JPEG interchange format. (The J in images tends to mean that something is connected with JPEG.) So saying "giff" is less ambiguous.
Oh, I was making Let's Plays once and I played Sonic Adventure and Final Fantasy VII. I noticed that the video files for Final Fantasy were much smaller than the ones for Sonic and now I finally know why:
Sonic was pretty fast with the camera moving all the time, whereas Final Fantasy was only moving models on a fixed background. So when I recorded Sonic, the difference between each frame was much bigger and thus more data had to be stored.
I have the impression that Tom Scott's content is easier to edit than most of your contributors'. He seems to have his thoughts collected beforehand and can then just output in a nicely dense, yet easy to understand manner.
Right?
I think He is just more aware of the media than the others contributors.
Paco Marín yeah he has a bunch of videos on his channel called "Things You Might Not Know" which are basically condensed pieces of information that are recorded in one take, so yeah he's used to that :)
The Italian position on the /gif/ - /ʤif/ debate:
In the Italian language, the sound of the letter G depends on what follows it.
So we have:
-A soft sound for GIA, GE, GI, GIO and GIU;
-A hard sound for GA, GHE, GHI, GO and GU;
-A ɲ sound (spanish ñ) for GN+;
-A ʎ sound for GLI and GLI+.
Yes, exactly, a soft sound for GI.
And that's why most of Italians have always pronounced it /ʤif/ before the announce that it's actually /ʤif/ instead of /gif/: written as that, is just soft in our mind.
And this, is something you might not know.
And that, is something you might not've known.
It's actually really sad that there isn't a widely used more video-like alternative for GIF. There are APNG and WebP, but nearly no browser supports them :(
I just realised that the animation at the end of the video turns the Computerphile tag into an ending tag to match with the same tag at the start, showing that it's now the end of the video, and I love that! 😁
5:55 ... i hear you, man
Your picture D:
And comparing it to MySpace doesn't work either because that's gone away (pretty much) now, too!
I remember when all this were trees and fields, and people used Trumpet Winsock, Netscape Navigator and a cheap dialup to Demon Internet after 6pm on a Friday. It was a simpler time where the Internet was _really boring_ ;-)
James Grimwood Hm... when did Piczo go down?
Random fact:
Lookup tables are commonly used for demo scenes on older machines because calculating sines takes up way too much of the cpu cycles.
I wish that animated alpha channel PNG were considered canonical. They fix so many of the problems with animated GIFs it's absurd, but as of a few years ago, Firefox was the only major browser to support it.
You can have a larger colour palate than 256 colour GIFs, and with the alpha channel, you can define a seamless transparency instead of the nightmare you frequently see when a transparent animated GIF created for a light background finds its way onto a dark background, or vice versa.
That standard never did get approved, but, I think all major browsers support it at this point, because, for the most part, it makes good sense.
I used to output Animated GIFs from Anim8or in my homemade game days. You end up using a very simple color pallet just to keep the size reasonable.
Opera had APNG support 5 *days* before FF ;D en.wikipedia.org/wiki/APNG#Application_support
I agree that it should have replaced GIF a long time ago, though. It would at least have more support if it weren't for the egotistical libpng maintainers and their overly complicated MNG format...
DFX2KX Unfortunately, IE, Chrome, Safari, Opera (Blink versions), iOS, Android, and Photoshop don't support it. While there are plugins and other extensions to support it in some of these browsers and in Photoshop, it won't become meaningful until it can be reasonably expected that most web browsers can support it natively. No responsible web developer is going to presume his audience uses such an extension.
Ten people on the PNG working group effectively stood in the way of providing an alternative to the crustly, poorly-aged animated GIF format.
The point at the end is what I love the most about this video. Creating animated gifs has in itself become an artform, and the restrictions it has as an artistic medium has become a vehicle to so much creativity all over tumblr.
GIFs were designed not in the mid-90s, but in 1987 (with a minor revision in 1989). The spec hasn't changed since then. Initially, most GIFs just stored single images. The spec always supported animated files, but they were rare in the format's early days. Now, they're the only kind anyone uses.
Gif and Jif are both correct. Shame on you, Mr. "Descriptivist".
R.I.P
YAHOO! GEOCITIES
1994 - 2009
"IT WAS WONDERFUL,
AND IT WAS BOUGHT BY YAHOO,
AND IT WAS NOT WONDERFUL ANYMORE"
Animated gifs is also an example of an inferior standard hanging on even though there have been superior alternatives, like MNG and APNG, available for a long time.
RECORD IN 60FPS. I want to observe Tom Scott's movements in much detail.
Yay, I love Tom! He always talks about such interesting topics, and with such a passion! :)
And then Yahoo bought tumblr, and it was not wonderful anymore
Computerphile man remembers geocities. And perhaps the browser-wars. I remember the GIF89 licensing controversy that had many convinced to change to the *free* PNG format which was made suitable for animation then
"GIF" sounds a lot better than "JIFF" in my opinion.
I had a geocities site... Waybackmachine didn't save it, I guess it was too insignificant.
Aah, animated gifs... I remember some really cheesy ones from way back when modems still made funny noises...
Awesome presentation, delightful interaction between the cameraperson and the presenter!
You said Geocities and got me on a nostalgia trip... now I'm compelled to go listen to hamster dance for the first time in years.
Debating "Gif" vs "Jif" is pointless... we must pronounce it "gjyfe"
Andy Merrett Ooo I like that one :P
GIF's were misused for so long, so why did we never get proper support for either animated PNG's or a dedicated GIF replacement file type for photograph/video images?
When Tom Scott explains the difference between "inter" and "intra" by talking about intergalactic space instead of intermural sports, because there's a better chance seeing him in intergalactic space than doing sport.
To simplify it, a .gif is essentially a sequential order in which images are displayed. For example, when you drew a basketball on a stack of sticky notes, did that a few more times, and rapidly flipped through the notes, making the image appear to move.
Intra-frame Codecs are still used today, but primarily in higher end, higher quality codecs such as ProRes and Cineform. These are also known as Digital Intermediate codecs. This is to differentiate it between the Capture/acquisition codec (such as h.264 in DSLR's) and the delivery Codec - which might also be mpeg4 for the web or J2k for Projection.
The codec is used in the middle part of the process to edit with. A reason why these codecs are Intra-frame and not Inter frame is because the editor will need to jump around the video clip and cut in any place, and generally have it perform faster on playback. If you used an Inter-frame codec, the computer would have to consider several frames in order to render that one random frame and thus playback or quickly running forwards and backwards through the footage can be very intensive on the computer. Having each frame independent not only helps to maintain quality during the transcode but also to speed up the performance of the video.
Some cameras record straight to Intra-frame codecs, but they have far larger file sizes but also much better quality. Some cameras even record video as a series of separate image files, such as the Cinema DNG format. These can be either Uncompressed, compressed losslessly or lossy.
Re-compressing Intra-frame codecs over and over again will not be as destructive as re-compressing Inter-frame codecs over and over again.
I never thought of that, but, yeah. Vines are an attempt to bring animated GIFs into the 21st century. They give you the most important part--the loop. They add sound and decent video quality. Vine was trying to capture the audience that makes animated GIFs.
Simply giving better compression wasn't enough, as we saw with APNG and MNG (the PNG version of animated GIFs). So features had to be added.
I choose the middle ground: I say it is HIF.
(Check your keyboard to see why.)
"The official way that is blatantly wrong."
Nope that about covers it.
The creator of the standard, who claimed its jif, doesnt write the english language.
Great video! I do generally enjoy the ones by Tom Scott. Keep up the good work!
This one especially because understanding space/time tradeoffs really is important for programmers and computer scientists. Although I will mention one "gotcha" as far as going too much in the "space" direction, for anyone who wants some more detail...
Basically the problem happens when your data structure (look-up-table, or whatever it happens to be) becomes SO big... (How big is it??) It's SO big that it won't fit into main memory anymore. ("main memory" is the type of memory that's referred to when someone talks about "your computer's memory")
So in that case, some of it needs to be stored on the disk, and then you just load part of the look-up-table (or whatever it happens to be) into your memory at a time - whichever part of it you happen to need at that moment.
The problem with this is that disk is slow. It's MUCH slower than memory. I mean, we're talking a bicycle vs. a Ferrari slower... So once you start having to go to disk to do your lookup, it may actually take more time to look something up than to compute it. (Although still maybe not, depending on how complex a calculation we're talking about... but we've shifted from _most_ things are faster to look up to _most_ things are faster to computer.)
However, that said, there are some tricks you can use to avoid (or amortize) the expensive cost of going to disk. I won't go into them just now because that would require a lot more depth, and this is already a long comment... Perhaps another time. :)
On a related note: Has Brady done a video on memory hierarchy? That would be a good one.
It's kinda cool how this virtual environment created by humans actually has it's own principles. It's can almost be related to conservation of energy: when you convert "computational energy" between states (time or space), the net "energy" has to be preserved.
GIF also used variable framerate (like how long each frame should last)
Geocities is back as neocities and it is brilliant
I'm in a really slow internet connection right now and your hand waving actually crashed my video loading. Guess you made the point there.
if my teacher had just 1/10 of your ability to explain , now i would be so much better in computer science.
GeoCities ... good god man, thats one way to get my memories rolling.
Am I the only one who is made slightly breathless by the way Tom Scott talks?
That was presented beautifully, nice editing!
"the official way that's blatantly wrong" I love you for this.
Tom Scott's videos are really great!
I really enjoy ow Tom explains things. He is a very good teacher.
GIF is short for "Graphics Interchange Format". Graphics has a hard G, therefore the acronym should use the same. End of discussion.
If you say GIF with a soft G, people will assume you talk about the JIF format: "JPEG Interchange Format", which is part of the JPEG standard.
GIF is bitmap based.
EDIT: Of course, if someone wants to make an "Giraffe Image Format" or something similar ( Giraffics Interchange Format... ), i will allow them to pronounce it with a soft G.
I do GIF animations, but I really never thought to use transparent GIF's within it to tighten it up, DOH! You learn something every day! :)
Was this filmed at the London Welsh Centre?
Tom Parry-Jones yes :) >Sean
***** Lovely building. Went there for Wales v Australia last autumn. What was the reason for filming there?
Actually yes. It's hard to keep up with all the questions we get. It was filmed at London Welsh because they're nice people who have a room! >Sean
Jif is a Peanut Butter! Gif is a ~>G
Great editing Sean.
Another fantastic video. Your chanel is about 6 months ahead of my computer science class in school.
Are the frame differences being compiled into actual frames each time between choosing to play an mp4 video and it actually starting to play, or is every next frame or set of frames being calculated on the fly during playback? What actually happens when I skip to a frame of my choice?
OMG IT'S PRONOUNCED GIF NOT GIF ....
When i first saw the video i thought i would have to put up with hearing him say "jiff" every time. Correct or not, that's not how i say it in my mind. When he said gif it was such a relief.
Yahoo! Geocities. I remember that thing. Don't remember ever going to it, but I remember it was a thing round about MSN Messenger days and MySpace and Bebo and Hi5
I make gifs a lot, so I have a lot of experience with the workings behind them, so I'll add to some of your points.
On colours: Gifs can either have a palette of up to 256 colours per frame, or a palette of up to 256 colours for the entire gif. The latter is a lot smaller, but also uglier when you go from environment to environment. You made some notes about how anything else can have up to 256^3 colours, but gifs can use those colours too, they can only use 256 of them at a time.
You implied that only "advanced" gif making software can use per-frame palettes, but that's not what I've seen. Unless ImageMagick and gifsicle count as advanced.
Hahah, geocities... when you said that word, my brain remembered the smell of the room I used to sit in when on the internet in school. :P
And yes, it's fucked up to think that some people here were born after that...!
room must have stank
Kuro Why is that? It didn't.
"...or 'jif' if you wanna pronounce it the official way that's blatantly wrong."
THANK YOU!
So much learning from these videos,
wow that bit about interframe compression is extremely interesting! So video that has a lot of differences is actually a bigger file than something standing still.
I wonder - does it also take into account frames that aren't right next to each other, for example if two scenes cut back to each other, does the compression algorithm know that?
It is technically possible, but it's rarely done. Video files are generally designed to be read sequentially. Once the player knows that a decompressed frame will never be used again, it is removed from memory to make more room for subsequent frames. The most I've ever seen in a file is allow backtracking by a couple frames.
If it weren't designed this way, you'd have to decode the entire video in memory before displaying, and that's really slow. It's another example of the time/space tradeoff.
Interestingly GIF89a can have a palette of 256 colours (made up of 0-255 values for each red, green and blue) per frame, set a frame delay of zero and use transparency between frames and you can composite an image of much higher than 256 colours.
I'm surprised you didn't mention BINK video.
It's another fantastic example of lousy compression done to save time, and anyone who's played a game with a blocky and compressed looking cutscene will know what I'm talking about.
Question: why does my Internet shit itself when I open GIFs, but videos buffer fine?
I have terrible speeds (2.9Mb/s down) but can buffer a 480p video with no stutter, yet a GIF of maybe 7MBs I get as an estimate about 1 frame/5 seconds until it has finished and then it plays as intended.
Why dis happenz?
Man this takes me back. 1996, first website I ever made was a fan page for a band and yes it had flaming skulls GIFs on it. :)
Very good editing!
Finally understood why when a part of a video file is corrupted, that part is messed up until something pass over it or the image change entirely...
I'm surprised that nobody else has picked you up on the "mid 90's" date. Support for animated GIFs were added in the GIF89a format, which came out in 1989.
Perhaps. But the internet, as an actual thing most of the general public were actually aware of, didn't really start until 1994.
(Yes, I know the tech behind it is much older than that. But the internet as we understand it today basically began in 1994.)
Oh my - you just reminded me - I had a siliconvalley/way suburb page back in the day. It's on the wayback machine - but it's pretty embarrassing. Anybody remember "under construction" banners, all the stuff that we thought we would find time to do...
"-it (GeoCities) was the Tumblr of its day... it was wonderful, and then it was bought by Yahoo, and it was not wonderful anymore"
Tumblr was bought by Yahoo too, history repeats >:
Anyone who uses the "The G stands for Graphics" argument has to change the way they pronounce JPEG, CD-ROM and LASER.
I really love the way this guy talks about stuff.
I really like this new guy you have for computerphile :D
I could listen to this guy All day
_"GIF is wonderful if what you want to compress are simple line drawings."_
Actually it isn't all that wonderful. It may be the most _popular_ format, but it isn't the best. PNG compresses 256-color images better than GIF, and webp compresses (losslessly) even better than PNG.
Please do a video on Esoteric Programming languages, such as INTERCAL or BrainF***?
Ah, that would be interesting... Both of those languages are pretty amusing. Mostly very confusing to read though. I tried to follow a basic 'hello world' program written in INTERCAL, and while it's possible to understand if you really, really concentrate, it's very, very difficult by comparison to a more typical language.
The ComeFrom command is perhaps the most amusing thing. It's like the reverse of GOTO. Goto is already something that's considered a bad idea to use, and not very readable, but ComeFrom takes it to a whole new level.
You can stick a ComeFrom statement on line 360,102 of your code, and tell it to ComeFrom line 23...
There's absolutely nothing written on line 23 that hints at this, yet when the program gets to line 23, execution suddenly jumps from line 23 to the ComeFrom statement on line 360,102.
Needless to say, a command like that is very confusing. From an isolated piece of code you can't tell if the program may just jump to something completely different. It's only visible at the place it ends up at, not where it came from...
Funnily enough though, as confusing as that sounds, it would actually be useful in certain specific cases.
For instance, you could write task-switching code for a multi-tasking system by using those commands, which means you can arbitrarily jump back to the task switcher without having to insert any code into the places you'd want to switch from. That's a highly specialised case though, and mostly it'd just be very confusing.
I never used Geocities but I knew it was around. I used MSN Groups instead, which I also filled with "super cool" gifs of Dragon Ball Z characters and flaming skulls. Interestingly, a decade before I even heard anyone pronounce 'gif' aloud, I pronounced it with a soft 'g', even though that makes less sense on paper.
I remember geocities and its bizarre URL naming convention :)
Another good example of the trade of between time and space is the original Wing Commander game. It had look up tables to avoid having to do all the sin, cos math on the fly. I'm not sure the tables were that big, but it saved lots of time using a look up table rather than asking a math coprocessor (which were not always there back then) to do it in real time.
This video was exported and is being watched on your display at 25fps. Right click and click "Stats for Nerds". Happy Interneting!
Great explanation! Thank you!
great video, super informative
You're using IE?! O_O
Nice video as always :-)
IE is good for three things, imo. 1. Editing XML code 2. Live feedback of a peripheral like a camera 3. Searching and downloading a better browser, of course :D
.gif images open in IE on Windows by default
GildedWildebeest Good catch! I never thought of that (I use Windows mostly for gaming) :-)
IE just to 'preview' the animated gif once made in photoshop... not for web browsing! >Sean
Intraframe compression is used a lot when transferring media. For ex CGI renders are stored frame by frame, otherwise the interframe compression just muddies everything up as soon as you need to change frame speed.. I did one full hd 7s logo renderings, total space needed were more than 10gb (fast cuts, compositions and all CGI were rendered at 100FPS..). Tried to do it raw first but filesizes were just ridiculous, had to use JPEG frame by frame..
Intra-frame Codecs are still used today, but primarily in higher end, higher quality codecs such as ProRes and Cineform. These are also known as Digital Intermediate codecs. This is to differentiate it between the Capture/acquisition codec (such as h.264 in DSLR's) and the delivery Codec - which might also be mpeg4 for the web or J2k for Projection.
The codec is used in the middle part of the process to edit with. A reason why these codecs are Intra-frame and not Inter frame is because the editor will need to jump around the video clip and cut in any place, and generally have it perform faster on playback. If you used an Inter-frame codec, the computer would have to consider several frames in order to render that one random frame and thus playback or quickly running forwards and backwards through the footage can be very intensive on the computer. Having each frame independent not only helps to maintain quality during the transcode but also to speed up the performance of the video.
Some cameras record straight to Intra-frame codecs, but they have far larger file sizes but also much better quality. Some cameras even record video as a series of separate image files, such as the Cinema DNG format. These can be either Uncompressed, compressed losslessly or lossy.
Re-compressing Intra-frame codecs over and over again will not be as destructive as re-compressing Inter-frame codecs over and over again.
Also, If you are downloading and watching a clip at the same time, you might want a intra-frame codec.
This trade-off between space and time is actually visible EVERYWHERE.
If you ever heard of cache or index, that's exactly what that is. Pre-compute some information (generate some HTML with dynamic programming languages, aggregate information for statistics, build search indexes, etc), and when it is needed, simple grab the pre-calculated information.
Want to see a live example of caching in practice ? If you're using chrome (on firefox you need to download the firebug plugin), right click on the page -> Inspect element. Go to the network tab and refresh. Anything you see with status 304 not modified on ANY website is being cached by your browser. So basically your browser saves those files (images, css, js, and other) on your HDD (1-10-100 KB of space), while avoiding a request to a server (reducing bandwith and computing power for the server), thus reducing the page load time by a few miliseconds.
The internet would crash without a few layers of caching (browser caching is just the first layer)
thats cool to find out what a gif is. i thought they were like tiny tv screens that reflected out movies that are hidden inside a webpage.
Tom thank you for sticking up for the right way to say gif.
Now, this is a nice explanation that everyone gets :) I like this guy
I love how some people put "end of discussion" on their comments arguing the pronunciation of .gif and yet the discussion continues XD.
He zooms in and I'm thinking "Damn. Tom has an amazing complexion."
#sojealous
6:12 the phrasing makes it sound like being bought by Yahoo! is a tradeoff you see everywhere in computer science and it still makes sense.
Thank you Brady
0:33 I was just waiting for you to say that XD
I almost all my life pronounced it with a hard "g", but since about half a year I pronounce it "jif".
I once made my own image format that supported full 32-bit colors (meaning transparency included) and animations. Because I was just playing around with it, I didn't care about compression, so it was essentially a list of 32-bit pixels. The only optimization it had was that alpha channels were stored first, so transparent pixels (0-alpha) were cut down from 4 bytes to 1. In the end...it was about as big as a GIF, only with full color. I was shocked, having expected it to be much larger.
Anyway, that's my story. Also, it's Gee-Eye-Eff, not jiff or giff.
Fantastic vid, thx a lot
Thank you for this video
Graphics Interchange File. I think it should have the hard "G" sound from graphics. A lot of my friends at school used Geocities and that was in the early 00s.
Have to love those animated gifts...