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
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
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.
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.
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.
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.
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.
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.
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
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.
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
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 TH-cam 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).
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.
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.
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.
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.
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!
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.
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.
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 :)
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".
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
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
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.
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 TH-cam seems to have removed it.
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.
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.
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"
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!
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.
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?
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).
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 .
![How are Images Compressed? [46MB ↘↘ 4.07MB] JPEG In Depth](http://i.ytimg.com/vi/Kv1Hiv3ox8I/mqdefault.jpg)
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
is there support for it to use in frontend development?
What's your use case?@@bl1ndguy0
@@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
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
@@xdanic3qoi is neat for being incredibly simple
Yep, would be interested in that compression algs video, LZ77 especially
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.
"magic bytes"
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.
Platypuses and penguins need HUGS
i mean that looks kinda average ngl
Wtf is wrong with you?! 1x1 black pixel. Look at it!
yeah and im sure it has a really great personality
Quite large infact
It’s not about the size of the png that matters. It’s the way you use it.
67 bytes is totally normal!
7:30 “this is where 8-bit kind-of came from, originally”
That “kind-of” is doing a lot of work there
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.
Yeah, he also said 8 bits for 8 colors… While 8 bits is 256 different values 😂
Something i quite appreciate about PNG is how simple it is to implement
QOI is new and even simpler its pretty cool
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.
And the package-bloat for how a png is handled depending on what you actually need to do...is amazing.
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.
I personally like niche/specific stuff about how something works. Its always satisfying
Thank you for the detailed erratum interjection, very helpful and much much better than the common text-overlay-correction.
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.
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
yep you should definetly do more of these
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
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.
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
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 TH-cam 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).
more image and compression content!!!
That was incredibly fascinating. Really makes you think about how to optimize loads even more.
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.
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.
Please continue making these types of videos. I personally find this much more interesting than your frontend content.
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.
birb
Interesting, would be cool to see a video on which use cases to use JPG, PNG, WEBP or GIF specifically on webpages.
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.
As a computer vision teacher/developer I appreciate this content
This is beautiful. I've been looking at this for 10 minutes already
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.
rhanks for the video. and yes, a video about how image compression works would be awesome
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!
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.
As a former audio codec developer and video codec enthusiast, these articles and videos spark joy. 😁
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.
6:49 Anyone else remember websafe color pallets for GIFs
Really love this kinda geeky stuff! Keep up the good work!
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 :)
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".
Please make a video about what is JPEG XL, why it is the future, and all the drama around it with google.
That was great. More please.
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
Easy to make a file format, hard to gain support for it
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
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.
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 TH-cam seems to have removed it.
Excellent! Informative video. TGA of this same image (in 16-bit RGB mode) would be 20 bytes !
I really liked the video, I'd definitely watch a video about compression and similar topics
now biggest PNG image possible :D
"no major video standards that support transparency".. ye.. ofc.. vp9 and av1 don't count as major then.
Thanks for the video, curiosity caught me, and then i learned a whole lot, great vid
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.
Lossless Image Compression in O(n) Time should be cool as well, but more av too!!!
Definitely love this type of content
Custom png creation is not only...extremely fun...the data efficiency is important for systems and networks.(!)
09:34 I am enjoying this
Subscribed. Love this kind of stuff!
Having the file format like extension in the first few set of bytes is super common, most file formats do it
Yes image compression video go team supreme!
Oh Theo, how far you've fallen... Reacting to content instead of creating original content...
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.
Loved the deep dive, very interesting suff. =]
More please ! Have you heard of Jan Sloot ? Very interesting myth about video compression
They couldn't manage to add just 2 extra bytes? Shaking my head.
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"
more AV
Really interesting Theo, great video!
Yes, more AV stuff!
I was just seeing about AV and Theo uploads this.
This is absolutely wonderful...
spasibo, poleznoje video prodolzhay v tozhe duhe
I'd like to see you talk about compression formats.
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.
i've always loved file formats, etc. so if you make more content like this, i'd be down. idk about anyone else tho.
You're wrong, I like this
we do care about av yes we do
are you doing Primeagen stuff now? reading blogs?
Not as much as Prime though given he still uploads lots of his own content to his channel
So out of these smallest PNGs, what's the smallest in terms of power consumption (i.e. the least amount of 1 bits)?
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!
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.
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.
I care about av tech Theo
i love this kind of stuff
What’s the browser extension used to save the “explanation of deflated” page at 15:36 ?
The saving of tabs in the sidebar is a feature of Arc Browser, which looks like what Theo is using
@@mattvick0010 was looking before commenting though couldn't find this "popup" thingy 😅
@@mattvick0010 How do you invoke this popup dialog thingy tho?
If you found this fascinating, you might be interested in JPEG XL, which is kind of bonkers as far as file formats go.
JPEG XL would need a whole series lol, definitely interested but sadly this vid BOMBED
This isn't even react content, it's like I'm a little kid and daddy is reading me a bedtime story :p
I would watch a video on compression.
This was very elucidating
cool content, please more!
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?
In the Next Episode - The smallest SVG! :)
I love to learn about specifications older than me 😂
I want that compression Video
Guy is looking like a evil primeagen
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).
Theo you should take a look at lmao lang!
Maybe a video about the video streaming manifests?
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 .
The smallest file size of a wav file is 44 bites
Make a video about the smallest spacer gif. 😂 That's how we used to create Webdesign abusing tables and using spacer gifs before we had css. 🙄
9:14 Do a collab with Captain Disillusion! I think he has a video on how to do transparent videos.
This is amazing
I really like this
whats a chun- *16x16 blocks*