Each pixel is a single color, but since pixels are very small, an image such as this photograph appears to have smooth gradients of color:

The density of pixels per inch (ppi) is called image resolution. Although there is variation between monitors, the rule of thumb is that screen resolution is 72 ppi. This means that all images used for the Web should have an image resolution of 72 ppi.

Why not use higher resolution? More pixels per inch means a higher quality image, right? Well, only if your are displaying your images on something that can show all those extra pixels. On the Web, your reader’s monitor is the limiting factor. You could send more pixels to display, but they’d just be ignored. Higher resolutions are simply bandwidth wasters, needlessly inflating file size with no visual advantage whatsoever.

However, it’s different if you intend to print the image, rather than display it on a Web page. Printers typically produce from 300 to 600 dots per inch, or dpi. (Dots and pixels are the same concept, different terms.)

By the way, don’t confuse the terms image resolution and color resolution. Color resolution, also know as bit depth, refers to the number of possible colors in a digital image file.

A bit is the smallest unit of information a computer understands. It has two possible states: it can be on or it can be off. All computer information is handled in this way.

A computer monitor is made of pixels (short for “picture element”). Depending on the monitor and the computer system, each pixel will have a specific number of bits assigned to it. These bits effect how the pixel will appear.

A black-and-white monitor has one bit per pixel. This bit has two possible states: it can be on or off. When it is on, the pixel looks white. When it is off, it looks black. Each pixel has a bit depth of one and a color depth of two. One bit produces two possible colors.

If there are 2-bits per pixel, the number of colors each pixel can display rises to four. Two-bits per pixel means each pixel has 2 bits and each bit has two states: on and off. In mathematical terms, 2 bits x 2 states = 4 colors.

This relationship continues as the number of bits increases:

• A 4-bit pixel can display 2x2x2x2 or 16 colors.
• A basic color monitor has 8-bit pixels and is capable of displaying 256 colors.
• These days, most color monitors have 16- or 24-bit capabilities, and display thousands or millions of colors.

Here’s a breakdown of bit depth and color depth. Color depth is sometimes called color resolution.

In the same way, bit depth and color depth describe the number of possible colors in a digital image. The number of bits each pixel has is the image’s bit depth, and the number of possible colors increases as bit depth increases.

For example: An 8-bit image can have up to 256 colors (8 bits/pixel x 2 states/bit = 256 possible color combinations). Of course, file size also increases a bit depth increases, so you’ll always be trying to find the tradeoff between quality and size.

Important reminder! No matter what the bit depth of your image, it can only be displayed at the highest number of colors the monitor supports, regardless of the number of colors in the original image. That means someone uses an 8-bit monitor will see only 256 colors in your image, even if you saved it at higher value.

By defintion, a GIF image cannot have more than 256 colors or an 8-bit depth.

Here is the same image saved in four different color-resolution/bit-depth settings. Remember, if your monitor or display card is set to only display 8- or 16-bit color depth, you won’t see a difference in the higher resolution versions of the image in this example. What you see is always limited by your monitor.)

2 colors	16 colors	256 colors	16,777,216 colors
1 bit	4 bit	8 bit	24 bits
GIF	GIF	GIF	JPEG
1,329 bytes	4,407 bytes	8,822 bytes	4,321 bytes

Notes: In a black-and-white image, such as the first GIF above, each pixel is either on (black) or off (white). Thus the image file of the above GIF has a bit depth of 1 bit and a color resolution of 2 colors.

The second GIF image above contains a total of 16 colors, and uses 4 bits to store each pixel’s color data. (Remember: 4 bits can store 16 values = 2⁴ (2x2x2x2).) This obviously results in a much larger image file than that of the black-and-white image, 4,407 bytes vs. 1,329 bytes.

The third GIF image uses the maximum GIF color resolution and bit depth: 256 colors and 8 bits. Its file size is proportionally larger than that of the previous two lower-resolution GIFs. The 256 colors go surprisingly far in rendering image color gradation, particularly with an adaptive palette. However, to render the subtler gradations and hues in more complex images, you will need to save these images at a higher bit depth: 24-bit — a color resolution of millions of colors (16,777,216 colors to be precise). These will have to be JPEGs, since GIFs are limited to 256 colors.

To create a depth greater than 256 colors, we must use a JPEG format. The fourth image, 24-bit JPEG above has a file size smaller than that of the 8-bit GIF. This is due to GIF/JPEG compression differences.

You store images in either RGB or indexed form.

RGB Images
RGB formats, also known as true-color, use 8 bits of data for each Red, Green, and Blue value. Together, this forms a 24-bit pixel palette which has 16.7 million colors (2²⁴=16,777,216 colors). JPEG images whose bit depth can be 16, 24, or 32 are RGB images.

Indexed Images
Indexed formats are mapped to a smaller color palette?256-colors or less. All GIF images whose bit depths can range from 1 to 8 are, by definition, indexed images.

