HTML programming

If that isn’t good enough, try including Picturefill with your web pages. Picturefill is an example of a polyfill, a script that makes older browsers behave as though they support a new technology—in this case, responsive images. It was created by Scott Jehl of Filament Group, creators of many fine responsive design and frontend development tools. Go to scottjehl.github.io/ picturefill/ to download the script and read the very thorough tutorial on how it works and how to use it.

Responsive Images Summary This has been a long discussion about responsive images, and we’ve really only scratched the surface. We’ve looked at how to use the img element with srcset and sizes to make pixel-ratio-based and viewport-size-based selections (you can try them yourself in EXERCISE 7-3). We also saw how the picture element can be used for art-direction-based and image-type-based selections.

I’ve kept my examples short and sweet, but know that it is possible to com- bine techniques in different ways, often resulting in a tower of code for each image. To see some examples of how these responsive image techniques might be combined to target more than one condition, I recommend Andreas Bovens’s article “Responsive Images: Use Cases and Documented Code Snippets to Get You Started” on the Dev.Opera site (dev.opera.com/articles/ responsive-images/).

I also recommend the 10-part “Responsive Images 101” tutorial by Jason Grigsby at Cloud Four. He goes into a bit more detail than I was able to here and provides links to other good resources. Start with “Part 1: Definitions” (cloudfour.com/thinks/responsive-images-101-definitions/).

B rOWS E r SU P PO rt t I P

The site CanIUse.com is a great tool for checking on the browser support for HTML, CSS, and other frontend web technologies. Type in picture, srcset, or sizes to see where browser support stands.

EXERCISE 7-3. Adding responsive images

Ready to try out some of this responsive image stuff? I recommend downloading the latest version of Google Chrome (google.com/chrome/) or Firefox (firefox.com) so you are certain it supports the responsive image HTML features. The materials for this exercise are provided at learningwebdesign.com/5e/materials. Use the responsivegallery directory that contains a starter HTML file and images directory.

We’re going to give the Black Goose Bistro Gallery page a makeover using responsive images. Now, instead of the user clicking a thumbnail and going to a separate page, the large images appear right on the page and resize to fill the available space. Small devices and browsers that don’t support picture get a 400-pixel-square version of each image (FIGURE 7-15).

1. Open the file index.html located in the responsivegallery directory in a text or HTML editor. I’ve added a meta element that sets the viewport to the same size as the device width, which is required to make this page responsive. I also added a style for img elements that sets their maximum width to 100% of the available space. That is the bit that makes the images scale down for smaller screen widths. We’ll talk a lot more about

Part II. HTML for Structure

Responsive Image Markup

156

Small devices like the iPhone show the cropped 400-pixel-square image.

On viewports larger than 480 pixels, like the iPad shown here, the full version of the image is used. It resizes to fill the available width of the page between the margins.

On very large desktop displays, the full version of the image resizes to fill the available width.

Browsers that do not support picture display the 400-pixel-square image specified by the img element.

FIGURE 7-15. The Black Goose Bistro Gallery with responsive images in place. Smaller devices see a square cropped version of the image. Larger browsers get the full image that resizes to fill the content width.

responsive design in Chapter 17, so don’t worry about it too much now. I just wanted to point out changes from our previous exercise.

2. Because we want to change between horizontal and square versions of the image on this page, we’ll need to use the picture element. Start by adding the bare bones of a picture element in the first paragraph after “Our Baked Goods,” including the picture wrapper and its required img element. The img element points to the default square version of the image (bread-400.jpg). Add a line break element after the picture element to start the text on the next line: →

7. Adding Images

Responsive Image Markup

157

<p> <picture> <img src="images/bread-400.jpg" alt="close-up of sliced rustic bread"> </picture> <br>We start our day…

3. That takes care of small devices and the fallback for non-supporting devices. Now add a source element that tells browser to use a 1200-pixel-wide landscape version of the image when the viewport is larger than 480 pixels:

<p> <picture> <source media="(min-width: 480px)" srcset="images/bread-1200.jpg"> <img src="images/bread-400.jpg" alt="close-up of sliced rustic bread"> </picture> <br>We start our day…

Note that because there is only one image specified in the source, we could have used a simple src attribute here, but we have more work to do, so the srcset gets us ready for the next step.

4. Because we don’t want to force such a large image on everyone, let’s give the browser an 800-pixel-wide version as well. (Even more versions would be useful, but for the sake of keeping this exercise manageable, we’ll stop at two.) Remember that the srcset attribute specifies a comma-separated list of images and their respective pixel widths with w-descriptors. I’ve added the 1200w descriptor to the original image and added the 800-pixel option to the srcset. Finally, use the sizes attribute to let the browser know that the image will occupy 80% of the viewport width (the style sheet adds a 10% margin on the left and right sides, leaving 80% for the content). Now the browser can choose the most appropriate size.

<p> <picture> <source media="(min-width: 480px)" srcset="images/bread-1200.jpg 1200w, images/bread-800.jpg 800w" sizes="80vw"> <img src="images/bread-400.jpg" alt="close-up of sliced rustic bread"> </picture> <br>We start our day…

5. Save the file. Launch the Chrome or Firefox desktop browser and resize the window to as narrow as it will go. Open index.html and you should see the square cropped version of the bread photo. Slowly drag the corner of the browser window to make the window wider. When it gets wider than 480 pixels, it should switch to the full version of the photo. If you see a little “800” in the corner of the image, that means the browser has downloaded bread-800.jpg for this task. Keep expanding the window, and the image should keep getting larger. If you see “1200,” it means it is using bread-1200.jpg. Once the larger image is in the browser’s cache, you won’t see the 800-pixel version again. Try making the window narrow and wide again and watch what changes. Congratulations! You are now an official responsive web designer! Making windows narrow and wide is how we spend a good portion of our workday.

6. Add the remaining two images to the page, following my example. Try experimenting with different min- and max-widths in the media attribute.

EXERCISE 7-3. Continued

NOTE

If you don’t see the images at all, it could be that your pathnames are incorrect or the images directory hasn’t copied to your computer.

Part II. HTML for Structure

Responsive Image Markup

158