What is the best alternative to the deprecated lowsrc for images?
I have two (three in the future) solutions:
Pure CSS. Will work if you only have a single placeholder image for all images being loaded. Just include a background for those images which have
[lowsrc]property and specify some minimal height.Use some JS to set the background. See http://codepen.io/anon/pen/yyQdYJ and set
<body onload>correctly.Future. Currently not working (2015). Similar to #2, but using attr() CSS function one could set the background to the value of
[lowsrc].
All of these solutions work with a background, which doesn't allow to specify the correct height of the image according to the height of it's background.
// Not working yet
img[lowsrc] {
width: 100%;
min-height: 10em;
background-image: attr(lowsrc);
}
They could have kept [lowsrc] working :-/
The W3C Recommendation defining HTML5 has a list of obsolete, nonconforming features, including the lowsrc attribute. Its recommendation is to make a progressive JPEG image whose first scan has the same level of spatial detail as the 50 kB image and whose later scans fill in the extra details in the full 800 kB image. This mechanism presumably requires user agents to use HTTP range requests to determine how much data to retrieve relative to the size at which the image is displayed, just as they use range requests to seek through the source of an audio or video element.
<img src="lowres.jpg" onLoad="this.src='highres.jpg'" width="?" height="?">
This alternate version apparently prevents an infinite requesting loop in Firefox (credit to @Ultimater in the comments):
<img src="lowres.jpg" onLoad="this.src='highres.jpg';this.onload=new Function();" width="?" height="?">