The problem of color in images for the web

The colors of the images can suffer changes if they must be encapsulated in structures such as tables, layers, etc. This may have an approximate, but not optimal, solution. Let’s see the problems that can arise.

An additional problem related to colors occurs when we want to insert an image on our page inside a table cell, a layer, etc., especially if it is an image in GIF format, since these types of graphics have limited its range of colors to 256.

The fact is that we will often find that the background color of the image is not going to match the background color of the cell or layer, even though the hexadecimal code used in both is the same.

This is because the GIF format is sometimes unable to properly interpret colors that are outside the safe palette, in which case you can choose to approximate it to the closest color in your palette or try to simulate the requested color by mixing two colors from the available, a procedure known as dithering.

The problem will be even more accentuated if the user has a 256-color system, since then the system will not be able to correctly interpret either the background color of the GIF or the background color of the table or container, so the contrast between image and cell or layer is accentuated.

To solve this problem we can do three things:

• Use background colors belonging to the WebSafe palette.
• Use GIF images with a transparent background.
• Place images outside of table cells or layers that should have a background color.

None of these solutions is optimal, but they are the only ones we have.

If we choose to use a transparent background image, we must think that if it is going to work as a link and we have configured a style for the hover state of these elements, the background color of the image will change when the mouse pointer is placed over it. she.

If we are designing for millions of colors we can save the image in PNG format, which theoretically supports millions of colors and transparency, although there are times when the interpretation of the background color of the image is not correct in this format.

Therefore, the best solution to the image problem is to always use colors from the WebSafe palette for the backgrounds, since in this way we will have guaranteed compatibility between 256-color backgrounds and millions of colors.