HTML5 provides you with
srcset attribute on
img tags to load resolution-, dimension- or dpi- specific images. But techniques for loading higher DPI images existed since the early days of HTML5 + CSS3 announcement.
Mobile web app developers, especially the ones developing for iOS safari, have been using
-webkit-device-pixel-ratio in media queries to load up normal images for non-retina and images of higher dimension for retina display, squeezed into the same space by adjusting
The same can be achieved for loading images on a standard page
- Set the image src to a transparent 1×1 gif , Data URIs preferred (albeit slow, but we’re talking about a workaround remember?)
- Set the dimension of the images via css (also attributes, because performance)
- Write/Generate some CSS
- Set the background image for the img tag
The only barrier in this approach – dynamic images: Ideally people don’t change the master CSS file for changes in banner images.
The easiest workaround for this problem: Dynamically injected inline CSS straight into the markup that contains the image URLs for the banner images.