Responsive Web Design: Solutions For Responsive Images

With the limitations that the <img> tag brings along, images have long been a major obstacle when wanting to create truly responsible, fast, responsive websites. Luckily, the upcoming <picture> element and srcset/sizes are about to finally change this. However, even in the meantime, while browser vendors are still busy implementing the new specification, you can already start to incorporate truly responsive images into your website. There are a number of smart solutions to close up the existing gaps: polyfills, fallbacks for legacy browsers, and clever approaches that were created on the fly due to missing alternatives. To help you review and understand different methods, we’ve compiled a selection of the different techniques in this eBook. It features practical advice on every implementation, as well as tips on tackling the art direction and resolution-switching use cases that a growing device landscape has brought along. As you will notice, there is no reason to wait anymore; you can already cater for responsive images today!


TABLE OF CONTENTS:


- Picturefill 2.0: Responsive Images And The Perfect Polyfill

- Responsive Images Done Right: A Guide To <picture> And srcset

- Automate Your Responsive Images With Mobify.js

- One Solution To Responsive Images

- Addressing The Responsive Images Performance Problem: A Case Study

- Clown Car Technique: Solving Adaptive Images In Responsive Web Design

- Simple Responsive Images With CSS Background Images

- Responsive Images With WordPress’ Featured Images

- Responsive Image Container: A Way Forward For Responsive Images?

- Rethinking Responsive SVG