Digital cameras and scanners are amazing these days. You can use them to add images to your HTML5 and CSS3 web pages. Even moderately priced cameras can now approach the resolution of old-school analog cameras. Scanners are also capable of taking traditional images and converting them into digital formats that computers use.
In both cases, though, the default image can be in a format that causes problems. Digital images are stored as a series of dots, or pixels. In print, the dots are very close together, but computer screens have larger dots. This image is straight from the digital camera.
This picture (taken on an older digital camera) registers at 6 megapixels (MP). That's a pretty good resolution, but modern digital cameras are much higher. If you print that picture on paper, all those dots are very tiny, and you get a nice picture. If you try to show the same picture on the computer screen, you see only one corner.
This actual picture came out at 2,816 pixels wide by 2,112 pixels tall. You only see a small corner of the image because the screen shots are taken at 1024×768 pixels. Less than a quarter of the image is visible.
When you look at a large image in most browsers, it's automatically resized to fit the page. The cursor usually turns into some kind of magnifying glass, and if you click the image, you can see it in its full size or the smaller size.
Some image viewers take very large images and automatically resize them so they fit the screen. (This is the default behavior of Windows’ default image viewer and most browsers.) The image may appear to be a reasonable size because of this feature, but it'll be huge and difficult to download in an actual web page. Make sure you know the actual size of an image before you use it.
Although shrinking an image so that it can be seen in its entirety is obviously beneficial, there's an even more compelling reason to do so. Each pixel on the screen requires 3 bytes of computer memory. (A byte is the basic unit of memory in a computer.) For comparison purposes, one character of text requires roughly 1 byte.
The uncompressed image of the ship weighs a whopping 17 megabytes (MB). If you think of a word as five characters long, one picture straight from the digital camera takes up the same amount of storage space and transmission time as roughly 3,400,000 words. This image requires nearly three minutes to download on a 56K modem!
In a web page, small images are often shown at about 320×240 pixels, and larger images are often 640×480 pixels. If you use software to resample the image to the size you actually need and use an appropriate compression algorithm, you can get the image to look right.
The new version of the image is the size and file format that is needed, it looks just as good, and it weighs a much more reasonable 88 kilobytes. That's 2 percent of the original image size.
Although this picture is a lot smaller than the original image, it still takes up a lot more memory than text. Even this smaller image takes up as much transmission time and storage space as 1,600 words! It still takes 10 seconds to download without a broadband connection. Use images wisely.
Images are great, but keep some things in mind when you use them:
Make sure the images are worth displaying. Don't use a picture without some good reason because each picture makes your page dramatically slower to access.
Use software to resize your image. You can even use free software to change the image to exactly the size you need.
Use a compressed format. Images are almost never used in their native format on the web because they're just too large. Several formats have emerged that are useful for working with various types of images.