Digital images 101: all you need to know as a designer
Images are also encoded into binary just like text, but instead of characters images are made up of pixels. A pixel is the smallest element in a picture. It is basically a square representing a specific color in an image.
To help you remember: picture + element = pixel.
Some common terms:
- Pixel: the smallest element in a picture. (picture + element = pixel)
- Resolution: the number of pixels vertically and horizontally, aka (Pixel Count).
- Megapixel: the total number of pixels divided by a million.
- Pixel Density: the total number of pixels in a 1-inch square.
- Color Depth: the number of colors each pixel in an image can display.
- Banding: it occurs when we are not able to produce smooth color transition due to less tonal values.
- Posterization: when image’s bit depth is decreased to the level that it affects its visual quality.
Let’s go through each of these terms in more detail.
Pixel
A pixel is the smallest element in a picture. If you have an image with (1920 x 1080) resolution then it contains about “2-million” total pixels. Each pixel has an “RGB” value assigned to it, and the mixture of these RGB values defines which color a pixel will have when an image is rendered on the screen.
A pixel is basically a square representing an individual color in an image.
Resolution:
Resolution is the total number of pixels on a digital screen or density of pixels in an image. If you have a resolution of 1920 x 1080 then you can multiply these two values to get total pixel count.
1920 x 1080 = 2,073,600 = 2 million, 73 thousand, 6-hundred pixels.
Megapixel:
Megapixels is a resolution for digital cameras, and one megapixel means 1 million pixels. So, you divide the total number of pixels by a million to get your Megapixel value.
If you have a 12-Megapixel camera then it can produce images with 12-million pixels. This is equivalent to having an image with a resolution of 4000 x 3000.
1920 x 1080 = 2,073,600 = 2,073,600/1000000 = ~2 MP Megapixel.
The higher the megapixel count on a camera sensor the more detail it captures in an image. In other words, a 8-megapixel camera can capture 100% more detail than a 4-megapixel camera.
Pixel Density
Pixel density is measured in PPI (pixels-per-inch) or DPI (dots per inch). PPI or DPI refers to the number of pixels packed in 1 square inch. (1 inch x 1 inch = 1 in2)
And, if I haven’t mentioned it already then 1-inch equals to 96 pixels.
If your screen has a resolution of 1920 x 1080 then you can use this formula to find the PPI / DPI for your screen.
- 1920 x 1080 = 19202 + 10802
- = 3,686,400 + 1,166,400
- = √4,852,800
- = 2,202.90
- = 2,202.90 / 13.3 (your screen size)
- = 165 ppi
You can find density of pixels within an images using same formula.
Also, remember that screen-sizes are measured diagonally (24 inch, 27inch, and so on).
If resolution stays same at (1920 x 1080) and we increase the screen size than PPI decreases and if we decrease the screen size than PPI increases.
So, the combination of screen size and resolution decide the PPI.
You might be wondering why do I care? Because everything on a digital screen is made up of pixels (including images).
Our phones have high resolution and very small screen size and that’s why they have very high pixel density. This is by design because phones are made to be held very close to the face most of the time, so they need high pixel density in order for us to not see individual pixels.
Cinemas have high resolution but with a very large screen size which makes pixel density very low compared to small phones, and other average displays that’s why you have to sit little farther away from the screen to not see individual pixel and enjoy a sharper view.
There is a reason people prefer to have seats in the center at cinema and not in the front or all the way back.
The larger the screen size the higher the resolution is needed for sharp image.
Color Depth
The color depth or bit-depth is the number of colors each pixel in an image can display. Each color has an RGB (Red, Green, Blue) value assigned to it. Using a combination of these RGB values each pixel can display a wide range of colors when an image is rendered on the screen.
Note: The more bits you have the higher the color variety and image quality.
1-bit (21 = 2 colors) — Monochrome displays.
2-bit (22 = 4 colors) — CGA displays.
4-bit (24 = 16 colors) — EGA displays.
8-bit (28 = 256 colors) — VGA displays.
16-bit (216 = 65,536 colors) — XGA displays.
24-bit (224 = 16,777,216 colors) — SVGA displays.
32-bit (232 24-bit + 8-bit for alpha(opacity) channel
= 4,294,967,296 colors) - Modern LCD screens, camera screens and plasma screens.
Above list is from this website (computerhope.com)
How image size is determined?
If you have 24-bit color depth then that means you have 8-bits per channel. In other words, you have 8-bits for every color channel. In our case it’s an RGB channel and if you combine 8+8+8 you get 24-bits.
So, every channel has 8-bit of color depth which means we have 256 color variations for each channel “Red, green, blue”. It will take “24-bits” to store a single color in memory.
Well, in that case, if you have 1920 x 1080 resolution that means you have a total of 1920 x 1080 = 2,073,600 pixels x 24 (color depth) = 49,766,400 total bits.
And your image size will be… (without compression)
- 49,766,400 / 8 = 6,220,800 bytes.
- 6,220,800 / 1024 = 6,075 kilobyte (KB).
- 6,075 / 1024 = 5.93 megabyte (MB).
What is banding?
Banding occurs when we don’t have enough variation in our colors to show a smooth transition of a gradient from one color to another. The reason is low bit-depth, usually 8-bit color depth or less.
Because we have fewer shades of color to represent subtle changes in color then banding occurs. We can see where the change in color occurs in our image rather than seeing a smooth transition of colors.
What is Posterization?
Posterization is the same as color banding. Instead of smooth color transitions we see abrupt changes in tonal values. It comes from a photographic processes used to create posters, hence the name (posterization). But now it can also be done for digital images with digital processing by using software like Photoshop.
Posterized: print or display (a photograph or other image) using only a small number of different tones. ~ “Google’s Definition”
Image file formats
Some common file formats are:
- BMP
- GIF
- JPEG
- PNG
- TIFF
- RAW
- SVG
- EPS
- AI
- PSD
Here are some of the primary characteristics of these formats:
BMP (bitmap image file)
- Can be compressed or uncompressed (uses lossless compression)
- Outdated image file format
- Image pixels are stored with a color depth of (1, 4, 8, 16, 24, 32) bits per pixel.
GIF (Graphic Interchange Format)
- Uses lossless compression
- Used for graphical elements like logos, etc.
- Doesn’t introduce artifacts like JPEG when compressed
- No support for partial transparency, each pixel can be either fully opaque or transparent
- Only supports (28 = 256) colors per pixel
- Each pixel is 1-byte, a single color from 256 shades of red or green or blue
JPEG (Joint Photographic Expert Group)
- Developed by a group named the Joint Photographic Expert Group
- Uses lossy compression
- Removes smaller hard to notice details during compression
- Can compress around 10% of the original file size
- Not good for shapes with sharp edges, as it can introduce artifacts
- Image pixels are stored with a color depth of 24-bits per pixel (8-bit per channel)
- There are 3 channels (RGB = Red, Green, Blue)
- Capable of displaying more than 16 million colors
PNG (Portable Network Graphic)
- Uses lossless compression (means bigger file size than JPEG)
- Supports transparency, even partial transparency unlike “GIF”
- Better for “web” but not for “print” (use JPEG or TIFF for “print”)
- Image pixels are stored with a color depth of 8 or 16 bits per pixel
- Higher color depth than JPEG and GIF
TIFF (Tagged Image File Format)
- Uses lossless compression
- Optimized for “print” not for “web”
- Used when image quality is important and file size isn’t a concern
- Used in professional photography
- Supports compressed and uncompressed images
- Supports many different color spaces
- Popular among photographers and printers
- Image pixels are stored with a color depth of 8, 16, and 32 bits per pixel
SVG (Scalable Vector Graphics)
- An image with a mathematical equation
- Based on XML and only used for graphical elements
- Made of simple plain text, lines, curves, shapes and colors
- Unlike raster images (JPEG, PNG, GIF, TIFF, etc.), SVG’s are resolution-independent
- Can be resized without losing quality
- Used in logos, typesetting, illustrations, etc.
RAW (aka Digital Negatives)
- Not a file format, not an actual picture
- Contains information that can be used to create an image
- The very lightly processed file contains as much original information captured by the camera
- Requires special codecs to open on a computer
- Gives you more and better options for editing
- Allows white-balance and exposure correction after the image has been captured
- Professional photographers shoot in RAW so they have more data to work with when editing
- Later can be converted into other lossy or lossless formats like (JPEG, PNG, etc.)
PDF (Portable Document Format)
- An image format to display documents and graphics correctly
- Supported in almost every browser, OS, device
- Have very strong vector foundations
- Can even display raster graphics, forms, spreadsheets
- So ubiquitous that many printers prefer it as a primary delivery format
- Illustrator and Photoshop can export to PDF format
EPS (Encapsulated Postscript)
- Used primarily for vectors but includes both raster and vector image data
- Typically includes a single design element that can be used in a larger design
- Can contain text as well
AI (Adobe Illustrator Artwork)
- Proprietary file format developed by Adobe
- Used for representing single-page vector-based drawings in either EPS or PDF formats
- Can have embedded or linked raster images
- Can be exported to other file formats like (JPG, PNG, etc.)
PSD (Photoshop Document)
- A proprietary file format developed by Adobe
- Default format Photoshop uses for saving data
- Allows users to work with images’ individual layers
- Can be exported to other file formats like (JPG, PNG, etc.)
Now, you know know why you shouldn’t use (PNG) for for images if you are not using transparency in the images because you cannot compress it much and this is also the reason sites some big sites degrades the quality of an image a lot that is uploaded in PNG format because they can’t compress it enough.
You can learn more about image file formats here: 99design.
Thanks for reading! If you have any questions then feel free to reach out at @amjustsam. Nothing is perfect and there is always a room for improvement and that’s why if you find any error or mistakes in this article then please let me know so I can fix them for future readers, they’ll be very thankful for that.