Astro Lesson #25:amazing.auntie.aliasing

What a busy time of year for all this is! And yet, dear old Retrogrrl still has found the time to prepare a new and informative lesson for her faithful little cosmonauts. Gather round, children and let us tell you a tail of aliasing and anti-aliasing. (Not to be confused with 'aliar, aliar, apants ona fire ....)

aliasing.smith.and.jones

Aliasing is one of the many webby terms bandied around with great gusto yet often not accompanied by an explanation that actually makes sense. One description we found went like this " Aliasing occurs during the rasterisation stage when a continuous polygon is sampled into discrete number of pixels." Yeah, right! Here's the deal ...

If you had a large magnifying glass you would be able to stick your nose up close to this computer screen and see that what you thought was a bewdiful picture is, in fact, composed of hundreds of little dots. Actually speaking, they are pixels. Screens are usually only able to cope with 72 (macs) - 96 (pcs) dpi (dots per inch).

Now, we often talk about dpi in terms of paper printing - high quality printers can manage a whopping 1200 dpi, or your average home printer say around 300. This is one of the reasons web based artwork must be considered in a different light to other graphic projects - magazines, flyers etc. Screen resolution is a lot less superior to print.

These pixels live in a grid-like existence - they like to be cosy and orderly, in nice neat columns and rows. That's very nice. Problem is, we ain't like that. Nature may abhor a vacuum, but it also ain't too keen on straight lines either. Take a look around - the rounded edge, diagonal line, circles, ovals - they're everywhere.

jetison.the.jaggies

So, how does this ol' screen handle our predilection for all things wavy and curly - not all that well as a matter of fact. Because of the low resolution, or smallish number of dots per inch, variations along straight lines and curvy bits often appear jagged or rough - known, not surprisingly, as jaggies. If you are lucky enough to have a graphics program, you will be able to zoom up a piece of artwork or text and see this in action - the pixels stagger themselves to accomodate shapes not falling into the pixel grid. This is called Aliasing. A pixel cannot be broken into pieces - it can't be half filled for instance. Printed on paper at high res, this is not a problem - the sheer number of pixels at 300 dpi for instance, fools the eye into seeing lovely shapes. On screen, it can look yukky.

The solution? Anti-aliasing, the computer's sneaky way of fooling us, (as it is wont to do now and then), into thinking it has created nice smooth lines. How does it do this neat trick? By a complex method of mathematically introducing subtle shades of the colors involved into pixels surrounding the curvy bits - visually blurring the edges so they appear to be smooth. It's clever and it works, but there are a few things to take note of.

aliased - a bit rough around the edges yes?
anti-aliased - talk about a smooth operator!

aliasing.alright.already

Anti-aliasing works real well on large type - there's plenty of room to stuff in lots of extra shaded pixels around the 'offending' squiggly bits. Unfortunately, the opposite is true for teeny weeny type. There just isn't room around the original shapes taken up by the type, and so instead of merely smoothing the characters, you end up with blurry, furry looking letters where the extra colored pixels merge between the elements. No good.

Where do you draw the line? Sometimes it's a matter of experimentation - but usually at around a font size of 12 points, anti-aliasing loses it's effectiveness. It may be better to switch it off and go for aliasing - at that size the jaggies are not so evident and actually help to define the small type. In fact, maybe at this size it would be best to use plain text via HTML, rather than creating a graphic at all.

transparent.troubles

Anti-aliasing will really jump out at you if you create and anti-alias a piece of artwork against a particular color background - say orange - and then try to use it on a differently colored web page - like this creamy yellow. All those extra colored pixels will have been calculated using various shades between the orange and the artwork. It looks gross. The second example, however was made on the same color background as this page.

see the ugly halo? The dropshadow is lost
see - no halo! Just the nice dropshadow

This is especially true with transparent backgrounds (and with dropshadows) - which are possible in GIF format graphics. Transparent GIFs are created by specifying a particular background color, and then when saving in GIF format, selecting that color to be transparent (hey, its simple - the browser gets snobby and ignores that color, causing only the graphic itself to be seen.This is particularly useful when placing text on colored web backgrounds). The limitation here is that only one color can be chosen as transparent - all those subtle variations caused by anti-aliasing can't be included in the transparency and so will still be visible around the edges of the graphic. The solution is to anti-alias against a background matching the web page background, or the artwork itself. On the otherhand, if you think you might be using the same graphic on lots of different backgrounds, steer clear of AA

Remember too that AA adds to file size, as it is intentionally ADDING more colored pixels.

abracadabralias

So, how do you anti-alias? Well, we guess it's theoretically possible to do it by hand - but by golly it would take forever! Luckily for you (and Retrogrrl!) most graphics programs can handle it. Just check the settings make sure you select Anti-Aliasing when required, or switch it off when you really don't want it.

And you thought it was gonna be difficult - nah!

Ah. so much to learn, and so few light years to learn it all in. Begone now, to assimilate these addendums and come back next time for a smattering of something new, something exciting, well - something else.