67 Bytes - The Smallest Possible PNG (And How It Works)

[@spicybaguette7706]

I would also higly recommend reading "Lossless Image Compression in O(n) Time", which is about how the author (who didn't have that much knowledge about compression at the time) created a really effective image format called QOI that in many cases rivals PNG performance

[@bl1ndguy0]

is there support for it to use in frontend development?

[@sinewaveaddict]

What's your use case?@@bl1ndguy0

[@okie9025]

@@bl1ndguy0 Definitely not, but you could probably write your own decoder and show the image in an HTML5 canvas if you really want to lol

[@xdanic3]

And thanks to QOI they've made PNG encoders/decoders almost as fast, QOI doesn't compress as effectively, was just significantly faster when it first appeared

[@ThylineTheGay]

​@@xdanic3qoi is neat for being incredibly simple

[@LaPingvino]

about the signature, this is very common for many, many fileformats especially on Linux and it's one of the main elements used by the file command to identify the file type. Linux doesn't decide file type by extension.

[@TheTim466]

"magic bytes"

[@jearsh]

yeah, this is how the `file` command works in unix. i forget the term, but it typically looks for "magic text", similar to magic (hardcoded) numbers. so for example, how bytes 2-4 in a png are "PNG". if it sees that, it knows it's a png.

[@Margen67]

Platypuses and penguins need HUGS

[@rellity2233]

i mean that looks kinda average ngl

[@LC12345]

Wtf is wrong with you?! 1x1 black pixel. Look at it!

[@ivymuncher]

yeah and im sure it has a really great personality

[@ethanogle698]

Quite large infact

[@Kane0123]

It’s not about the size of the png that matters. It’s the way you use it.

[@arcrad]

67 bytes is totally normal!

[@TheDIL98]

Yep, would be interested in that compression algs video, LZ77 especially

[@NateVolker]

7:30 “this is where 8-bit kind-of came from, originally” That “kind-of” is doing a lot of work there

[@dr_regularlove]

Came here to say this, referring to a video game console by "bits" is referencing its CPU architecture by the size of word used for its registers, which is only very indirectly related to the type of graphics processing it was capable of.

[@LtdJorge]

Yeah, he also said 8 bits for 8 colors… While 8 bits is 256 different values 😂

[@SebastianMares]

7:35 I remember back in the days, game developers used tricks like swapping the color palette during horizontal or vertical blanking intervals so that they could draw each line with its own set of colors rather than having one palette for the whole frame.

[@rbrickproductions123]

Something i quite appreciate about PNG is how simple it is to implement

[@irishbruse]

QOI is new and even simpler its pretty cool

[@niomeda]

That's cool. In one of my projects at my work I had to make the smallest TIF and PDF files. I ended up creating a 46 bytes TIF file and 135 bytes PDF file. These were the minimum possible versions that can properly open without any errors for their file type that I managed to find.

[@TheOmfg02]

Trailers used to be shown at the end of a movie. I know this because my parents are old and they said they would always be shown at the end of a movie. We’re used to seeing a separate movie trailer as its own distinct thing these days but its actually our current usage of movie trailer that is out of date with its corresponding english language usage. Most usages of the word trail imply an end e.g trailing comma.

[@overra]

didn't think about movie trailers, and totally forgot about trailers at the end. I wonder if they movie them to the front for marketing purposes or if it was by demand, as a little buffer before the show starts. or both. leaving trails in the woods. light trails trail

[@randomkid8084]

yep you should definetly do more of these

[@Melvin420x12]

Just here to say I'm enjoying it a lot! Would've never read it by myself but reading it with you and diving deeper into details is awesome

[@geoffreygordonashbrook1683]

Thank you for the detailed erratum interjection, very helpful and much much better than the common text-overlay-correction.

[@onoff5604]

And the package-bloat for how a png is handled depending on what you actually need to do...is amazing.

[@kevinmuma5018]

6:49 Anyone else remember websafe color pallets for GIFs

[@Jdbye]

8-bit has nothing to do with palettes. And 8-bit wouldn't be 1 out of 8, it would be 1 out of 256 (2^8)- 1 out of 8 is only 3 bits (2^3) 8-bit refers to how many data lines the CPU and memory have. Each data line can transmit 1 bit of data at a time, higher bit count means more data can be transferred simultaneously, in the same amount of time, without increasing the number of CPU clock cycles required, providing an overall improvement to performance. This becomes important if we want to do high color graphics or 3D since those require a lot more data to be processed in the same amount of time or it will lead to slowdowns.

[@NickDrinksWater]

This is beautiful. I've been looking at this for 10 minutes already

[@vrnehot]

color palettes are a really cool solution in some cases, for example, for the old game Guilty Gear XXR there is a mod for online play and there you can edit the palette of your character, despite the fact that the sprite itself does not change by customizing the palette you can stand out among thousands of players and they will remember you according to your palette if you played cool

[@iamnietzsche7334]

More of this please, I'm the only one at work who has to know about & cares about this stuff, it's nice to see someone else discuss it :D.

[@sammavrs]

That was incredibly fascinating. Really makes you think about how to optimize loads even more.

[@alexdefoc6919]

I personally like niche/specific stuff about how something works. Its always satisfying

[@AeroBytesNL]

Really love this kinda geeky stuff! Keep up the good work!

[@jusajuutilainen]

19:37 PNG oddities: all those IDAT chunks contain single deflate stream and can be combined as single chunk. I do not know why libPng and others choose to split chunk, other than maybe extra checksums offer some "safety".

[@CanRau]

What’s the browser extension used to save the “explanation of deflated” page at 15:36 ?

[@mattvick0010]

The saving of tabs in the sidebar is a feature of Arc Browser, which looks like what Theo is using

[@CanRau]

@@mattvick0010 was looking before commenting though couldn't find this "popup" thingy 😅

[@CanRau]

@@mattvick0010 How do you invoke this popup dialog thingy tho?

[@apollolux]

I remember nearly 20 years ago, I went back and forth with some peeps on the libpng+libmng teams over email (MNG being the animated equivalent of PNG and sharing some of the same devs) because there were some incompatibilities between official MNG tools and MNG support in the Sphere Game Engine, but those two libraries in particular would error whenever I would load an MNG animation in the engine and in the editor. I got real familiar with those formats at the time and helped them beta test updating at least Windows-compatible DLLs since Sphere was one of the very few name projects that actually used MNG back then (the GIF patent didn't expire yet, animated PNG "APNG" wasn't really a thing, and mass internet wasn't yet fast enough for movie file embedding beyond KZbin and other Flash-based solutions at the time). One of the only file formats more "fun" than PNG is an IFF-based format like any of the RIFF offshoots (.WAV, .RMI, .SF2, etc).

[@DeuxisWasTaken]

You absolutely can have a transparency channel that's one bit wide, on or off. For example OpenGL defines a color format GL_RGB5_A1, which allocates 5 bits for each color channel and 1 bit for alpha. It's not very common though.

[@Margen67]

birb

[@CorpoWolf]

This was an amazing video and I would love to see more about encoding / decoding av information. It’s something I’ve always wanted to figure out, but it also feels like it’s constant dead-ends.

[@ameisee4]

rhanks for the video. and yes, a video about how image compression works would be awesome

[@paulmesaric5059]

Thanks for the video, curiosity caught me, and then i learned a whole lot, great vid

[@ivanmaglica264]

8-bit comes from 256 color palette of the old VGA standard. Image of 320x200 (starting at memory address of 0xA000h) would have a framebuffer of 64000 bytes size, each pixel one byte. And yes, each of 256 colors has an RGB definition in video card palette memory.

[@cassiosouza10]

Interesting, would be cool to see a video on which use cases to use JPG, PNG, WEBP or GIF specifically on webpages.

[@not_a_human_being]

Well, TECHNICALLY it is a smallest "valid" png, but what is the smallest png that would be rendered? Like if the "checksum" that comes after main data doesn't arrive, isn't there a chance that it'll still be shown? So, while according the W3C standard this is smallest, I would say there could probably be smaller displayable pngs. Everything starting from zlib checksum can be "cut off", so that's 16 bytes. So, 51 bytes would deterministically encode a PNG.

[@jarno.rajala]

You can shave it down to 46 bytes. Everything starting from the last zero byte of the deflate stream can be removed. I just posted a comment with a link to my github page, but KZbin seems to have removed it.

[@markcruise]

Definitely love this type of content

[@brian554xx]

Subscribed. Love this kind of stuff!

[@aureliofreire6792]

As a computer vision teacher/developer I appreciate this content

[@troruaz]

it's fascinating to study the history of image formats over the years. It's a neat snapshot into the capabilities of hardware, video rendering and bandwidth of the day. For example, formats like PCX back in the 80's were made to be blitted directly into video memory of CGA video cards and don't have any of these considerations like checksums and chunking because it was all pre-internet. IIRC, the GIF format was the first internet-era format (you could maybe add BMP as an honorable mention). There's a great book from the early 90's that documents all the design considerations of the PNG format. It's probably better-documented online these days. File formats are fun!

[@Chuck.1715]

This reminded me, that I have made years ago 17x17 pixel, black gif that is 48 bytes as my standard wallpaper for my devices. For some reason 17x17 was the smallest pixel count that the device could load as wallpaper. I still use it to this very day, but more as a reminder to be curious, to see what is possible, than for its questionable performance gains over using HD pictures as wallpapers.

[@joranmulderij]

Please continue making these types of videos. I personally find this much more interesting than your frontend content.

[@mosescosme8629]

That was great. More please.

[@weltraumaffex]

Really interesting Theo, great video!

[@foefgeg1142]

more image and compression content!!!

[@southernflatland]

Fun fact, the PNG header was designed where if you accidentally tried to TYPE the file out in a command prompt, it would stop after just PNG instead of typing out all the otherwise garbled contents not meant to be output as text.

[@weeb3277]

are you doing Primeagen stuff now? reading blogs?

[@tercmd]

Not as much as Prime though given he still uploads lots of his own content to his channel

[@GottZ]

"no major video standards that support transparency".. ye.. ofc.. vp9 and av1 don't count as major then.

[@mebamme]

So out of these smallest PNGs, what's the smallest in terms of power consumption (i.e. the least amount of 1 bits)?

[@DeuxisWasTaken]

Ever since seeing the "your shirt used 3GB of my data" I can't not notice how noisy shirts you wear lol It'd be fun to somehow test how much of a bitrate difference it makes.

[@SebastianMares]

As a former audio codec developer and video codec enthusiast, these articles and videos spark joy. 😁

[@anon_y_mousse]

Yes, talk more about this subject. I hardly ever do anything with PNG's, and in the past when I needed to save and load images for various programs I just used the tiny library I made for reading and writing bitmaps. I just about had the bitmap format memorized and could write it from scratch, but the most advanced compression they utilized back in those days was RLE. It was a lot handier back then because when I was still on Win98, all of the image formats that I wanted to work with used the bitmap format as their basis. Icons were especially neat because they were sort of multilayered bitmaps where some layers worked as masks to enable transparency and some were for higher resolution images. I don't know if Microsoft still uses those for new programs, but here on Linux you can basically use any image format for anything and icons can be small PNG's if you want.

[@mauriciabad]

Please make a video about what is JPEG XL, why it is the future, and all the drama around it with google.

[@HiImKyle]

Having the file format like extension in the first few set of bytes is super common, most file formats do it

[@m.hosseinmahmoodi]

12:50 Wrong! VSync will wait for the monitor to finish the last frame before sending the new one It doesn't make the monitor run the same speed that it's getting frames, it'll make the computer run the same speed as itself. VRR makes the monitor run the same speed as it's getting frames (in a certain range).

[@ColinTimmins]

Loved the deep dive, very interesting suff. =]

[@thedevminer]

Oh Theo, how far you've fallen... Reacting to content instead of creating original content...

[@soulg5233]

av and image compression would be interesting, also you could try to hack/build a very simple transparent video format / encoder. It would be fun to go through the challenges together. imagine if we build a new file format together with the community xd

[@jacoblockwood4034]

Easy to make a file format, hard to gain support for it

[@sinom]

8 bit per pixel would allow for 256 colours. Very early computers actually only had 3 bits per pixel, but multiple different possible pallets do in total you could choose from 256 different colours but you could always only choose 8 colours per sprite/chunk

[@melonenlord2723]

now biggest PNG image possible :D

[@tafubitto]

I used to just open up all of the files on my computer with a hex editor, and then I'd get the file type specifications on my other monitor. And I'd just walk through my files. So much fun :)

