Sizing up Responsive Images: Make a Plan with the Help of These Kittens
Session scheduled at 3:30-4:20 in Room 3 (Ski-U-Mah)
Fun fact: the web is powered by cat photos. But hark, far too many cat photos are larger than they need to be! How can I view as many cat photos as possible on my phone, so I can see every detail of each cute kitty, without them taking forever to download? When I get home, those gorgeous cats absolutely must look fabulous on my large-screen high-resolution monitor, too, so whatever shall I do?
Yes, there are new responsive image specifications for the picture element and the sizes and srcset attributes. Understanding that syntax and various responsive image use cases matter. The trickiest part of using responsive images is figuring out what image sizes are needed to craft a solid solution. Writing responsive image markup without first making a plan could easily lead to a cat-tastrophe!
So while we will discuss the responsive images specification, the main focus of this session will be studying cats. We’ll look at how our cat photos fit into our site’s layout. Once we understand that, we can plan how to create multiple versions of a cat photo. Then we can provide different size options based on the browser width and resolution. We’ll also look at how to more closely crop images at smaller screen sizes, so we don’t have to squint to see kittens, a terrible fate. Finally, we’ll work on changing aspect ratios for larger screens because otherwise cats like to shove the rest of the content off the screen. Oh, cats.
Don’t worry! No cats will be harmed or cloned in this process! Even though cloning cats would create a more purr-fect world.
Presented By
Marc Drummond
As a front-end developer for Lullabot, Marc focuses on creating great experiences no matter the device, browser or abilities of the person accessing a site. Marc is currently writing Drupal 8 Responsive Web Design for Packt Publishing and serves as co-maintainer of Drupal 8’s core Responsive Image and Breakpoint modules. He previously served as the web technologies coordinator for the city of Minnetonka from 2004-2014; he also served on the board of the National Association of Government Web Professionals from 2009-2014, serving as President of the organization from 2013-2014.
Marc earned a BA in English and a concentration in Public Service from Albion College in Michigan, as well as degrees in web design and graphic design at Minneapolis Community & Technical College. Marc enjoys living in the Twin Cities suburbs with his wife and three-year-old daughter, as well as their cat and dog, and getting together regularly with family who live nearby.
Follow @marcdrummond on Twitter