In an indexed image, colors are stored in a palette, which is sometimes referred to as a color lookup table. The indexed image’s palette contains all of the colors that are available for the image.

Indexed image	Palette for image
This image contains only the 256 colors in the palette to the right.

Palettes
Finding the right color palette that provides the best image quality is an art form in itself, and can dramatically affect the appearance and size of your graphics.

There are several standard color palettes: The Windows system palette, the Macintosh system palette, the Netscape palette, the Internet Explorer palette, the “Web-safe” palette, etc. All of these palettes are unique, yet all share certain “universal” colors, such as black, white, red, green, and blue.

Fortunately, you are not limited to using the standard palettes. You can create your own adaptive palettes that contain the exact set of colors you need for specific images. You’ll do this with your graphics program.

Here’s an example of how an adaptive palette can help keep your image quality as bit levels decrease.

The bit levels might decrease because you are tipping the scales in favor of file size and using a lower bit level or because the person viewing the image has a monitor that supports a lower bit level.

Here’s an 8-bit/256-color indexed image.	And here’s the adaptive palette that contains all of the 256 colors used in the image.
Here’s the same image reduced to 6-bits/64-colors.	And here’s its 64-color adaptive palette.
Here’s the image reduced to 4-bits/16-colors.	Here’s 16-color adaptive palette.
And, finally, here’s the image reduced to 2-bits/4-colors. Note how much color detail was lost by reducing from 256 to 4 colors.	Here’s the 4-color adaptive palette.

Dithering
Dithering is a way of making few colors appear to be many colors.

Each pixel of a digital image can be one, and only one, color. This fundamental limitation would be no problem if the pixels were infinitesimally small, say 100,000,000 per screen. Unfortunately, they are much larger than that, in the range of 250,000 to 1,500,000 per screen (depending on your screen resolution). At this pixel size, an image’s smooth line edges often appear jagged.

See how the curves have a case of the “jaggies”?

To get around this limitation, an illusion of “blending” is created by placing similarly colored pixels next to one another. This process of fooling our eyes into seeing smooth line edges is called anti-aliasing.

Here, are aliased and anti-aliased versions of the same image:

Aliased	Anti-aliased
Note: The edges of the anti-aliased image’s curves and lines look much smoother and more professional.

Here’s a zoomed-in detail of the aliased image:

This close up, you can clearly see the blocky edges of the circle (red) and oval (green) curves and the wedge (blue) line. These artifacts of aliasing are often affectionately referred to as “the jaggies.”

Here’s the same detail of the anti-aliased image:

You can clearly see how aliasing has blended colors along the curve/line edges to smooth them out. Note that the edge colors are blended with whatever color they happen to be next to. Thus blue is blended with white, red, and dark green; red with blue, white, dark green, and light green.

There are a couple of potential problems associated with anti-aliasing:

• Anti-aliasing increases the file size of GIFs. Why? GIF compression works well with solid color blocks, and anti-aliasing creates non-solid color blends.
• Anti-aliasing can cause the dreaded “fringe” effect. When you anti-alias an image, its edges are blended with their adjacent colors (as explained above). If you change an adjacent color, a fringe will appear around the corresponding edges. Observe, for example, these two transparent GIFs:

  Note: The first transparent GIF is not anti-aliased; its edges looks fine (except for the jaggies) against the black background. The second transparent GIF is anti-aliased against a white background. A white fringe appears around its edges when the background is black.

Compression
To reduce file size, file storage formats use mathematical formulas to analyze and condense the image data they contain. This process is called compression.

Due to the bandwidth limitations of the Internet, files must be small in order to be viewed by the audience in a reasonable amount of time. Graphic files are notorious for their large sizes — to view them in their original format would require far-too-much time over a standard Internet connection.

In order to display images in a brower in a reasonable amount of time, Web-based graphic file formats use aggressive compression schemes to transform large images to small file sizes. Compression schemes are used to re-encode data into more compact representations of the same information. In other words, fewer words (or bits) are used to say the same thing.

There are two types of image compression: lossy and lossless. Lossy compression creates smaller files by discarding some information from the original image. It removes details that are supposedly too small for the human eye to differentiate. Lossless compression, on the other hand, never removes any information from the original file.

• JPEG uses lossy compression.
• GIF and PNG files, on the other hand, use lossless compression.

Lossy Compression
Lossy compression creates smaller files by discarding some information from the original image.

Lossy compression removes image details that are (in theory, at least) too small for the human eye to notice. PEG uses lossy compression. The JPEG compression scheme discards image data to reduce file size.

Hold on just a minute! You’re designing wonderful Web pages and you want the highest-quality images, yes? Well, yes and no … What you want is the best tradeoff between image quality and file size. For photographs and complex colored artwork, JPEG compression provides a great way to achieve that tradeoff.

JPEG compression is based on the fact that our eyes are sensitive to certain kinds of visual details but not others. JPEG analyzes the image and throws out details that it deems unnecessary. How much it throws out is your choice.

