HTML and CSS Reference
In-Depth Information
Q:
Do I really need to know all this stuff about image formats
to write good web pages?
A:
No. You can build great web pages without any images.
However, images are a big part of the Web, so some knowledge of
how images work can really help. Sometimes just an image or two
makes the difference between a good page and a great one. There's
a lot to know about images, but it's easy to learn as you go.
Q:
Why does the text need its edges softened?
A:
Check out the two versions of the myPod logo below:
Q:
Why can't I just make the logo background color solid and
match the color to the web page?
A:
You could do that too, but there is one disadvantage: if there
are other things in your web page that are showing through the
transparency, then they won't be seen with the solid color version.
You haven't seen any examples of this yet, but when we get into CSS,
you will.
Q:
What if I change my background color after I make the
matted version?
A:
A slight variation in your background color probably wouldn't be
noticeable; however, if you change the color dramatically, you'll have
to recreate the PNG with a new matte color.
If you're placing a
transparent image in
your web page, make
sure the matte color of
the image matches the
background color of your
web page.
You'll see the top version has very hard, jagged edges and is less
readable. This is the way text is displayed by default on a computer
screen. The second version has had its edges softened using a
technique called
anti-aliasing
. Words that are anti-aliased on a
computer screen are more readable and more pleasant to the eye.
Q:
So where does the matte come in?
A:
The process of anti-aliasing softens the edges relative to the
background color. If you put the bottom version of the logo (from the
previous Q&A) against a colored background, you'd see it has white
edges in it. The Matte option in Photoshop Elements allows you to
specify the color of the background that the text will be placed on, so
when the text is softened it is done so against that color.
Q:
Does this technique just work for text?
A:
No, it works for any lines in your graphics that might result in
“jaggies.” Check out the circle in the myPod logo; it was matted too.
You can use PNG or
GIF format for your
transparent image.
