In the world of responsive web design one core—yet complicated, spec can net you substantial reductions in page size across the device spectrum. In Part 1 "How to use Responsive Images" we learned about a general common sense approach to the srcset and sizes attributes and some quirky behavior you’re likely to encounter while working with them.
In this post I’ll dive into how we do responsive images at scale at Webflow, and walk through a runable code demo that distills our automated responsive image processing stack into a single file to get you started automating your own workflow.
You certainly don’t need to in order to follow along with this article, but if you’re so inclined now might be a good time to switch over to the demo code, you can follow along with the in-code comments and use this part of the post as an augmented guide for deeper explanation.
Let’s dive in!