|
When the web was in its nascent stages,
it was homogenous in design. The pages were almost identical
with most of them having a white/gray background with black
text. The only different aspect was the colored hypertext links
and the headings using common HTML header tags. It was only with
the surfacing of GUI interfaces that the web gained popularity.
However the relationship between computers and images can be
traced back to 1965, to Ivan Sutherland's Sketchpad project,
which showed viability of computerized creation, alteration and
storage of pictures. Today's
professional website design depends
heavily on the use of images to promote brands and the recall of
their websites all over the world.
Computer graphics most commonly fall into
two distinct groups: vector and bitmap. First up, we will go
into detail about bitmap graphics, which are usually created by
using the common tools like Photoshop and Paint Shop Pro. Well
known bitmap formats include PSD, PICT, BMP and TIFF.
These variations are never used for the
web because their file size becomes too large which in turn
slows down the downloading time and affects the pages usability.
As the saying goes "If you don't have fast images, you don't
have fast pages." Other options such as tweaking HTML code,
incorporating style sheets and shortening sentences all have
minimal effect on file size when compared to file size of
images. Since file size is given so much priority in electronic
publishing, its compression is necessary, which is not decreased
resolution but simply making the file smaller.
Types of bitmap graphics
1. GIF images:- The most widely used
formats on
professional website design at present are GIF
(Graphic Interchange Format) and JPG/JPEG (Joint Photographic
Experts Group). They are made up of pixels i.e. tiny square
picture elements which when seen from a distance looks like a
smooth image. A small piece of computer memory is allocated to
store each individual pixel. Hence an image scaled to 75% will
consume less memory than the same image at 100% in size.
Professional website design can maintain quick
downloads if they utilize the capabilities of the image formats.
For example GIF images can be interlaced, animated and made
transparent. Interlaced GIF images are those which when
downloaded, at first look blurred and like blocks but eventually
become smooth as their resolution sharpens. From a usability
point of view this technique is usually opted for because it
provides the user with something to focus on before it is
completely downloaded. However, interlaced GIF images serve
their purpose on non-essential graphics, they only frustrate end
users when used on essential graphics as a navigation icon, for
example must be seen in order to fulfill its function.
The most common practice while creating
images is to make them as square or rectangular files. However
one can create the illusion of irregular shaped images by making
the pixels in an image transparent. In animated GIF images you
can combine numerous images to store them as a single GIF image.
When these numerous images are shown rapidly together, they form
animation. Some advantages with GIF images are that they are
easy to create enjoy browser support and the user requires no
additional plug-ins to play them.
2. JPEG images:- JPEGs compress the files
in 24 bit-color. Designed particularly for photographic images,
they are able to handle color gradations with ease but handle
solid color blocks poorly.
Vector Graphics: - A popular, highly
usable and aesthetically superior image format that is slowly
but steadily taking over the popularity of bitmap images on the
web. They are formed on the basis of mathematical formula. A
bitmap creation uses a relatively large amount of computer
memory; however the same image could be described in vector
format by a simple mathematical instruction.
Vector Graphics Vs. Bitmap Graphics
1. The huge advantage with Vector graphics is that they are
resolution independent or scalable i.e. their size can be
changed as per their output device such as a printer without
blocking more disk space. For professional website design
usability it means that the download time for an image will be
the same no matter the size.
2. With vector graphics the sharpness of the resolution will
remain the same even if scaled to a different size whereas a
bitmap image will lose its smoothness and sharpness if changed.
This ease in scaling is the main factors that rates vector
higher than bitmap among professionals and makes it irresistible
to
professional website design.
3. Bitmap formats are the standard
graphic file formats on the web at present, which means that
vector graphics have to be fixed in order to be displayed in
current browsers.
The code can be written within HTML code,
eliminating the need for additional files in contrast to flash,
which uses additional binary files. Vector graphics can be
manipulated using JavaScript, which means that effects such as
animation and rollover effects could be applied. Reining the
attribute capabilities of images has huge potential for
retrieving the image.
Positioning of vector graphics will be
determined using CSS. By harnessing the power of CSS vector
graphics will be capable of grouping and layering and will be
able to incorporate text and be named, which allows them to be
used for scripting. They can be defined and used elsewhere much
like the class attributes of CSS. The use of the vector graphics
has only just been tapped and it has tremendous possibilities in
the future for
professional website design.
Download this Article in PDF Format
If you do
not have Acrobat Reader,
Download Here
More Articles on
Website Design & Development India
| 
