On Responsive Images

There is a real need for serving media that is appropriate for the device and circumstance, since we know so little about any particular web request. I recently posted a blog post with so many images on it the page weighed in at 2.29 MB. I should have posted a warning when I tweeted it: “Don’t click this if on a 3G network, it probably take forever, just check it out when you get home.”

Ideally, all those images I served up could have had a lower-res version of themselves that display on browsers with smaller browser window sizes and/or slower connection speeds. Even in cutting edge browsers, there is no native way to do this yet. So it’s a good time to start talking about how we want that to work as web builders. Perhaps we can influence how the spec shapes up.

Let’s limit this conversation to inline raster images. As in, the things today served as <img>. As I see it there are three paths we can go.

  1. Create new element that exists just to serve this problem.
  2. Create a new image format designed to solve this problem.
  3. Do nothing, fix our problems with other technologies.

 

readmore [at] css-tricks.com

Leave Comment


Related Post