While the sizes of images can be specified using HTML width and height attributes on the <img> element, only the size of one image can be controlled at a time. In contrast, CSS allows you to control the size of multiple images simultaneously, the same way that the size of other elements can be controlled, using the width and height properties, which are non-inherited. Using CSS to control image size is especially useful because images on Web pages are often organized in groups in which all images in a group are the same size. For example, the images in the same row, column, or area are typically made the same size. This projects the sense of organization within a page and consistency across pages, all of which contribute to the extent to which users judge website pages to be aesthetically pleasing.
Furthermore, specifying image sizes, rather than leaving it for the browser to determine them in relation to the rest of the content of a page, can make the loading of a page go faster, as the browser can go ahead and load the rest of the page, leaving the space to fit in the images, which usually take longer than text to download. One of the most efficient ways of controlling the sizes of multiple images is to assign the respective <img> elements to the same class, for which a CSS rule is then defined that specifies the required width and height. Figure 15.1 shows how this is done, and Figure 15.2 the rendered result. Each <img> element is assigned to a class and width and height properties specified for that class.
1. Specifying the Quality of Resized Images
When an image is scaled up or down, its quality may also be altered. By default, the browser decides on how to manage this process, determining, for example, which images to degrade more than others, if at all, and by what degree, all of which may or may not produce the desired results for specific contexts. For example, the browser may decide to smooth a pixelated image even though you want to display the image with the pixelation preserved. The CSS image-rendering property is provided to address this problem and allows you to specify how the browser should manage quality of scaled images. It is inherited and the values it takes are listed in Table 15.1. As of time of writing, the property is supported by only Opera and Chrome browsers.
Figure 15.3 shows how the property is used and Figure 15.4 the effects of all the values as rendered in the Chrome browser. The original image before scaling up is 25 x 25 pixels, which upon scaling up 3x (i.e., to 75 x 75, as shown in the code) got visibly degraded and pixelated.
2. Specifying Size for Responsive Images
In Chapter 6, how to specify responsive images was explained. As mentioned there, although the dimensions of an image are best specified using the HTML width and height attributes because this ensures faster and cleaner rendering of pages, these dimensions can also be specified using CSS. This is done using the width and height properties and the @media rule CSS at-rule, which allows these properties to be set for the image source specified in a <source> element. The at-rule takes a media condition and the CSS rule for specifying the width and height properties. As it will be shown in Chapter 21, the rule is also used in creating responsive layouts. Figure 15.5 shows an example of how the dimensions of responsive images are specified.
In the example, the #size{} rule specifies the dimensions for the image specified in the <img> element, the @media(min-width: 960px) {} rule specifies a different #size{} rule for the specified media condition, and the @media(min-width: 1200px) {} does similar. This means that when a condition is true, the srcset attribute provides the corresponding image source to the <img> element to embed and the #size{} rule provides the dimensions of the image. If none of the conditions are true, the image in the <img> element’s src attribute is embedded and its dimensions are provided by the #size{}. To ensure that browsers that do not support CSS and the <picture> element have access to the image in the <img> element, the width and height attributes can be used on the element and CSS used for other browsers. Figure 15.6 shows how to do this, using the scoped attribute on the <style> element.
In the example, when a condition is true, the srcset provides the corresponding image source for the <img> element to embed and the #size{} in the <style> element that matches the condition specifies the dimensions of the image. If no condition is true, the image source and the dimensions specified in the <img> element are used.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.