Image

The web image and how it operates are often misunderstood. Hypertext Mark-up Language, more commonly known as html, was invented to process text size, shape and colour on the Web.

When it was realised that html and related codes could be used to handle images, the Internet became a viable commercial medium.

The pixel


Close examination of images, on screen or when printed, shows that they are made up of many coloured spots, dots or squares. These are called pixels. The word pixel (picture-element pix-el) can also refer to the digital information associated directly with the coloured spot, held on a computer or transferred in a download.

What can be confusing is that ‘pixel’ is also used when referring to the smallest element that displays a single spot of coloured light on a monitor or TV screen. These tiny elements are permanent parts of the screen hardware. They are not the same as the pixels in the image that effect the display.

Image file size

A popular misconception is that the dimensions of an image, as it appears on the screen, are to do with the space the image occupies in computer memory or on disk. The term ‘image size’ can also be misleading, though this term refers to the capacity of an image to occupy space in computer memory or on disk. It’s more usual to refer to it as the image ‘file size’, measured in kilobytes or megabytes.

Image dimension


The physical size of an image on the screen is another property that’s often misinterpreted or misunderstood. Images are really two dimensional things. Despite tricks of design, it’s not possible to have an image that is triangular, round or any shape other than rectangular, unless there is some distortional fault with the printer or screen.

An image has a height and a width, which make it easy to define its dimensions. These two lengths are measured in pixels, but can also be given in mm or cm. Though variation tends to be slight, the physical accuracy of image dimensions expressed in metric units varies with the equipment used to display the image.

Optimising image file size

Digital cameras can take pictures with file sizes of several megabytes. There has to be literally tens of millions of pixels in the files so that high quality pictures can be obtained. The fineness of detail that’s displayed from such images is particularly useful if they are to be printed in a large format or viewed with full screen in a picture viewer.

Images show how pixelation increases when file size is reduced

For most web purposes, however, image files of that order of size and quality are not necessary. What’s more, huge image files can occupy valuable resource space on the host site and cause unreasonably long upload or download times.

It’s often prudent to use some form of quality reduction. Adjusting the content of the image so that it gives a satisfactory display with a smaller file size is called optimisation, or optimising the image.

Most image hosting websites, including blogs and social network sites, optimise images automatically. If the images are satisfactorily optimised before uploading to the host site, it can save time, and in some instances be a cost saving too. Sue Waters’ excellent post on Uploading Photos From Digital Cameras Into Blog Posts gives great instruction on using several free packages for doing this.

Bitmapped images

The simplest way of arranging image information in a digital file is when each pixel carries its own information, as in a bitmap. This can be an inefficient way of packing image information, however, so bitmapped images tend to have larger file sizes than other image types of the same quality.

Compressed formats

JPEG, PNG or GIF type images use different systems of file compression. Pixel information that is duplicated, as can happen when the same colours are used over large areas of an image, is stored in a formula within the image file. The result is a smaller file size than that of the equivalent bitmapped file with the same image quality.


One advantage of the GIF compressed file type is that it can also include information on how separate image frames can be constructed. A special type of GIF file can display a cyclical series of frames like a looped movie – the so-called animated GIF.

Vector graphics

The introduction of vector graphic creation tools, such as Adobe Flash Writer, has brought new dimensions to image design and the way images can be displayed. Standard bitmapped images and related image types tend to break up, or pixelate, when enlarged on the screen.

What happens on display is that the information held in the image file is stretched over a larger area than was intended. The result is an image that appears to lose detail and sharpness and may look as if it is made up of chunks of colour, which is precisely how it is composed.

A vector image, on the other hand, does not lose its sharpness or detail when it is enlarged on the screen, simply because there are no pixels in its image construction. True vector images tend to be limited to line diagrams and ones with solid areas of colour, however, and cannot be created from digital camera image files.