This Program Contains EVERY Image in History
HTML-код
- Опубликовано: 2 июн 2024
- I created a program that theoretically contains every image in human history, and then some.
Big shoutout to @SolarSands for making an awesome video about the Babel Image Archives, and for serving as a big inspiration for this video • The Canvas of Babel
LINKS
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Support the channel: ko-fi.com/codenoodles
Itch.io: codenoodles.itch.io/
GitHub: github.com/OfficialCodeNoodles
█▀ █ █ █▄▄ █▀ █▀▀ █▀█ █ █▄▄ █▀▀
▄█ █▄█ █▄█ ▄█ █▄▄ █▀▄ █ █▄█ ██▄ 
Наука
The babel image archive (and its text counterpart) are really just a glorified two-way hashing function. The text archive has the nice property of being one long stream of identically-distributed chatacters, so `Babel(n+1)` = `Babel(n)[1..]`, and `Babel^-1([a, b, ..., z])` is easy to compute.
You effectively recreated Base65536, with a lossy compression applied to the image beforehand (grayscale followed by quantization), and of course a neat little GUI to make it look nice
you just made my brain fry
An 8-bit greyscale image of the resolution described is significantly smaller than the actual hash described (talking about the Babel archive), even uncompressed.
It's basically a really lousy image format for which you also need a website to open the images.
Now what would elevate this more is making a numeral network find an image of m×n size using as little characters as possible and make it search for the writing text challenge using something similar to Tom7's uppestcase and lowestcase algorithm. Also bonus points if it's only using printable Latin ascii. Then it would be a good sigbovik paper
i like your funny words magic man
I just love dumb stupid theoretical things like this, it's incredible how numbers contains the secrets and the lies about those secrets of the universe, and everything in between as well!
"Mathematics is the language in which God has written the universe."
- Galileo Galilei
@@oggunlukarmy4901maybe leave religion out of this. Have your own beliefs but I'm sure the original comment didn't ask for your beliefs.
@@mynameissanttu Yeah no I am not the most religious person, it's just fascinating to me how math having infinite combinations and can basically prove anything that ever exists in the world. I just wanted to share what Galileo said about this.
@@mynameissanttu it's a quote from a famous scientist guy. You're the one who shares believes nobody asked for. This isn't one of those "repent for your sins! Here's a bunch of bible verses: Exodus 21, Deuteronomy 21" spam comments.
@@mynameissanttu Maybe leave your tyranny out of this. No one asked for your interpretation of it, but even so, no one stops you from commenting about it the same way they also have the right to post.
The one thing to end this off would be to create a meaning finder. basically in the original library of babel story, there are these robots that look through each and every book in the library for meaning and if it doesn't have any meaning. it gets thrown away.
the easiest way to do it is to use an image classifier and ask a ChatBot if the image has any meaning like a sea of noise to a pretty picture.
if it identifies that the image has any meaning, it gets stored in a folder. else, it gets discarded.
That's a cool concept in theory, but since there are so many images that could be generated, it would take so much time and processing power to find anything of value.
I have an idea for how to go about this. Encode color values as overlapping binary vectors and store as a sparse distributed memory or a self-organizing map. Then upload existing images. Once a threshold density is reached in a region of this vast latent space, you will be able to find all related images near any that were uploaded. This is roughly the architecture of the AI model I am designing.
But what if someone finds meaning in the meaningless? What if "shlungdinghliythujn" is the funniest shit they've ever seen?
Everything has meaning that is why it is stored in the library of babel, in English, German may sound like gibberish, but not in German. A well cyphered message should look like a random assortment of letters, but that is precisely why it is valuable, because it looks like gibberish.
To a librarian every book should be valuable, because someone wanted to say something, even if it's "vvvvvvv", because if not, we would have had one less cool game.
@CodeNoodles sorry but your video is just a base6000 converter😂good work though
This is a fun idea, i expected something like a web scraper somehow constantly finding new images and updating one local image that is the average of every image found by the program, but this is way better.
Isn't this basically just making an image file type? like jpg etc.
Yes
yes it's base but with lossy
Yes, It is.
Yes, but worse
YES
I thought of this idea and wrote this exact program about 10 years ago. There was also an art exhibit at a famous museum in the US some number of years ago that was based on this idea. I've thought about it a lot, and ways to reduce the insanely huge set of noise down to a smaller subset of "identifiable" images, but it's still sooooooooo much more data than your brain can comprehend.
Yeah, that's the problem. If only we had a way to reduce the set of images so that it could be searched for something interesting.
Looking for signals in the noise sounds like a “diffusion” model for image generation. Which is how modern image generation AI works. “Walking” from an identifiable image to a cleaner image is how that technique progresses towards the requested image. Check it out and see if that’s what you mean.
I feel so bad about this, but my first thought when seeing this was “so how much of it is porn?”
Not my best moment.
Lol
Technically it may have
Babel is not going to have "everying" as far as porn goes, unless they want the FBI at their door as far as CSAM and gore goes.
@@CoreDreamStudioshow are they going to find it in the INFINITE MESS OF RAINBOW STATIC? See, unless somebody already has that image they aren't gonna find it.
This is not how the babel site works, though. It doesn’t actually have the information of the image, but a seed to generate it. What you have done is encode it…
It’s basically the same thing. His site has all the images too, you just type some characters and it gets an image
i'd really love if the seed was way smaller, like 400 characters long for a uploaded image, but we have to remember that the seed itself is the chance of every pixel on the uploaded image being where it is, so.. almost impossible to shrink it down.
i thought about encoding an image to numbers, then trying to find it inside PI, so we would just need to compute PI and then use a adress to get our image back, but also the chance is so low. damn.
there are trillions googols of possible images, it's impossible to store them in a small string like that @@neey3832
@@neey3832 seed hunting my future
@@neey3832 the problem with shrinking it is that the number of different images you can possibly display depends on the number. So with 400 characters, if it's numbers 0-9 like in the website then it's a "mere" 10^400 images, which may sound like a lot but it's way to low of a number to display most (almost all) images for anything more than a tiny resolution. Using digits of PI wouldn't help either since the position of the digit would, on average, be as big of a number as the sequence stored there
It’s nice to see a return to these kind of coding challenges.
arent you literally just taking the pixel data dumping it into a file and then going hey, this is unicode ?
not only does it contain every image in history, it also contains every image that will ever be made.
It also contains all images with images within them that can be displayed at the programs resolution and color depth! (Since any image containing any image(s) at any transformation/degradation than the original size/color is in the set of all images to ever exist)
Actually, unicode is a 32bit format, but it takes one, two, three (maybe not three) or four bytes depending on the value
what you're specifically talking about is the utf-8 encoding.
codenoodles is (implicitly) using the utf-16 encoding here; that's what wchar_t represents, on windows at least (it's not very portable).
you're right that codenoodle is restricting themself to a subset though, since there are 21 "useful" bits in a unicode character.
Bro is just reinventing the .bmp file format.
watching ½ of the video,
and thinking: You are just
making a new file-format
for images (& its viewer).
very well done; but
nothing so special…
according to the title
Congrats ! You just basically made computer file system. Did you ever tried to open an image with block note ?
Forgot what it is actually called but this kind of reminds me of the “monkey with the typewriter” thing. You could have an infinite amount of people and one (or more) could randomly generate any video on RUclips, just in low quality of course.
The infinite monkey theorem
I don't know if you have understood that theorem, but the point of that experiment was to show that it was impossible for any monkey to write even the slightest sensible word given infinite time. So no, no one will randomly generate a youtube video
it's funny that the babel image keys are just a different file format than png but it's still storing the image in bytes. You can also send the data of your png image lol.
i got my own image archive (since 2000) 150 000 images, 1/4 are my own images. 1000+ folders, almost half a terabyte. that would take years to scan through, lol. but i still search for old pics regularly (it takes usually 30 secs to find an image manually thanx to several levels of subfolders, up to 20 maybe). sometimes i create new folders/subfolders but it was pretty much optimized even 10 yrs ago. it's hard to take care of that many images. and yes i got several backups, lol
More than a program more value is in you described your exploratory journey with succeses and fails.
This can help new adepts to don't afraid to experiment and don't give up on first fails.
I can't wait for more 😉
Another idea is that you could open the jpeg (or whatever image format you have) file of the image you want to "find" in a hex editor, copy the content there, and make that the be string that identifies the image's location. Then on the backend, you can just use that file's location as the content of your image.
i dont really understand how this is different from something like a PNG or JPG. those can technically display every single image too, cant they?
JPG isn't lossless. It is practically impossible to store all the combinations in a JPG image. PNGs can be lossless.
@@AkshayCS1sure, jpeg isn't lossless, but it's a whole lot less lossy than this project is
@Alkanen well, turning an image into a compressed bit of trash and then storing that lossless is still not lossy. Jpg will gradually destroy an image if you save it over and over again. Lossless formats (like png) will not do that, even if your image format can't even store anything other than a low res greyscale. It's still lossless in the sense that you can save it over and over again.
Think of a plain text editor. Compared to a book (or pdf) with page layout etc, you will lose that info in plain text. But once it's plain text, it will not deteriorat
@@borstenpinsel yes, but using that argument storing a single 0 or 1 indicating if the entire image is more or less than 50 % luminance would be great since it's lossless, whereas in any practical terms at all it would be considered utterly useless (except in some *extremely* niche applications). It won't deteriorate though ;)
@Alkanen of course but every recorded picture is already lossy. People a hundred years ago would have loved an audio recording that still sounded squeaky and pretty bad to be played a hundred times without it sounding even worse. Or the black and white pictures of the time to keep their contrast and not bleach over time. And if you need to compress data down until the original isn't recognised anymore the storage isn't meant for that data. But it's still lossless.
Greyscale bitmap exists. So does (or did) 16 bit bitmap. Then came 24bit and now we have 32. This was normal a few decades ago.
This is very intresting and cool!
Congrats btw so far its been a bit i still remember your first few videos lol
Imagine that every chunk of digital information, like an image, a video or a program, it's a limited set of 1s and 0s at the base level. So, it means that every single image, for example, is a single integer number, a very big number. If you convert base 2 (binary) to base 10 (decimal) you have a number that can describe an image, or any digital data. There are many ways to encode images, some more efficient than others, and basically you created a raw image encoder. The unicode representation is actually equivalent to the binary representation. If you take the PNG format for example, a lossless efficient format, you could have very similar results. The thing about unicode is that not every character is printable, and different softwares deal with certain characters differently. If you rename a PNG to TXT and open it in notepad for example, you'll see equaly strange chars, like the ones you have in your encoder, and if you try to copy and paste them into another notepad and save it with PNG extension, chances are that it would be corrupted, because some non printable chars would not be copied or pasted properly. So basically, what Babel Image Archives is doing is not giving you a path to the image, but the whole image information, in a decimal format.
"The Library of Babel" by Jorge Luis Borges...
the funny thing is that ALL the images that can be displayed in 640x416 or in 4K etc are finite.
And this also applies to videos. Every 4K video that can be displayed in a monitor is a member of a finite set!
Keep up the good work! you are so underrated my guy.
this is really cool, i worked on a project to make a 2d interactive library of babel in pygame (for a while now im doing other things) and its interesting to see how you solved the huge location / key length.
I am so impressed and inspired to learn more about this! Great job 😄
If the location is smaller than the corresponding image file, then there must be images that can't be found there because there would already be another image in that same location as there are more images than locations. Though of course, you need to count the size accounting for any forms of compression/decompression the rendering algorithm might use, and not necessarily the raw bitmap that ends up on the screen.
there is no difference between converting it and "finding it"
@@RampagingCoder Either images that are just slightly different end up being identified as the same; or if something more scrambly like a hashing algorithm is used, then some images will end up pointing to the address of some other completely different images and cannot be actually found.
just think of it this way, the "address" is just the conversion data of the original image, with some quality loss of course@@TiagoTiagoT
Instead of selecting characters in order how they appear in the unicode table, you could arrange them by perceived brightness. That way just by looking at the location string in an editor set to the correct width, you can actually see a B&W representation of the image. Sort of like ASCII art, except unicode.
that would be really cool
I would like to see a version of this program which has limited the degree of pixel variation in order to dramatically decrease the total number of images stored. Most of Babel Image Archives is noise (random pixels beside each other) but if you were to write a program which assigned a difference value between every two colors (two shades of blue are very low difference, same color is 0 difference, blue to purple is medium difference, blue to orange is large difference), and then limited the total variation between a pixel and the 25 pixels around it (5x5 block) you would force out much of the utterly random images drastically reducing the total images and rendering the ones which existed much more likely to be look like something. You could also say that overall say 1% of pixels can go up to the max differential, 10% can have up to a fairly high differential, and 25% have an above default differential the remaining pixels have a default differential rating to allow for reasonable shapes but not pure random noise.
I remember having this exact idea when I was a kid, except I was picturing a folder instead of a website or program.
could you mash together every meme from the 2000's so we can have the funniest image on earth
The number of digits to represent the image location was never a problem. I don't know why you thought you had fix it.
If it uses base 10, a lot of storage is wasted because those numbers still use 8 bit. But i also did not see the point of using unicode instead of ascii.
Nothing wrong with wasted storage, he wasted the coolest parts of the video on that.
@@lynnwilliam I see your point, but i disagree since the video was mainly just about his approach on that. If all you want is to find out how you can make some sort if "infinite image library" yourself, take the trivial approach and just change the file format from .png or so to .txt. Send that text to someone, have them paste it into notepad, save it as .png and its an image again.
By this logic even a Base64 encoding of images is just getting the location in babel's library of Base64, and converting image back to normal is just getting the image from that location :D
bestie made an image format and sold it as the library of babel image archive
1:15 Yeah, not very hard to imagine, it's all stored as bytes, just combine the bytes together as though they were each a single digit of a Base-256 number, and you've got yourself a way of turning any data stored on a computer into a number that you can reconstruct the data from.
Once in primary school about 12 years old (35 years ago about 1988) i was fascinated with projecting fonts and diffrent symbols at 8x8 box (with milimeter paper and pencil),
once i wander what if i generate all possible combinations, then i realised it will be 2^64 combinations.... then i tried to limit it to sensible (for human ) images
checkerboards, lines at every angleat different angle etc. bit it stil overhelmed me finally.
My thougths could be base of some lossless comprestion algorithm but then in BASIC on ZX Spectrum this was over imagination borderes even
I wonder if you could encrypt combinations of unicode say, any given character could represent a combination of other characters and you have a key that determines how many levels of encryption has been done, so you can theoretically compress any image down to a single unicode symbol and a key that describes how many layers to unpack that single value down in order to get the actual values needed to represent the original image. Maybe it could be represented by a decimal point.
As images can include text, there are images with passwords for every bitcoin wallet.
Also you could make a text image, with all your passwords, upload, get the babelia hash and use it as your master password container
Sounds like an amazing compressed file format
Fun fact: this site contains US military secrets as well as nuclear launch codes
If you do stick with Unicode anyways, not caring how big the URL actually is, I have a different suggestion.
There are more than double the 65,536 characters in Unicode now. So any that would normally be in the reserved area could be mapped to different characters. What's more, this would also let you take out other problematic characters, like ones that look identical, or the combining characters.
In short, I think you could probably create a table of 65,536 Unicode characters, and then map your bit stream to them. Most would correspond to their Unicode code point, but they wouldn't have to. It would be less performant, but I think it would probably be fine.
You could even consider having the actual parsing be on the user-side, which would let you write this in JavaScript. I suspect it would still be quite fast as long as you keep the image resolution down. (And you could use the built-in to downscale any image to the resolution.)
This is EXACTLY the question i was wondering when i layed down in bed every day since 1 year. Feels good to finally have an anwser, thank so much !
Am I wrong to assume that this is just a naive bmp encoding?
Cool project nonetheless.
Now find the image which contains every image that doesn't contain itself
you can use the first bit to encode a secret message into the data
At first I thought the idea was kinda cool, but the more I think about it, the more pointless it becomes.
Your "location" is basically the entire image, encoded in a special format that you just came up with. Your "archive" doesn't contain anything, it just converts the encoded image that you give it into a something that can be displayed on the screen.
Congrats, you just invented a slightly wore version of the bitmap file format!
Imagine someone’s just casually scrolling through this and then they find like a pic of their home
this needs a million views
As soon as I saw you writing C++, I subscribed
technically, unicode is a character set describing those characters. the term you are looking for is utf8, which is an encoding method for unicode characters, along with utf16, etc.
hello df user
No, the term he was looking for is utf-16. Because that's what he used
@@BromeoWuggles hello df usr
4'33 I think it'd be better if it only used the "safe" Unicode Characters (i.e. NO unassigned code points, non-characters, surrogates (this can raise issues if the string is sent as UTF-16), formatting characters, control characters (including null, bell, backspace, or other non-printable characters), certain punctuation marks (as they may need to be escaped in sone programming languages), combining characters (this includes diacritical marks, which might have issues due to Unicode Normalization Forms), or Private-Use characters (these may have characteristics defined by private users that might not be desirable))
This video is incredible! Keep up the good work :D
Thanks, I will!
This idea is really cool until you realise how large the space actually is. And it's not impressively large but rather boringly large. The idea is basically - you can draw anything by using a lot of pixels. Which is true, yet not as exciting.
Congratz however on the execution, I loved the UI!
this is essentially what we had to do back in the Usenet days - you could only post text, so all images/videos had to be converted to ascii code and then decoded by the reader.
I think you need to look into vector representation spaces. Which coverd what you are already doing
CodeNoodles make the coolest stuff :)
The UI of the program is nice and simple :)
what library did you use ? and you did all in c++ right?
The UI is made from a library I created called Glass. And yes, it's all programmed in C++.
The image I thought of was a 3D model of a Light Blue Yoshi in Rick Astley's clothes doing the Sonic CD stare meme pose I made once for no reason.
In essence, this RUclips video already existed out there before you made it.
It was just cut into individual frames, then each frame was cut into tiny squares of the proper resolution.
Every video past and future is there, even the 3D ones, which means everything in reality is there as an explorable interactive 3D render.
If you wanted to, you could watch my thumbs type this comment from my point of view. You could also watch me type something I’ve never typed before, while holding a cigarette and wearing a watch I’ve never owned. lol
So you basically just created a new image format?
i made an image to sound converter too. you can record the sound, and you will be able see the image back again!
insane as always
i have no idea what i just watched but it was fascinating
So not only does this website have the most important historic photographs, but also MD R34? Very varied I see.
So it's a very roundabout image file codec.
So somewhere in there are spiderman pictures?
Yep
Wow that's like saying your monitor has everything anyone has ever seen, because it can rearrange into any image just at a limited resolution.
You know, this tool seems like it has some really good ARG implementation
Wow, this is actually awesome! I always wonder how people manage to make such great things like this.
I think the problem with The Babel Image Archive is that its images are 8bit RGB, which consist of 256x256x256(8 bits/256 colors per channel)=16,777,216 colors. Multiply that by the number of pixels, 640x416=266240, you get 4,466,765,987,840 possible images. I think if they used a limited palette like 512 colors(3 bits/8 colors per sample) that the images would still look good but still be able to contain a absolutely massive library of images. They would still have a library of 136,314,880 images.
the amount of possible images is actually 16777216^266240, which is a number with 1.9 million digits
@@progect3548 how did you come to that number?
I've always thought of the babel image archive as being dumb, when you upload an image it's just giving you a textual representation of the same data. So... what's the point?
Finally, someone else thought of this thing
perhaps try using the "key"s like a seed for a random number generator, so it creates the same image with the same seed
That won't work. There will be overlap and inaccessible numbers, and it is impossible to inverse engineer the seed of a random value.
@@luigidabro actually, some algorithms do have invertible seeds.
In fact, it's just a different image storage format, not its location)
Nice! This is close to image compressors like PNG algorithm... There is also a way of sending images like this with a plain text email...😀
This is amazing. From pure curiosity, I became interested in this topic recently and it led to me to do a calculation of how many possible unique FullHD 24-bit coloured images could exist. And the number is about 10^14 000 000 (ten to the power of fourteen million). Which is… a lot. So I was thinking how could I do something interesting with it, some cool custom program. And then I saw your video. At first I thought there's no way I had just thought about it and I got this recommendation on RUclips, but then it really inspired me even more. Thank you so much, awesome job!
That's awesome that you had the same curiosity as me! It's insane how many images there could be even in a seemingly small resolution, but with full HD, it's practically infinate. Thanks for your comment and support!
birb
Funny thing is when you use the search feature Bable requests you upload an image.
We did it bois, copyright is no more.
babel archive is just reinventing the wheel and which is base64 image
Once i had done the same opposite thing in python... for my game, i converted all data into an image and decoded the image to load the data
When debugging GBA or other old gaming consoles or even computer programmes, it's not uncommon to "image dump" the memory, so one can see whether images and graphics are stored / processed into memory correctly. So for regions where there are images it shows the images while other regions show as seemingly random colours - that's kinda what you did. Kinda cool
You should make this into something bigger where you can share images to people just using the text
I think they call that a 'link'
They mentioned that at the end, where they can get the text encoding and share that, then maybe even encrypt that so it's like it has double encryption
You see, what it SHOULD'VE done is, for the first image, make everything except the top left pixel black.
make each image counting up in a base 255 counting system with red being the ones place, green being the "tens" place, and blue being the "hundreds" place.
Counting in every combination of the RGB channels, we would have 255^3 or 16,581,375 different images, for a change in.. one pixel.
You just continue like this, making the next pixel the "thousandth", or 255^4th place, and so on.
Not only do you know that every theoretical image can now be found, you can scroll in-order instead of it being random.
This would make every possible image be 255^3^(640*416), which would be a very, VERY big number.
Why not using UTF-8? It can encode all unicode characters in minimum amount of bytes, and is the default encoding for c++ strings
Very interesting!
Okay but does it have an image of travis scott on a soldier tf2 costume sitting on a beanos chair and eating a green mcrib in a space mcdonalds while he talks to goku from dragon ball who is the worker there?
Yes, it does 😆
W program@@CodeNoodles
Yes from every angle
EVEN BETTER@@David280GG
The Kingdom bug music always makes me laugh
The nft people angry with this one
You have no idea how much i wished for a program like this, because on the babel image archives all images are low quality!
*you should try to do with library of babel too with the books but have more letters than the lowercase alphabet, commas, dots and spaces!*
Edit: edit i run the app on windows 10 it says source image info, image info, id info and the rest of right side its just a thin line and dosent show the properties of loading a file... i dont know why!
would still be nice to also have this better version you made but on the web
i thought about a very similar concept when i was in college. but was never smart enough to do anything about it, so just came across as a crazy person.
new *image format* just dropped
This seems like a neat situation where AI could actually be useful, and not just displacing something else. If you take an image generation model that makes an image from a prompt and a seed number, you might be able to make a program that decodes an input image back into those values, even if the input image was not made by AI. it would take way more processing power per image, but it would give a way shorter location.
generative ai equivalent of bogosort
i guess you could get higher resolutions by gettong the locations of many mosaic pieces of your higher resolution image
you know unicode has about 149,813 characters, and if you use a string of 16 characters for each image location, you would have about 10^82 different possible permutations/combinations of image locations, which is about the number of atoms in the observable universe...
You can already encode bitmap to base64 encoding and use directly on eg. websites. Besides all files are are numbers. Same with eg. hard disk - all it does is stores giant number. If you incremented it by one you would have all the collections of photos, movies, music, programs, games, etc. that you could fit on this hard drive's capacity including all the operating systems needed to run on any machine and this would be true for even devices which require authentication keys... and among different numbers you would have detailed schematics how to make every single thing, all the answers for all the questions , all the mathematical proofs for all the mathematical problems... what else... if possible at all (and would fit in given hard disk space) program that runs sentient general intelligence AI - including those which contains memories of all people/animals who existed including those from the future. So yeah... +1 and carry on...
Broo I have been watching u since the start I remember scrolling trough yt and seeing ur snake one congrats on growing so much u deserve it all but pls tell me how did u got 100k from 1 vid???
Thanks! What do you mean by 100k from 1 vid though?
Uhh when I was watching ur first vid I saw u got 100k???@@CodeNoodles
4:37 You can store 2^16 unique values in 16 bits because 0 is itself a unique value. 65535 is just the largest value it can store.
This is so facinating.
Like there is images of EVERYTHING.
Imagine you could see every second of your life. In every (infinite) angle!??
EVEERYTHING!!!!
I highly doubt babel has "everything", if it did, it would include gore and child porn, so no thanks.
I don't believe there could be any way of censoring those..
It's just code that fills randomly every pixel on the canvas to make every pixel combination possible. @@CoreDreamStudios
@@CoreDreamStudiosit's the curse of everything.
It doesn't contain everything, but it has the ability to generate images from numbers, which isn't new.
The image you see, is stored in a computer as a set of numbers. And when you want to view the image, the screen lights up the pixels depending on the numbers. When an image is 100KB big, it means there are ~1000000 charaters representing the image.
There are different ways to store images in numbers. PNG, Jpeg, webp, etc. The babel uses one of their way. The website is just an image viewer.