Sunday, October 18, 2009


Kia ora tātou – Hello Everyone
Open new window at Bentham Manor
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

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

Coloured Shapes
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.

Image PixelationImages 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.

Ngā mihi nui – Best wishes


peter said...

Hello Webmaster,

I'm a webmaster for website, I've found your website information and advice to be a very good fit for our visitors so could you please give us the best price for a site wide link on your esteemed website for a period of half and 1 Year? We will make payments Via PayPal so if interested, please mention your PayPal id.

If we are happy with your price, then we will send you the Link details that you can place on your website and we will make the payments to the PayPal id provided by you.

Peter Freeman

Blogger In Middle-earth said...

Kia ora e Peter.

I accept your appreciation of the material on this blog and I am flattered.

I don't advertise except those related to nonprofit educational initiatives, however, and I advise my commenters not to put advertisement material in their comments.

Further to this, I am grateful to Google, the provider of my blog, for not pasting adverts on this site. So you see, it's more than just a single matter of principle.

Thank you for the offer.


Sue Waters said...

"Most image hosting websites, including blogs and social network sites, optimise images automatically."

Totally agree with image hosting websites and social networking sites but that isn't always the case with blogging platforms.

I can't explain it properly but WordPress doesn't exactly optimise the image automatically.

The size of the photo in the blog post is smaller but if you clicked on the image it will open up to the full size of the photo. For example, if you upload a 3 MB photo it will still be 3 MB when you expand to full size. If someone has lots of these types of photos on their blog page you will see a dramatic slowing down of the load speed of their blog.

Blogger In Middle-earth said...

Kia ora e Sue!

Thanks for this.

In Blogger, there is optimisation. I use the feature you have described. But in most instances I've found optimisation to the extent that a 3Mb file is rendered to less than 500Kb, like the scene in this post. Here the image is just over 33 Kb when displayed in the post and 482 Kb when expanded. The original was 2.59Mb, which means a significant optimisation.

But even 480Kb is too large for most purposes considering the effective display size can be around 40Kb. So it's always a good idea to optimise unless there is some special purpose intended.

Catchya later.