[@JosephCodette]

More please ! Have you heard of Jan Sloot ? Very interesting myth about video compression

[@RandomGeometryDashStuff]

09:34 I am enjoying this

[@julianbinder2371]

I really liked the video, I'd definitely watch a video about compression and similar topics

[@onoff5604]

This is absolutely wonderful...

[@impzeropvp]

more AV

[@alexanderpetrov210]

spasibo, poleznoje video prodolzhay v tozhe duhe

[@joosh.e]

i love this kind of stuff

[@Gobhoblin126]

Yes, more AV stuff!

[@henryfleischer404]

I'd like to see you talk about compression formats.

[@DeuxisWasTaken]

The PNG signature is a magic number, most file formats have those, although I'm not sure how popular it is for them to span 8 bytes. ELF only uses 4 bytes, \7f E L F, though it's followed by another 12 bytes of metadata such as endianness.

[@cooltrashgamer]

You're wrong, I like this

[@davidwdev]

Excellent! Informative video. TGA of this same image (in 16-bit RGB mode) would be 20 bytes !

[@kubazary1408]

Hey theo! I have a question, could you make a full video in which you will create a web application that will use all the functions of create-t3-app (app router)? I mean, you can show how to do, for example, Netflix clone with login using email:username:password, it will all be saved to the database using prisma and everything will be type-safe with trcp.Thanks!

