Whole images on the screen hold little or no significance compared to the everyday objects you see, digital images hold much water among the wonders of computers. We'll basically be looking at how images work in this article.
Pixels (The phone copied the concept not the other way round)
So, pixels are the tiniest bit of controllable element on a display or I'd say an image. It's a hardware component on your screen (I'll show you later). So images are made up of pixels. Perhaps you've heard of the term "pixelated image" or when you refer to an images as being pixelated; well when you look at such images, you find it minutely split into neat (in my opinion) boxes of color.
While this may fascinate you if you're a weak mortal, pixels actually look like this:
Yes, you saw red, green and blue rectangles.
What are pixels made of
If you ever wrote CSS and specified colors using RGB values, this may strike a chord in the depths of your vain soul. In CSS, you do stuff like:
.some-glorified-text-no-one-will-read {
color: rgb(255, 100, 0);
}
What this does on a lower level is specify the quantity of red, green and blue colors on each pixel that makes up the text with such wonderful class.
Pixels are really just these three lights and every colour (British English, please) is a product of a permutative combination of these three.
I'm tired, so you should read up on CMYK here.
The intensities
To produce each color, each of these bulbs are given a number mostly between 0 and 255 (255 because binary - I shouldn't tell you everything...). This then produces the venerable colours that you see on your screen.
Types of images
I cringe, quite intensely at my use of the word "types" cos it doesn't seem to me that way, but I have little say.
On the abstracted side, images... Lemme explain:
Abstracted in the sense that: "on a higher level", "on a higher power" (yes it's from Coldplay), "on the user-facing side of things";
So, "On the abstracted side, images" are represented in beatiful formats you'd recognize. I'll touch just four of them, because there are four elements in Avatar: The Last Airbender; and I love it. This is a link if you're greedy to know other formats. The four are:
- JPEG
- PNG
- GIF
- Vector Images.
They would sound familiar except you've never touched a phone before. These exist due to different tradeoffs needed to be made on the images and maybe for the fun of it. This ranges from size vs quality, compression benefits and the sorts.
JPEG (I hate it when Dillion calls it "JPENGS")
This is Dillion and he calls it "JPENGS"; however, JPEG is an acronym for Joint Photographic Experts Group, a group of nerds who love images.
The JPEG format is the most popular of all image formats and is usually the one you post every sunday. Its main focus is on giving the flexibility between image size and quality. With this, JPEG images have a maximum allowed resolution of 65,535 x 65,535 pixels. It has an extension of .jpeg or .jpg. There are a million others, but brevity >>>>>>>
PNG
This is on the layman side identical to JPEG format, except in the RGB representation, it has an extra 'A' to it referred to as 'Alpha Channel' (remember RGBA in CSS?). This 'A' has to do with transparency of an image. This means that while you can have an image with a transparent background with PNGs, you can't have such with JPEG images. By the way, it is legal to pronounce 'PNG' as 'Ping. Actually, non-rgb formats are not allowed in PNG, so bye-bye CMYK (it's not even fine to pronounce in the first place). It's extension is .png.
GIFs
GIF is an image format that literally gives you a movie but with images. If you ever saw those images that moves on Whatsapp (well, I prefer stickers), you're seeing a GIF in action. GIFs are image formats that have animation support, except you're limited in the number of colours you can use, namely 256 (yes, binary).
This is a GIF:
Vector Images
Rather than deal with pixels, vector images are based off calculations. This means the position of each content in the image is actually calculated dynamically so you can have infinite pixels for one image. This means that you can scale up a vector image without losing quality. They are generally used for icons and fonts on this page you're reading.
Cooking images
Well, this section refers to image manipulation and stuffs you could do with images. I've outlined three here:
Cropping
If an image is too big or if there are some parts you don't want to show, you can crop it. Cropping will remove sections of the image and focus attention on other parts of your picture. It's like amputation but for images, and there's no blood. Only unhappy pixels.
Contrast
Changing the contrast will make the image duller or more vibrant. Changing the brightness will make the image lighter or darker. You can manipulate the contrast of an image making it look better through contrast. Check your favourite photo editor for this option. It's quite neat stuff.
Scaling
Sometimes you want to resize an image, which means making it bigger or smaller. Pixel-based images can be made smaller but when you increase the size they will lose quality and pixelate. This is because scaling up a pixel is quite dicey and would show the individual colors in the boxes as they are. I'm sure you don't like it. Vector graphics can be resized without any change in quality.
Image compression
Image compression is really just reducing the size of images. I use a Redmi Note 10 Pro and images sometimes get up to 15 - 20 MB, especially with good lighting. This is an evil thing and exorcism does not work so, they invented image compression for my sake.
There are two types (I have mood swings, so they created two):
Lossy compression
Lossy compression works by removing some of the data in the image binary. The quality of the file will be reduced. If you're not so concerned about quality, you'd want to use this form of compression.
Lossless compression
Lossless compression works by rewriting the data so it is stored more efficiently. Read up on data compression here. The quality of the file will stay the same. In this case, you can be rest assured your body parts will remain intact in the image. However, not all image formats supports this type.
Other fun stuffs about images you'd want to know
- A video is essentially lots of images shown in a small frame of time. They are called frames. The more frames per second, the smoother the video… Play games more, you’ll see these stuffs
- Filters on apps such as Tiktok (such a lovely creation) and Snapchat (such despicable thing) are made by simply solving calculus with pixels. No time to explain, you should have listened in maths class.
- You can manipulate your own images too. Check out the Pillow library in Python to see how you can do stuffs like these.
- Resolution is usually how many pixels you have per metric unit… See DPI and MPs
- You can send images from one device to another. Surprising, no?
Some....body
So, Abiodun, a venerable colleague at Formplus, seeing my activities concerning images, enlightened me on signal processing and dropped resources you'd love.
Now, you may have wondered how Google Meet knows where your head is so they'll blur your background. Well, it has to do with those mathematics we all hated in school: matrixes, laplace transforms and (literal tears here) calculus things. With algorithms, computers are able to detect images and object in the context of another image. If you're interested in the how a wonderful algorithm like Haar's Transform, can be used for face detection and object detections, look here.
Love Python and want to see some other algos? here are some of them.
Lastly, on scaling images and compression, Fourier Trasform (I'm sorry, I also had PTSD from seeing this too) is useful and you can see its applications.
Conclusion
Now, child, I have shown you the best of my knowledge on images, formats and types, how to cook them and how to serve them.
This blog post is my first in months and only due to a presentation I made on images. These are the slides.
If you want to know about Isaac, a fellow who is usually a core individual in my articles, read my previous article on What's that *args stuff in Python
Top comments (1)
Nice work bro on DS/ML naija guy. Keep it up