Introduction to HTML5 image adaptation

Nowadays, mobile Internet is changing with each passing day, and various mobile devices are emerging one after another. After the first appearance of a Retina screen on iPhone 4, this technology is quickly adopted by most smart mobile devices, it will become increasingly popular.

 

But this also puts forward higher requirements for our Web, because we need to adapt to more complex UI solutions.

Adaptive images will be the next issue to be addressed in responsive network design, because we provide different images for screens with different resolutions, such as iPhone 4s AND iMac. It wastes bandwidth and affects the download speed to provide high-resolution images for low-resolution screens, while providing low-resolution images for high-resolution screens has a significant impact on the experience.

HTML5 specifications are discussing native adaptation support for resolution images. One of the more reliable solutions is as follows:

[Html]
Srcset = "foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
Alt = "decent alt text for foo.">
This method introduces a new srcset attribute for the img tag, and uses 2x and 6.5x to tell the browser the adaptive image used for relative resolution of the screen. Note that Media Query is not used.

In addition, the similar image set Scheme (as part of CSS4) has been added to WebKit, for example:

[Html]
Selector {
Background: image-set(url(foo-lowres.png) 1x,
Url(foo-highres.png) 2x) center;
}
The srcset solution is still being discussed and improved, but we can expect a reliable technical solution and standard.

Author: hfahe