Since JPEG compression was designed for photographs with smooth continuous tones, it does an excellent job with these types of images. It does a poor job, however, with images composed largely of solid color blocks and lines; it tries to shade them and smooth them out, resulting in ugly artifacts.

When saving an image as a JPEG, most software allows you to select a quality level. The higher the quality, the less compression and image degradation, but the higher the file size. As always, you must find the right tradeoff between image quality and file size.

Quality Level	Image at 100%	File Size	Image at 200% Zoom
95%		10,153 bytes
75%		4,487 bytes
50%		3,172 bytes
25%		1,870 bytes
Note: For most purposes, the 75% quality image would be completely adequate. And it provides a significant file size savings more than half over the 95% version. The 50% quality image is not bad either, although the artifacts are beginning to become noticeable around the edges of the leaf. The 25% quality image is clearly artifact-rich and inferior.   Remember, JPEG compression is lossy. Every time you resave an image in JPEG format, you irretrievably lose image data/quality! Therefore, if you intend to reedit an image, be sure to save your master image in a lossless format, such as the native format of your image editing program.

Lossless Compression
Lossless compression never removes any information from the original file. It relies instead on representing data in mathematical formulas.

GIF and PNG use lossless compression; these formats reduce the image file size without losing any image data. Magic? Not really …

To understand, we must journey deep into the heart of the GIF file format. As you know, bitmaps store color information pixel by pixel, in rows and columns. GIFs are read horizontally, left to right, row by row. For example:

The pixels in the first row of this bitmap are: white, white, white, white, black, black, black, black, black, black, black, white, white, white, white, white GIF compression, however, sees a golden opportunity to compress the pixel-color data: 4 white, 7 black, 5 white VoilThumbnails A thumbnail is a miniaturized version of a full-sized image. The use of thumbnails isn’t really a technical decision, but we include it here because using many large images on a single page is one of the common mistakes people make when first using graphics. One way to show several images on a page?without drowing your readers in download time?is to use thumbnails instead. For example, if you are creating an online gallery or photo album, consider displaying thumbnails instead of the full-sized images. Rather than waiting forever for all of the large image files to load, the user will only need to wait a short while for the thumbnails to load. Then he/she can click on a specific thumbnail to see its full-sized version. For example: Before she was married, my grandmother travelled to Europe with her best friend. Here is a formal portrait of them in Berlin. Click the thumbnail to see the full-sized image. To create a thumbnail: Open the full-sized image in your graphics program. Reduce the image to your desired thumbnail dimensions. Save your reduced-size thumbnail image as a separate file. Use the thumbnail images in your page and make it a link to the larger image. Here’s the code to that example above. Click on it for more detail about what it does. Note: Do not create “lazy-thumbnails” by simply reducing the values of an IMG tag’s WIDTH and HEIGHT attributes! This totally defeats the point of using thumbnails, which is to reduce the image file sizes. Reducing WIDTH/HEIGHT to shrink an image doesn’t shrink its file size at all and you won’t save any download time. Previous Next Share the Post: The Best Mechanical Keyboards For Programmers: Where To Find Them May 29, 2023 When it comes to programming, a good mechanical keyboard can make all the difference. Naturally, you would want one of the best mechanical keyboards for programmers. But with so many The Digital Panopticon: Is Big Brother Always Watching Us Online? May 26, 2023 In the age of digital transformation, the internet has become a ubiquitous part of our lives. From socializing, shopping, and learning to more sensitive activities such as banking and healthcare, Embracing Change: How AI Is Revolutionizing the Developer’s Role May 25, 2023 The world of software development is changing drastically with the introduction of Artificial Intelligence and Machine Learning technologies. In the past, software developers were in charge of the entire development The Benefits of Using XDR Solutions May 24, 2023 Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved How AI is Revolutionizing Fraud Detection May 23, 2023 Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across Companies Leading AI Innovation in 2023 May 22, 2023 Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several Step-by-Step Guide to Properly Copyright Your Website May 18, 2023 Creating a website is not easy, but protecting your website is equally important. Implementing copyright laws ensures that the substance of your website remains secure and sheltered. Copyrighting your website Fivetran Pricing Explained May 17, 2023 One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of Kubernetes Logging: What You Need to Know May 16, 2023 Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes Why Is Ransomware Such a Major Threat? May 15, 2023 One of the most significant cyber threats faced by modern organizations is a ransomware attack. Ransomware attacks have grown in both sophistication and frequency over the past few years, forcing Tools You Need to Make a Data Dictionary May 12, 2023 Data dictionaries are crucial for organizations of all sizes that deal with large amounts of data. they are centralized repositories of all the data in organizations, including metadata such as 10 Software Development Tips to Get Early Funding for your Startup May 11, 2023 If you’re thinking about a startup, it’s likely you need to raise an initial round of funding for your venture. This article covers some of the very early development techniques Show More