Optimizing Images for the Web
Image size and 72 ppi
When talking about images, you’ll often hear the term resolution. This refers to how many dotsof ink or pixels of light are used per inch of an image. The more dots or pixels per inch (ppi), thehigher the image’s resolution. Printing on most paper requires high-resolution images—for example, about 300 dots per inch(dpi) or greater for magazines and art books; 180 dots per inch for newspaper—to ensure that theimage won’t be pixelated or blurry.To optimize images for screen viewing, we need to make sure that our pictures will fit on thescreens on which they’re viewed and that they won’t take more time than necessary to download. To do this, we need to know two things:1.We need to know what the most common screen sizes are in pixels: at the moment, theyare 1024 x 768 pixels, although in the developing world 800 x 600 pixel screens are stillcommon.That means that pictures bigger than 800 x 600 or 1024 x 768 pixels will be too big tosee without scrolling. We don’t want that.2.We also need to know the optimal pixel density for on-screen images: it’s about 72 ppi. Thisis often referred to as the “magic number” for on-screen images.With these two pieces of information we can resize our images so that they are aestheticallypleasing and fast to download. For example, imagine you have imported an 8- x 10-inch landscape photo from your camera thathas a pixel density of 300 ppi. The dimensions of this photo would be 2400 x 3000 pixels, way toobig to show on most computer screen. But if we resize it by changing its pixel density to 72 ppi, theimage gets smaller: 576 pixels x 720 pixels. An image this size will not only be easier to render on screen but will also be much smaller inkilobytes, saving storage space and bandwidth.
In addition to the above, we can also save space and bandwidth by making sure we use thecorrect file format.There are four main types of Web image formats:●.bmp, .gif, .jpg, .png The characteristics and best uses of each are outlined in the table of raster image formats below: