 Graphics which are used on web pages can be any size you want, in terms of their length and width, as long as the picture fits on the screen. But just as important as physical size is the amount of memory used to store the picture. This property, called file size, determines how quickly the picture on the web page will load onto your screen, from the site on the internet where it is stored. It's usually measured in kilobytes, or 'k' units, and webpage photos are usually less than 50k in file size. Ones larger than that take too long to appear on your screen, unless you have a fast connection. In general, the bigger the image's physical size, the larger its file size, and the longer it will take to download. For example, have a look at the two pictures below:
But size is not always the determining factor in how large the file size of an image will be. Small images can have large file sizes, and big images can have tiny file sizes! Let's look at some examples ... JPG Images: Images in this format are compressed ... information from the original picture is removed to make the picture have a smaller file size. The difference is usually noticeable; when you remove some of the pixels making up the photograph, it gets fuzzier than the original BMP image, especially when it's printed on paper. But the smaller file size that results makes it worthwhile for web pages. When you convert a detailed BMP picture to a JPG in order to reduce the file size, it is automatically compressed in file size. But you can control how many extra 'bits' are removed from the photo, by choosing how much extra compression you want to apply. The more you compress it (reduce its file size) the fuzzier it gets. Have a look at the two photos below ...  
The usual solution is to pick a compression value somewhere in between, and get a little of both qualities. The picture at the right was compressed by only 15%. It's quality is less than the uncompressed JPG ... it's not quite as sharp. However, this noticeable but small loss in quality is made up for by the fact that this photo is still only 14k in file size ... not as small as the highly compressed one above, but still pretty tiny compared to the other one. It will download very quickly. So you can see that web page images can all be the same physical size (all three pictures are 220 by 257 pixels) but be very different in file size ... ranging from a tiny 8k to a large 48k, depending on the amount of compression applied, and the quality of the image. Let's look at an even more dramatic example ...
O.K., we can't fool you. The picture on the left was saved with no extra compression. It's very sharp ... but its file size is 28k. The picture on the right is much larger, but its file size is only 19k. It was compressed by 40%, and you can see the result ... it's definitely fuzzy, and the colours seem blurred. The amount of compression can be more important than the physical dimensions of the picture, in determining file size. GIF Images: The GIF format is also used for single images, especially ones with transparent backgrounds, and must be used for animations. But since the GIF format allows only 256 colours, rather than the thousands possible in JPG and BMP images, it is usually not used for photographs. When it is (look at some web animated ads that include photos) the colours look strange and 'washed out'. The GIF format works best with solid colours, like text or graphics which have been drawn, and when used this way, will create images that are smaller in file size than JPG images. Moreover, even though GIF images are compressed, the compression is done in a different way, making Gif images 'lossless'... they do not remove information from the picture, so they don't get fuzzy. Here are some examples to show you what we mean ...   The graphic on the left is a JPG saved with 40% compression. It is so blurry, and the colours have changed so much, it's not useable. The background colour isn't even white any more. It doesn't matter how small the file size is, we wouldn't use it. But the one on the right, saved as a JPG without any extra compression at all, is still blurry and dark around the edges! Perhaps it's useable ... but it's 11k. This is what happens when you try to compress a JPG image that is made from solid colours. Now take a look at the GIF image below. It's only 4k ... very tiny ... and it's as sharp as the original BMP text we made. That's why the GIF format is used for solid colour graphics, especially text titles.  (You may be wondering why we don't just use BMP images on a webpage, if they retain their sharpness. Why convert at all? The answer is that they are very large in file size ... the original graphic above was 36k. Also, some web browsers will not display BMP images, so there's no point in using them.) Gif files can also have a transparent background colour. Here are two identical pictures, each with a black background ...   However, we made the colour black transparent in the second one, so you can't see it. That caused the file size to increase from 7.5k to 9k, because the information about transparency is added to the photograph. The black colour is still there in the second photograph, but it isn't being displayed. Because GIF files can contain more than one image, they can be used for animations. The number of colours (including shadowing), as well as the number of frames (individual pictures) within the graphic all have an effect on file size. Here are a pair of animations that illustrate this nicely ...
As more and more users log on to the internet over a fast connection (cable, satellite, or fibre-optic lines), image file size will no longer be an issue, and you will begin to see more and more websites using large, high-quality photographs, since most of their visitors will enjoy fast loading. Even now, our school's Yearbook, for example, uses some very big images for team photos (some as big as 300k in file size), and using our school's reasonably fast wireless connection, they download almost instantly. |
