Just throwing this out there. A very simple plugin for jQuery to handle images when javascript is already required and/or indexing isn’t important.
It simply allows you to define two images via the data-* attributes and select them based on whether the browser/system is in a HiDPI mode.
Normal HiDPI caveats apply:
- This requires javascript. It is impossible to stop the browser from downloading the contents of the src attribute in an image tag in client-side code. Which means that the src attribute is left blank and if javascript is not enabled, no images will be displayed.
- This isn’t indexed. Related to above, the src attribute isn’t used and there is no standard for applying alternate images which is indexable.
The one big advantage is that this avoids the double download issue where a HiDPI browser would download the contents of the src attribute and then a larger image after that.
Hopefully a proper fix such as the picture element will be implemented in major browsers and polyfills created so that we can use it before too long. In the mean time…
I present: jquery.hidpi