[@BlockingBelow]

whats a chun- *16x16 blocks*

[@Khantia]

technically the smallest PNG will take 512 bytes in memory, if not 1 KB (up to 4 KB), depending on the disk's formatting, where it's saved.

[@m4rt_]

I wouldn't say that the signature/magic number of a file is unnecessary. If you are on Linux or some other operating system where the file extensions don't really matter, it can be really useful to be able to know what kind of file it is without needing to be able to parse every possible file format. And if you needed to do that, you would be wasting processing power rather than storage space. And I think there are worse contenders for wasting storage space on the internet that aren't file signatures.

[@arianj2863]

cool content, please more!

[@AADITKASHYAPDPSN-STD]

What about transparent image? Instead of black? Would that reduce the size? Or not?

[@chri-k]

it'd increase the size

[@nlovelldev]

Because transparency information acts as an additional layer, I would expect it to double the size of the pixel data block? Not sure though.

[@randomkid3811]

Lossless Image Compression in O(n) Time should be cool as well, but more av too!!!

[@onoff5604]

Yes image compression video go team supreme!

[@TimJSwan]

Why not 0 pixels?

[@Fanaro]

9:14 Do a collab with Captain Disillusion! I think he has a video on how to do transparent videos.

[@nicholassdc]

Side Question: As a tech outsider, I'm wondering why referring to it as {n}"X", rather than times? Is this a stylistic/cultural, or unconscious choice?

