|
|
--oo00oo--
| Gif
v Jpeg |
A long raging
argument is which is better, Gif or Jpeg. Gif only gives you a palette of 256
colours, where as Jpeg gives you 16.7 million.
You can create areas of transparency with a Gif file, but not
with a Jpeg. Jpeg files are usually smaller, and compress better, but Gifs do
not lose quality when compressing, Jpegs throw away data and the quality of the
image drops the more a jpeg is compressed.
In my opinion, stick to Gif files for graphics that need
transparency, titles, logos and other artwork, and use Jpeg for photographs and
similar larger pieces
|
|
| Antialiasing |
Anti What?
Antialiasing is the process of making a graphic look smoother. Many web sites
you see have logos, images and so on, and many of the bad sites don't use
antialiasing. The graphics appear to have rough edges, loose detail and look
out of place.
Antialiasing works by shading the pixels between hard edges,
making the transition look smoother.
|
Non Antialiased, note this uses 2 colours and is a smaller file |
Antialiased, but uses 17 colours |
| Background
colours and antialiasing |
However, those
web sites that do use antialiasing, often use it badly. When the graphic is
created, the artist may have put it on a white background. But lets say that
the graphic is a logo, which is intended to go on a blue background, and the
white area is to be made transparent. The effect is
that the logo has a grey rim around it, why, because in the process of
antialiasing, it too the pixels between the white background and the logo and
turned them into shades of grey, to make the edge appear smoother.
The way to stop this fringing is to create the graphic on the
same coloured background as the final web page.
|
Antialiased, but for an orange background |
Exactly the same file as above, but on an orange background. |
| Good
Practice |
Whenever you
are creating a HTML document, specify the height and width in pixels of the
image. This tells the web browser how much room to leave for the image, and
speeds up loading. FrontPage does this automatically. It's
also good practice to give the image some alternative text, which appears
before the image loads, and in some browsers, as a tool tip. An image is
inserted into a web page using the <IMG> tag. Here's an example :
<img src="images/oxo1.gif"
width="109" height="40" alt="oxo1.gif (1235
bytes)">
This says that the image file is in the images subdirectory and it's called
oxo1.gif. It's 109 pixels wide by 40 heigh. The alt= is the alternative text to
display while loading. |
| Optimisation |
In order to achieve faster
loading graphics, you can do 2 things with Gif's, and 3 with Jpegs. With both,
you can reduce the number of colours used, and chop off unnecessary wasted
space.
For example, if you wanted a logo with a border of about 50 pixels to it's
right, there are better ways than to leave an area of 50 pixels blank in the
image. You could use a table. Chopping off that wasted space and using a table
saves lots of download time.
You can reduce the number of colours in an image, but you have to be careful not
to make it look bland (unless that was what you wanted).
With Jpeg's you can up the compression level. This lowers the quality though.
See the resources
section for a great Gif optimiser.
|
|
