|
There are 4 golden rules with images in web pages, and you
have already encountered the first. They are:
- Use the correct file format for the image, true colour
to JPEG, 256 colours or less to GIF.
- Add size information into the image tag in your HTML,
using the height and width commands.
- Size the image to the correct size in your paint
program not in the browser.
- Reuse your images where you can.
Use the correct format
Okay, you know to use JPEG for photographs! What else do
you need to know?
How to make each format work for you. The main tip with
JPEG is to create the image, and make all of the changes in a format that
suffers no losses, such as TIFF. The losses in JPEG are cumulative, if you save
the file with one level of compression, and then open and save it again, with
the same level of compression, the algorithm is applied twice, and the image
quality degrades very rapidly indeed. If, however the file is saved as TIFF, no
quality is lost during saving, and so the image can be saved numerous times
during editing without compromising the image quality. When you are happy, save
the final version as a TIFF, and then export the image as a JPEG.
Working with compression. If you use a paint package that
will give a preview image as you save, use it. This is available in a lot of
packages, and allows you to judge the quality of the final image before you
save it. Changes in the compression levels applied to the JPEG file can then be
optimised by eye, giving the best possible output with the minimum file
size.
The big tip with GIF files is the colour depth. By
default, GIF images are assumed to be 256 colours, and so a 256 colour palette
is saved with the file. If the image only contains 123 different colours, then
saving this with a 256 colour palette is just adding additional, unnecessary
information. This is truer when a file has only a few colours. Try adjusting
the colour depth of the image to 16 or less colours, keeping an eye on the
quality of the output. Watch the difference in file size when you save with a
smaller colour palette.
Use browser height and width commands with
images.
This is something which is easy to miss, but can save time
when a page is being downloaded due to the way that browsers work. Most
browsers maintain more than one connection to the web server when pages are
being downloaded. The first file to be downloaded is the HTML file, with all
linked and embedded files following afterwards. Typically the browser will
manage four web server requests at any one time, and will not make a further
request until one item has been cleared.
By specifying height and width information, the browser
knows how much space to leave in the web page for the documents, and so can
complete the HTML page request at the bottom of the document. If you do not
specify height and width information for your images the HTML file will not be
closed until all of the images have been downloaded. So one of the channels is
closed to your images, increasing the wait time for the page too fully
load.
This is one of the most simple to achieve performance
enhancements, and it costs next to nothing.
Size the image to the correct size in the
paint program, not the browser.
Having added your height and width information to your
image tags, you now need to make sure you don’t abuse them. Browsers will
allow you to add any height and width combination you want, and the browser
will fit your image to the box. This may sound perfect, but it will only slow
your page loading time down, or reduce the quality of your images – apart
from one specific application.
This problem usually occurs when a large image is squeezed
in the browser to fit into a smaller gap. Point 1 – you will de
downloading more information than is required for the size of the image,
resulting in worse performance. Point 2 – the browser has to render the
information in a different way to that stored in the file, resulting in another
performance hit. Point 3 – your paint program will be much better at
producing the scaling than your browser, so the image quality will be worse.
Not doing it properly is laziness, and the performance hit could just lose you
business.
The other manifestation of this is to expand a small
image. Digital size enhancement is not very good in a paint package designed to
do it, and it is much worse in a browser. Make the image the right size in the
first place, or suffer the smaller than desired, but decent quality image. If
you must expand a picture, do it in the paint program, the results will be
better.
What about this one specific application? Look at the
lines bordering this page. They are simple shades of one colour, and so to save
on download time, the file loaded is a single pixel GIF file. This single pixel
is then sized by the browser to our required dimensions. There is no loss in
quality, and the single pixel is tiny, so this is a winner.
Reuse your images.
Every time you download an image, it takes time. But here
you’re the browser will help, If its is configured correctly. Once an
image is downloaded it is stored on the users computer for a period of time.
While the image is stored locally, this version is used if the image is called
again. Loading from the local disk is vastly faster than loading through a
modem, so these locally stored images seem to arrive instantly.
Make use of this, reuse images. You get a performance hit
the first time the image is downloaded, but each subsequent time it is required
it appears as if by magic. Think about this in the design phase. You can design
complex images in small parts, building the final image from the sum of the
parts. But some of these parts can be repeated files, or possibly be areas of a
single colour. These would be ideal candidates for single, sized pixels, and
for reused image files. |
