As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours.

This situation has happened to me many times and I have learned from my mistakes. No more black magic hacks — here are my five favorites techniques to handle image resizing.

the “OMG I NEED THIS ASAP” way

It’s 5:00 pm on Friday, you have to finish this page, but the images won’t fit the layout. It’s time to use your magic trick!

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 this post I’ll demystify the complexity in the responsive images spec so you can use these powerful HTML attributes on your site. In part 2 you will learn how to build your own responsive image workflow, with a code demo that distills our responsive image stack into a single file. Also, we’ll dive into how we automate responsive images at scale processing millions of images at Webflow with AWS Lambda.

Tomorrow I’m speaking at ImageCon. It’s been over a year since I last gave my talk. As I dusted off my presentation and updated it, it seemed like a good time to assess the state of the responsive images.

To start with, we should acknowledge that we’re in fantastic shape compared to where we were in 2010 when I first wrote about responsive images.

The new responsive images standards are available in all current browsers with the exception of Opera Mini. And if your fallback image is optimized for small screens—which it should be—Opera Mini’s lack of support isn’t a problem.

I still get questions from designers and developers who find different behavior from browser to browser. Some of this is by design. We want