Pixel Anatomy 101

Poking the Pixel

Things You Should Know

The first thing we'll do here is explain the 'Example #3' graphic we saw in the "How to make the best of both formats" section.

If you remember, we had problems when we tried to save that image using the Web Safe palette. The main concern was that because our image contained gradient areas the 216 Web palette caused some blotching or pixelation to occur in those places, even after dithering was applied. This occurred because those intermediate colours in the gradient were not found in the Web palette.

To help remedy that limitation I created a new version of the original 216 palette version that didn't convert well before. Here's the original, problem version again. And to the right of it is the new version I created with some alterations done to work around the 216 Web palette's limitations in this case.

The first and most obvious thing I did was to shrink the image's dimensions. One reason for that was because it didn't 'need' to be as big as it was And by reducing it's size I reduced the visible amount of 'problem' areas in the image. Thus the image's pixelation was minimized, and at the same time, I reduced its file size.

Here's a list of the other alterations I performed, and the reasons why:

1. I further reduced the amount of pixelation by:
1. not dithering the image when I saved it out, and

2. by creating a brighter gradient area.

To do this I simply increased the amount of light colour used, and moved the shadowed area closer to the bottom of the image. I then replaced the black in the gradient with the darkest red in the Web safe palette [51,0,0]. Why? Because there are more shades of red in the 216 palette than there are shades of black -- this made the image more Web safe compatible. A similar result could also be achieved using the darkest blue in the 216 palette [0,0,51]. This step also added more of the solid yellow Web safe colour to the image, and removed some of the intermediate non-Web safe colours that had been used originally.

2. I changed the colour of the word 'Example', because, as I moved the shadow closer to the bottom of the image it became darker behind the text, and blocked out the bottom of the word. I used a dark red, [one shade lighter than for the gradient shadow - 102,0,0], because it contrasted just enough with the yellow to be legible. If I was to use any equally dark colours that contained blue text, it would appear more as a black against that yellow, and wouldn't have resolved the legibility problem.
3. I completely removed the largest gradient area, which was in the circle. Even after sizing the image down, this area was still to big to for me to correct fully without adding more colour to the image, which would of course increase its file size. I chose an earth tone colour that complimented the pale yellow of the number, as well as the bolder yellow in the gradient. Another option here would have been to just use black, but that tended to wash out the bottom of the circle where the gradient fades to the dark red.
4. The last thing I did was to use the same pale yellow in the number, [the lightest yellow in the 216 palette - FFFFCC] to create the illusion of a hard plastic surface on the handle part of the image. All I did was create a 2 pixel straight line with the pale yellow, and position it a quarter of the way down from the top of the handle.

This 'colour trick' can be valuable for creating such effects as this, and will keep file sizes to a minimum while retaining the image's original quality; because the line is a solid colour and not another gradient laid on top of the first one. More importantly though, no blurring has to be applied to it, so no intermediate colours are introduced into the image that will later create blotches or pixelated artifacts, as well as greatly increase the image's file size, when we save the image.