Responsive Images
Image Attributes: src and srcset
The element img allows an image to be embedded into an HTML document. The path to retrieve the image requires the attribute src, which specifies the location of the image on the server or external web page. This attribute is also used to determine the location of other digital sources, such as audio, video, or JavaScript. The path must be explicity stated in the attribute; to display the following image, the path is written as src="../../images/cookie.webp" to direct the web browser to move two levels up from the current folder and to pull the image from its location in the images folder.
The attribute srcset specifies one or more images to be displayed depending on the browser version, settings, size, or other factors. Using srcset, a developer may enter multiple paths to images, followed by a width descriptor (its intrinsic width in pixels using the w unit) or pixel density descriptor (the condition in which the image should be used as the display's pixel density; if it is 2x, the image should be used when the pixel density is double what is standard). If no condition descriptor is used, the default descriptor is "1x". If a width descriptor is used, the attribute sizes must also be used, or else the srcset will be ignored.
Image Attribute: sizes
When using the srcset attribute with a width descriptor, the sizes attribute is used to specify the layout width of the image depending on a set of media conditions. This works much like CSS @media queries: a different width is specified for each screen-width range stated. For example, an image using srcset and sizes could be written as such:
img srcset="image-200.jpg 200w, image-400.jpg 400w"
sizes="(max-width: 600px) 200px, 400px"
src="image-400.jpg"
This code would direct the browser to display the 200px wide image when the browser window is narrower than 600px, and to display the 400px wide image when the screen is at least 600px wide (for accessibility purposes, valid alt text describing the image must also be provided).
Art Direction
Art direction refers to the altering of images in a web page to display differently based on different display sizes. An image optimized for mobile display may appear low-resolution on a desktop browser; similarly, images where a certain subject or area should ideally be the focus may need adjustment to keep that focus in view when a browser window is resized or its orientation is changed. If not properly sized, some images may become too large, too small, too low-quality, or out of alignment, negatively affecting the aesthetic appeal of a page. Using the above attributes src, srcset, and sizes, along with the HTML element picture, the art direction problem may be mitigated by allowing multiple version of an image or images to display depending on the size or orientation of a browser window.
The picture element contains several source elements, which specify one or more resources for the elements picture, audio, and video. Each element then further contains a media attribute specifying the min-width, max-width, or range of the viewport window; each one is followed by a srcset attribute containing the path of the image to be displayed at that size/range; and finally the picture element is followed by an img element with valid src and alt attributes, which displays the default picture that will appear if none of the media conditions are true, or if the browser does not support the picture element. This final img element must be present, or the browser will not display an image at all.
Art direction is an important concept in formatting responsive images, as allowing for different sized or different quality photos to be displayed at various screen sizes can save bandwidth and improve loading time when accessing a page. If an image is too large to be displayed on mobile, CSS could be used to scale the photo down for mobile display, but this still loads the entire full-sized image. Using proper art direction allows a much smaller image to be displayed, avoiding loading the larger one altogether.
Summary
Responsive image design is an important concept, as it allows for more optimized display of images throughout a variety of browsers and displays. Saving bandwidth and reducing downtime are both important factors in web design, as a page that takes too long to load or does not display images properly is not a page many users will be keen to return to (or stay on at all). Utilizing the elements and attributes described above in the proper way allows a developer to create a more streamlined website and to take more control over the layout and display of their images.