Adaptive images are the current hot topic in conversations about adaptive and
responsive Web design. Why? Because no one likes any of the solutions thus
far. New elements and attributes are being discussed as a solution for what
is, for most of us, a big headache: to provide every user with one image
optimized for their display size and resolution, without wasting time, memory
or bandwidth with a client-side solution.
We have foreground and background images. We have large and small displays. We
have regular and high-resolution displays. We have high-bandwidth and low-
bandwidth connections. We have portrait and landscape orientations.
Some people waste bandwidth (and memory) by sending high-resolution images to
all devices. Others send regular-resolution images to all devices, with the
images looking less crisp on high-resolution displays.
What we really want to do is find the holy grail: the one solution that sends
the image with the most appropriate size and resolution based on the browser
and device making the request that can also be made accessible.
The “clown car” technique is the closest thing we’ve got to a holy grail:
leveraging well-supported media queries, the SVG format and the `<object>`
element to serve ...