Website Image Optimization
Content is without doubt the most important part of a website, but
the quality of the images on your website can make the difference as
to whether your visitors
stay long enough to read your content. To make the images look as good
as possible, it is necessary to optimize your images before uploading
them to your website.
Why optimize website images
Changing the size of a website image
What image file format is best
Very simply, speed. Your visitors will not stay around forever to
wait for your website to load, so the images need to be as small as
possible. For this you will need a competent image manipulation program.
If you have the money, or wish to become a professional, then Adobe
PhotoShop is the only option, but it comes at a price. For a good
cheaper package, look no further than Corel
Paint Shop Pro which will probably do all you need for now and
for quite some time to come.
When you have created a new image, always choose to optimize it before
or in the process of saving and you will get a much smaller file without
compromising image quality. This should not be confused with the level
of compression which is applied to jpg images which does effect the
quality of the image.
What do I mean about changing the size of an image, won't the webserver
do that for me? Well yes it will, but that's not a good thing.
An image is a fixed size and can be anything from 1Kb to multiple
megabytes as produced by high definition digital cameras. Trouble is,
whatever size it is on the page, it all has to be downloaded to be
viewed. Say for instance you wanted a thumbnail of a picture you had
taken which was 5000x4000 pixels. You could use the height and width attributes
for the image to make it 100x90 on the webpage, but it would still
take a noticable amount of time to appear on the visitors screen. It
would also appear to be blocky as the browser will show an approximation
of the image and therefore losing detail.
If however you resized the image in a competent graphics program and
saved it at the resolution of 100x90 you would get a much crisper image.
One important thing to mention is that when you resize an image, increase
the number of colours to 16 million if you can, as if you try to resize
an image with a colour depth of 256 colours for example, you will risk
getting jagged lines in the finished image. It is best to do this even
when the image will eventually
be 256 colours by first increasing the colour depth, resizing and then
decreasing the colour depth again.
It is also best to keep the same aspect ratio when resizing as you
will distort the picture if you don't. If you need to size an image
to fit with something already on the webpage and the aspect ratio won't
fit, then resize it with the correct aspect ratio until either the
height or width matches what you need,
and
the other
dimension
is larger then you want. Finally crop the image to fit by removing
the excess from the image.
To keep this simple, I will deal with the two main image types used
on the Internet.
1. GIF - stands for Graphics Interchange Format, a bit-mapped
graphics file format. GIF supports color and various resolutions.
Unlike JPG, the GIF format is a lossless compression technique and
it supports
only 256 colors. GIF is better than JPG for images with only a few
distinct colors, such as line drawings, black and white images and
small text that is only a few pixels high. With an animation editor,
GIF images can be put together for animated images. GIF also supports
transparency, where the background colour can be set to transparent
in order to let the colour on the underlying Web page to show through.
2. JPG - Short for Joint Photographic Experts Group, the original
name of the committee that wrote the standard. JPG is a lossy compression
technique that is designed to compress color and grayscale continuous-tone
images.
The information that is discarded in the compression is information
that the human eye cannot detect. Because of information being lost
when the image is compressed, repeated saving of JPG's leads to 'artifacts'
or distinct patterns often around the edges of different areas
of colour. If you do intend to work on a JPG, it is best to save
the new image as a new file in case you need to go back to the original.
JPG images support 16 million colors and are best suited for photographs
and
complex
graphics.
The user typically has to compromise on either the quality of the image
or the size of the file. JPG does not work well on line drawings,
the image loses clarity and sharpness.
