Home > Chapter Review and Exercises > Chapter 7 - Images
A great place to learn about the <picture> element is here:
Great places to learn about the source element and srcset attributeare here:
Chapter 7 focuses on embedding images in the content of the page (It is also possible to add images to a web page as a background image with CSS, which is covered in Chapter 13, Colors and Backgrounds). It is made up of three parts: basic image embedding with the img element, ways to embed SVG images, and responsive image techniques. The img element discussion is a necessary component of basic web design training, and SVG options should be addressed as well, given their rising popularity. I recommend, however, that responsive images (methods for specifying a number of image options for use in responsive layouts) be saved for later in the course because the code is advanced and not strictly required. A logical point to swing back to responsive image markup is when discussing Responsive Web Design (Chapter 17).
In Chapter 7, you will learn the following:
Basic images
The difference between raster and vector images.
Images must be saved in JPEG, PNG, GIF, or SVG formats to be appropriate for web pages. Cutting-edge formats WebP and JPEG-XL are gaining in browser support.
The img element and its attributes.
The purpose and importance of alternative text (using the alt attribute).
SVG images
Basic familiarity with the SVG image format as an XML text document.
Three methods for adding an SVG to a page: img element, object element, and inline with the svg element.
Responsive Image Techniques
Responsive images are a method for providing images tailored to the user’s viewing environment without downloading more image data than necessary.
The four categories of responsive image techniques: image options for high-resolution displays, options for multiple screen sizes, differently cropped versions, and alternative image formats.
Use the srcset attribute in the img element with an x-descriptor to provide image versions targeted to various screen resolutions.
Use the source element with srcset attribute, w-descriptors, and the sizes attribute to provide image versions to be used at a variety of screen sizes.
Use the picture element to provide alternately cropped images based on screen size (the art direction scenario).
Use the picture element to provide alternate image formats, delivering smaller cutting-edge image formats to browsers that support them.
bitmapped image (also called raster image)
Images that are made up of a grid of tiny colored squares (pixels).
vector image
An image made up of mathematically defined paths.
MIME type
A resource’s standardized media type, consisting of a general type (such as “image” or “audio”), a specific media type (such as JPEG or MP3), and a file suffix (.jpeg or .mp3).
replaced element
An element that is replaced by an external file when the page is displayed.
disk cache
Space used by browsers for temporarily storing files on the hard disk.
alternative text
A text alternative to an image for those who are not able to see it.
standalone SVG
An SVG document that is saved in its own file with the .svg suffix.
inline SVG
An SVG that is embedded into an HTML document with the svg root element.
pixel
A square of colored light used by displays to render images.
device pixels (also hardware pixels, physical pixels)
The pixels that make up the screen display on a device.
resolution (ppi)
A measurement of the number of pixels per inch (ppi).
reference pixel (CSS pixels) NOTES
A unit of measurement used by devices for layout purposes. They may or may not match up with the device/hardware pixels.
device-pixel-ratio
The ratio of the number of device/hardware pixels to reference pixels. For example, on a 2x display, there would be two device pixels making up the width of one reference pixel.
x-descriptor
Specifies the target device-pixel-ratio for a srcset attribute value in the img element. They are useful for telling the browser to choose the best image option based on screen resolution.
w-descriptor
Provides the actual pixel width of the image with the srcset attribute. It is part of the system for providing viewport-based image selection.
viewport
The canvas the web page is rendered on, usually corresponding to the size of the screen or browser window.
browser preloader
A function in the browser that fetches images and other external resources from the browser so they are ready to go when the page displays.
media condition
Part of a media query that describes a parameter to test for, such as the width of the viewport.
7-1: Adding and linking images
This exercise provides some practice for adding images to pages using the img element. Thumbnail images are added to a gallery page, then used as links to pages with larger versions of the images. The book lists steps for adding one image and linking it, and there are materials provided for readers to try it five more times.
7-2: Adding an SVG to a page
The exercise starts by making the logo in PNG format very large to see what happens to the image quality. Then it is replaced with an SVG version of the logo, and resized again to see that the quality stays the same. The second part of the exercise adds a row of social icons in SVG format and styles them with CSS rules.
7-3: Adding responsive images
You are walked through the steps for adding responsive images for various screen widths using the source element.
Images are a big part of the web experience. Answer these questions to see how well you’ve absorbed the key concepts of this chapter.
1. Which attributes must be included in every img element?
2. Write the markup for adding an image called furry.jpg that is in the same directory as the current document.
3. Name two reasons to include alternative text for an img element.
4. What might be going wrong if your images don’t appear when you view the page in a browser? There are three possible explanations.
5. What is the difference between an x-descriptor and a w-descriptor?
6. What is the difference between a device pixel and a CSS (reference) pixel?
7. Match the responsive image scenarios with the HTML solutions:
a. <img src="" alt="" srcset="URL x-descriptor">
b. <img src="" alt=" srcset="URL w-descriptor" sizes="#">
c. <picture>
<source type="…" srcset="">
<img src="" alt="">
</picture>
d. <picture>
<source media="()" srcset="">
<img src="" alt="">
</picture>
____ You want the image to always fill the width of the browser window.
____ You want to take advantage of the file savings of the WebP image format.
____ You want to remove the text from an image when it is on small screens.
____ You want your product images to look as sharp as possible on high-resolution screens.
____ You want to show a close-up of the action in a news image on small screens.
____ You want the image to resize smaller when it is part of the layout on a large screen.
8. Challenge question: Describe what this example tells the browser to do:
<picture>
<source sizes="(min-width: 480px) 80vw,
100vw"
srcset="photo-200.webp 200w
photo-400.webp 400w,
photo-800.webp 800w,
photo-1200.webp 1200w"
type="image/webp">
<img src=" photo-400.jpg" alt=""
sizes="(min-width: 480px) 80vw,
100vw"
srcset="photo-200.jpg 200w,
photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w">
</picture>
9. What is cache and how does it affect web page performance?
10. Name one advantage and one disadvantage of adding an SVG to a page with the img element.
11. Name one advantage and one disadvantage of inline SVG.
12. When would it be appropriate to add an SVG to a page as a background image with CSS?
13. What is this bit of code describing, and when might you need to use it?
image/svg+xml