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

5 ай бұрын

is there support for it to use in frontend development?

@austinhutchen

5 ай бұрын

What's your use case?@@bl1ndguy0

@okie9025

5 ай бұрын

@@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

5 ай бұрын

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

4 ай бұрын

​@@xdanic3qoi is neat for being incredibly simple

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

i mean that looks kinda average ngl

@LC12345

5 ай бұрын

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

@ivymuncher

5 ай бұрын

yeah and im sure it has a really great personality

@ethanogle698

5 ай бұрын

Quite large infact

@Kane0123

5 ай бұрын

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

@arcrad

5 ай бұрын

67 bytes is totally normal!

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

5 ай бұрын

"magic bytes"

@jearsh

5 ай бұрын

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

4 ай бұрын

Platypuses and penguins need HUGS

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

@irishbruse

5 ай бұрын

QOI is new and even simpler its pretty cool

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

@dr_regularlove

5 ай бұрын

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

5 ай бұрын

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

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.

yep you should definetly do more of these

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.

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

5 ай бұрын

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

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

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

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

more image and compression content!!!

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

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

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

Subscribed. Love this kind of stuff!

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

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.

Definitely love this type of content

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

Really interesting Theo, great video!

That was great. More please.

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.

@jarnorajala

5 ай бұрын

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 KZread seems to have removed it.

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.

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

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

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

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 KZread 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).

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!

Loved the deep dive, very interesting suff. =]

As a computer vision teacher/developer I appreciate this content

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!

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

4 ай бұрын

birb

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.

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.

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

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.

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

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.

6:49 Anyone else remember websafe color pallets for GIFs

Yes, more AV stuff!

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

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.

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

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

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".

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

are you doing Primeagen stuff now? reading blogs?

@tercmd

5 ай бұрын

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

cool content, please more!

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

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 :)

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

@mattvick0010

5 ай бұрын

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

@CanRau

5 ай бұрын

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

@CanRau

4 ай бұрын

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

This is absolutely wonderful...

we do care about av yes we do

now biggest PNG image possible :D

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.

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

@chri-k

5 ай бұрын

it'd increase the size

@nlovelldev

5 ай бұрын

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

I want that compression Video

You're wrong, I like this

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

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

5 ай бұрын

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

This is amazing

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

i love this kind of stuff

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?

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

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

Theo you should take a look at lmao lang!

09:34 I am enjoying this

spasibo, poleznoje video prodolzhay v tozhe duhe

whats a chun- *16x16 blocks*

Super interesting

Yes image compression video go team supreme!

I really like this

I was just seeing about AV and Theo uploads this.

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.

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.

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

Why not 0 pixels?

Guy is looking like a evil primeagen

I would watch a video on compression.

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

Maybe a video about the video streaming manifests?

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

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 love to learn about specifications older than me 😂

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"

Interesting

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.

In the Next Episode - The smallest SVG! :)

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 .

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

This was very elucidating

The smallest file size of a wav file is 44 bites

More codec pls

I wouldn't be suprised if you could actually make even smaller PNG. Browsers might display PNG without any pixel data.

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

@t3dotgg

5 ай бұрын

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