[@SnoFitzroy]

I already knew the PNG signature literally contained the letters "PNG" but what I *didn't* know is that the signature is 8 bytes long. I thought it was only four. How I knew: Accidentally selected HxD when randomly prompted to choose a program to open a PNG once. Immediately closed the editor because it felt like gazing upon a lovecraftian beast. Edit: Confused "signature" and "header"

[@williandamascenomusic]

This is amazing

[@YuriBez2023]

They couldn't manage to add just 2 extra bytes? Shaking my head.

[@kaiotellure]

I was just seeing about AV and Theo uploads this.

[@JosepBernad]

Maybe a video about the video streaming manifests?

[@stefiii69]

I want that compression Video

[@geoffreygordonashbrook1683]

Custom png creation is not only...extremely fun...the data efficiency is important for systems and networks.(!)

[@ottolehikoinen6193]

Probably my highest level of using hex was modifying a single icon 32*32 icon in this format, for the record, 1994 I think it was.

[@belstar1128]

i have very limited knowledge but a few years ago i tried to check what the smallest image files that i could make were and i was surprised that png crated a smaller image than jpeg .but on high res pics jpeg is more efficient. but it also looks worse. but i noticed png files use less storage when there are less color gradients. so for something like a flag with 3 colors png is more efficient than jpg and there is no reason to use jpg but in most real life pictures you want to use jpg since there is too much going on ( assuming you want low storage ) .but png is better for things like comics and other simple art without too many gradients .

[@andru5054]

Theo you should take a look at lmao lang!

[@vasiovasio]

In the Next Episode - The smallest SVG! :)

[@chooseyouruniq]

we do care about av yes we do

[@sanctionedforce1868]

If you found this fascinating, you might be interested in JPEG XL, which is kind of bonkers as far as file formats go.

[@t3dotgg]

JPEG XL would need a whole series lol, definitely interested but sadly this vid BOMBED

[@joshuaphoenix4577]

I would watch a video on compression.

[@tippififestarr6519]

I really like this

[@jearsh]

i've always loved file formats, etc. so if you make more content like this, i'd be down. idk about anyone else tho.

[@DeuxisWasTaken]

You forgot to link the Biggest Smallest PNG in the description.

[@pokefreak2112]

This isn't even react content, it's like I'm a little kid and daddy is reading me a bedtime story :p

[@yablock7346]

The smallest file size of a wav file is 44 bites

[@antisk8]

I care about av tech Theo

[@sturdyfool103]

I don’t know how they thought the PNG format was ok, why do you need a start and end when the start has the length, begin the image with the dimensions, end with any other information you need, no need for a “end of file”, just reverse the bytes and append to the end, all operating systems have filesize

[@alexandrecosta2567]

Redundancy of information helps detect corrupted files. If start says that the file ends in X length but the end is not there, it means something is wrong.

[@sturdyfool103]

@@alexandrecosta2567 ok but why have it on a image format that is legitimately supposed to be a lossless codec, one in fact that can be detected in a simpler way without storing a “start signature” and an “end signature” along with the other information required to reconstruct the image, we could download it, look at bytes 0-3, check what it says its size is, and if the size is wrong then there’s been some corruption: easy peasy

[@whosdr]

@@alexandrecosta2567 Not only that, but it helps with memory allocation. You have a known fixed size of headers, then can dynamically allocate memory to hold the rest of the chunk data. This probably helps with the progressive loading too.

[@jarno.rajala]

The format is intended to be progressively displayable while downloading. Full size might not be known before the file is fully downloaded. The IEND chunk is needed to tell that the file ends, in case there is a problem with the underlying transport layer. Also there are many different chunk types besides the three mentioned, not all of which are needed to display the image. Processing the file is easier when the chunks have a standard format.