Irrespective of how images are created, be it via photography, scanning, or graphics programs, they are stored as image files in specific formats and there many image file formats. These formats provide different features and are suitable for different types of images. While some formats are designed to store all the data that make up an image, others are capable of making an image file size smaller. This is necessary because image file can be large, especially bitmapped image files. The technique of reducing file size in computing is known as data compression. Some formats are designed to reduce file size without affecting the quality of what the file produces. This is known as lossless compression. Other formats are designed to allow the reduction of quality, if necessary. This is known as lossy compression. Image file formats combine both techniques in various ways to achieve their specific characteristics, and graphics production programs typically allow compression parameters to be set for any format that offers compression. Image file formats also offer other features, such as transparency, that make them suitable for different situations. Table 6.5 lists some formats used on the Web, some of which are more commonly used than others.
Given that high-quality images produce very large files, it is often necessary to balance file size against quality when producing images for Web design, because large files can cause performance problems, such as long download time. It is no good, for example, if images are of very high quality and pages take frustratingly long times to display, as most users will probably not be prepared to wait. Similarly, it is no good to compress an image to the point that degradation is visible, as this might compromise the information being communicated and/or user experience. Figure 6.30 shows the same image with different compression levels and their effect on quality and file size. Notice the visible degradation in 75% and 99% compressions.
To help with size-quality balancing, image production programs, such as Photoshop, typically provide information about the size of the file generated by an image and also how long it will take to transmit the file over a range of Internet connection speeds. However, while this information is readily available when using these programs, it can be useful to know how to calculate image file size and transmission time for when, for example, you are doing initial designing on paper and/ or have no access to a suitable program. After all, just because we have calculators does not mean that we should not know how to add, in case calculators are not available.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.