Clown Car Technique: Solving Adaptive Images In Responsive Web Design
By including media queries and image tags within an SVG file you can effectively solve the RWD image issues… but then you’re serving svg images for everything. In this article Estelle Weyl goes deep into the possible solutions.
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.
An excerpt from Clown Car Technique: Solving Adaptive Images In Responsive Web Design