Readit News logoReadit News
happybits commented on How Hackerman would create an image just by typing 0 and 1 – deep dive into GIF   medium.com/@happybits/how... · Posted by u/happybits
follower · 2 years ago
One great resource for GIF-related explorations is Matthew Flickinger's "What's In A GIF" project:

* https://www.matthewflickinger.com/lab/whatsinagif/index.html

The original version is apparently from ~2005 and is used as the basis of the giflib docs referenced by the original article[0]. (The giflib docs do expand on the content of the original, so are still worth reading.)

But Matthew Flickinger's original version has continued to be updated as recently as 2022[1] and now includes two helpful browser-based GIF tools:

* GIF Explorer: https://www.matthewflickinger.com/lab/whatsinagif/gif_explor...

* GIF Encoder: https://www.matthewflickinger.com/lab/whatsinagif/gif_encode...

GIF Explorer displays the "interpreted" bytes of any GIF file in an almost "literate" style and has an UI/UX which I'd be really interested to see used in a generic reverse-engineering/binary viewer tool.

GIF Encoder enables you to create an image in the browser & see how it is GIF encoded.

I have a rant about how modern GIF usage could be so much better than it is (and still be within the original specification) but instead of subjecting you to that I'll subject you to this project of mine instead: https://audiogif.rancidbacon.com

[0] https://giflib.sourceforge.net/whatsinagif/index.html

[1] https://github.com/MrFlick/whats-in-a-gif

happybits · 2 years ago
Thanks follower

I've read his posts about GIF and referred to it at the end of my article. But I didn't know about "GIF Encoder" and "GIF Explorer" - interesting!

happybits commented on How Hackerman would create an image just by typing 0 and 1 – deep dive into GIF   medium.com/@happybits/how... · Posted by u/happybits
Brentward · 2 years ago
Yeah the article says these "aren't used anymore," but my image viewer (sxiv) complained that the gif was corrupted until I put something there. It still displayed the image, but it also complained afterwards.
happybits · 2 years ago
Aha, thanx for the info, I didn't know. So the canvas width and height should be the same as the width and height?
happybits commented on How Hackerman would create an image just by typing 0 and 1 – deep dive into GIF   medium.com/@happybits/how... · Posted by u/happybits
JohnFen · 2 years ago
I absolutely love that you do this. There appears to be a trend to discount the value of knowing the low-level details of these sorts of things -- but even if you never actually work at that level, knowing what's happening "behind the scenes" increases and deepens understanding and can make high-level things that seem arbitrary or nonsensical make sense.
happybits · 2 years ago
Thanks a lot JohnFen.

One reason for writing the post and trying to create GIF-images from binary, was to come as close as possible to GIF format and especially the LZW-algorithm. To understand it in an intuitive way. To get a bit closer to the minds who created the algorithm in the first place.

happybits commented on How Hackerman would create an image just by typing 0 and 1 – deep dive into GIF   medium.com/@happybits/how... · Posted by u/happybits
atoav · 2 years ago
I teach a foundational media technology course at on of the bigger european art universities — I do the same thing with the students using a broadcast wave file.

The goal of the thing isn't to turn them into hackers, it is to give them a feeling what the stuff they work with is made of, what a file is. This is also a great introduction to talk about compression, metadata, encoding, decoding, sample rate, bitdepth and so on.

If you dive that deep into it, the settings in a typical media conversion program will suddenly become much less intimidating. My motto always was: this was made by humans so it should be possible for humans to understand it as well. And this is maybe the "hidden" lesson: If you bring enough patience you can go into the depth of nearly every topic.

happybits · 2 years ago
atoav: this sounds like at great exercise. Have you written any public article about that?

The main reason for writing this article was * My curiosity - what secret is behind all strange bytes in a graphical file * To spend some time doing something weird, that I know have zero effect of my career and no chance of giving and benefits or profit in the future.

happybits commented on How Hackerman would create an image just by typing 0 and 1 – deep dive into GIF   medium.com/@happybits/how... · Posted by u/happybits
jsf01 · 2 years ago
This pops up again later when he says 81 is 10000001. Or that width 8 corresponds to 04. I don’t know enough about the gif format to know if I just misunderstood these parts or if they were written incorrectly, but it was a bit confusing.
happybits · 2 years ago
81 in hex is 10000001 in binary, so I think this part is correct
happybits commented on How Hackerman would create an image just by typing 0 and 1 – deep dive into GIF   medium.com/@happybits/how... · Posted by u/happybits
mikecx · 2 years ago
Love learning about image/video formats and I enjoy how you broke it all down. Just a heads up, pretty sure you've got a typo:

"Next is the Global Packed Field, which in this case is 70 which in binary form is 00000000."

70 in binary would be 100110. (64 + 0 + 0 + 4 + 2 + 0)

happybits · 2 years ago
Thanks mikecx, it was a typo, I've changed the text to "Next is the Global Packed Field, which in this case is 00..."
happybits commented on How Hackerman would create an image just by typing 0 and 1 – deep dive into GIF   medium.com/@happybits/how... · Posted by u/happybits
happybits · 2 years ago
CUSTOMER

Hackerman, I need an impressive icon for my website. It should be 5x5 pixels big and look like a rabbit. Can you please draw it for me?

HACKERMAN

Draw!? Bah! I don’t need any graphic program for that. I am Hackerman. I will code it for you. You will get the image next week.

CUSTOMER

Next week?? But…

HACKERMAN

No buts! I just need to read about how the GIF file format works, then I can create the image in no time.

[TIME PASSES]

After spending some evenings, Hackerman gets the main idea of how the GIF file format works and the compression algorithm called LZW. With that knowledge, he succeeded in creating the image within an hour.

Hackerman calculated that the binary of the image should be as follows:

47 49 46 38 39 61 00 00 00 00 70 00 00 2c 00 00 00 00 05 00 05 00 81 11 11 11 FF FF FF D5 D7 D9 00 00 00 07 0F 80 01 00 83 01 82 84 85 88 82 8A 85 02 85 81 00 3b

So he just opened his code editor, saved the file as rabbit.gif, and sent it to his customer. Boom! Easy-peasy!

Do you want understand the GIF-file format and be as cool as Hackerman?

u/happybits

KarmaCake day52May 19, 2022View Original