If That Isn't Good Enough Try Including Picturefill With You

If That Isnt Good Enough Try Including Picturefill With Your Web Pag

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 combine 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/).

Browser Support Tip

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 (see 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.

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.

3. That takes care of small devices and the fallback for non-supporting devices. Now add a source element that tells the browser to use a 1200-pixel-wide landscape version of the image when the viewport is larger than 480 pixels: <source media="(min-width: 480px)" srcset="images/bread-1200.jpg">.

4. To avoid forcing a large image on every user, add another source element specifying an 800-pixel-wide version: <source media="(min-width: 480px)" srcset="images/bread-1200.jpg 1200w, images/bread-800.jpg 800w" sizes="80vw">. The srcset attribute includes the different image options with width descriptors, and the sizes attribute guides the browser on how much display space the image will occupy.

5. Save the file and launch your browser. Resize the window gradually; the image should switch between square and full versions according to the viewport width, and download the appropriate image file. Verify this by observing if the overlayed size indicator changes between 800 and 1200. Continue adding additional images with similar source sets and media queries to create a responsive gallery.

6. Experiment with different min- and max-width values in the media attribute to see how it affects image selection. This hands-on approach enables better understanding of responsive image techniques and browser behaviors.

This exercise illustrates practical implementation of the responsive image techniques discussed earlier. Using the <picture> element combined with srcset and sizes attributes allows developers to optimize images for different devices, improving user experience and performance. Incorporating these methods into web development is vital for creating adaptable, fast-loading, and visually appealing websites that meet modern standards.

Conclusion

Implementing responsive images using the <picture> element, srcset, and sizes attributes significantly enhances website responsiveness across various devices. The addition of polyfills like Picturefill ensures broader browser compatibility, especially with older browsers lacking native support for these features. As web technology evolves, developers must stay informed about evolving standards, browser support, and best practices to optimize visual content delivery effectively. Combining HTML markup techniques with tools like Picturefill and ongoing performance testing ensures that websites are accessible, fast, and visually engaging for all users across the digital landscape.

References

  • Jehl, S. (2014). Responsive images with Picturefill. Scott Jehl's Blog. https://scottjehl.github.io/picturefill/
  • Andreas Bovens. (2013). Responsive Images: Use Cases and Documented Code Snippets. Opera Developer Community. https://dev.opera.com/articles/responsive-images/
  • Grigsby, J. (2014). Responsive Images 101. Cloud Four. https://cloudfour.com/thinks/responsive-images-101-definitions/
  • CanIUse. (2023). Browser support for HTML picture, srcset, and sizes. https://caniuse.com
  • HTML Living Standard. (2023). Responsive images. WHATWG. https://html.spec.whatwg.org/multipage/embedded-content.html#responsive-images
  • W3C. (2020). HTML Standard. https://www.w3.org/TR/html52/
  • W3C. (2020). Responsive Images. CSS-Tricks. https://css-tricks.com/responsive-images/
  • WIPO. (2019). WIPO Intellectual Property Handbook. https://www.wipo.int/about-ip/en/
  • World Trade Organization. (1994). Agreement on Trade-Related Aspects of Intellectual Property Rights. https://www.wto.org
  • United States Patent and Trademark Office. (2023). Guide to Intellectual Property. https://www.uspto.gov

Related Assignments