@sonotoridesu yep, encoded in base-64

@bitmap that's actually pretty cool

@sonotoridesu yep! if you pasted data:image/png;base64,iV............. into your address bar it'd be just like opening up a png file

@bitmap never opened up a png in a text editor before so didn't know you could just do this lol

@sonotoridesu oh if you did that it'd look very different i think

@bitmap yup lol

@bitmap are PNGs just encoded in a higher order base or something?

@sonotoridesu @bitmap pngs are in binary format and are compressed using DEFLATE (like zlib). To embed them in CSS, you convert the binary data into characters, encoding them in base64, which is basically taking 6 bits at a time and assigning them a character

@AbelToy @sonotoridesu this is a lot easier to understand than my explanation about how when you try to open a png image in a text editor, it'll display binary data as 8-bit characters, only 87.5% of which are valid ASCII, meaning you'll get weird unreadable garbage

@bitmap @AbelToy that makes sense

so I can assume the uncompressed binary form hex color values like #FFFFFF right?

@sonotoridesu @bitmap pretty much yeah, and png basically compresses that data in a very similar way to just zipping a file. It's a bit more complex than that, but that's the gist of it.

@AbelToy @bitmap yeah I figured most of the complicated bits are in the details of deflate

@sonotoridesu @AbelToy i don't actually know the png specification that well; it's complicated stuff in chunks and whatnot that i never bothered to read up on

actually the .BMP file specification is really simple and easy to understand for the most part, which is also the reason why they are so large in size

@bitmap @AbelToy makes sense lol

@bitmap @sonotoridesu it's basically:

1 chunk of data that contains the image's width, height, bit depth, color type, compression method, filter method and interlace method

1 chunk of data containing a list of colors and their corresponding bits

multiple chunk of compressed data containing those colors, representing the image

1 chunk of data that marks the end

many optional chunks containing many different info (you can even add custom chunks)

@AbelToy @sonotoridesu whatever who's got fucking time for that let's just fucking list out every pixel

@bitmap @AbelToy activated brain: rectangular matrix of color values in rgb but also sometimes in plain english for some reason

@memeity usually no, but this is for a custom css file that users can load (with a browser extension or bookmarklet) to restyle a mastodon instance so embedding the images is a cleaner solution than relying on an image host