The rising global popularity of smart phones and other small-screen Internet devices has created a number of dilemmas for web developers. Among the most pressing is the issue of serving the proper image files for widely divergent screen sizes.
The industry has responded with a variety of solutions, including separate mobile websites that are much leaner in terms of shown images.
A new attribute, <img srcset>, has the potential to resolve some of the issues by enabling the desired image size, among several options, to be served by a browser. However, this ‘adaptive’ HTML tag has fueled both controversy and an ardent industry debate, as detailed later on.
The attribute syntax consists of an image ‘candidate string’, in which a comma delimits a set of alternate images to be displayed according to a device’s screen size.
Let’s take a closer look at the basic <img srcset> coding:
<img src="desktop.jpg"
srcset="mobile.jpg 400w 2x, medium.jpg 600w"
alt="Adaptive images">The default image is desktop.jpg. If the device screen size is 400px in width, or less, mobile.jpg will be displayed. At 600px, the user-agent can display either mobile.jpg or medium.jpg.
The ‘descriptors’ that provide the necessary information to determine which image should be exhibited are:
400w — maximum viewport width of 400 CSS pixels
2x — maximum pixel density of two device pixels per CSS pixel
Maximum viewport height can be set with the use the ‘#h’ descriptor (ex. 600h)
A few words of explanation about ‘CSS pixels’ vs. ‘device pixels’:
CSS pixels are the ones utilized in CSS declarations, such as width: 200px. The noted size is equivalent to 200 device pixels only when the screen zoom factor is exactly 100%.
When a user utilizes the ‘zoom in’ function, a 200px-width element will occupy a larger portion of the screen and become wider when measured in device pixels, though in CSS pixels it remains the same.
In the above example, suppose that mobile.jpg is 100 x 100px and medium.jpg is 200 x 200px. If the former is selected, the user-agent will calculate the intrinsic size as (100/1) x (100/1) = 100 x 100px. 1x is the default pixel density setting. However, if medium.jpg is chosen, with a 2x density designation the computation will be (200/2) x (200/2) = 100 x 100px. Therefore, the same image size will be on display, but one will be of higher viewing quality.
Practical Uses
The new attribute has any number of practical applications. For instance, say you wanted to maximize the landscape and vertical views of an image in a smart phone. The coding would look something like this:
<img src="landscape.jpeg"
srcset="vertical.jpeg 400w"
alt="Maximized image view in both landscape and vertical orientations.">Another example might be when an image looks great in widescreen format, but needs to be cropped to emphasize the most important features when viewed on more constricted screen:
<img src="widescreen.jpg"
srcset="widescreen_image_cropped.jpg 500w"
alt="Image with essential feature emphasized.">The Controversies
A longstanding debate on the most effective way to enable the capability for adaptive images has set web developers against browser engineers, as well as causing a schism among developers.
The first dispute centers on the browser mandate to display a given web page as quickly as possible. By presenting a number of image options, the <img srcset> tag conflicts with a browser’s pre-fetch function, which downloads all page elements even before the design parameters are known. By causing even a short pause to determine the correct image, a browser would be precluded from loading as swiftly.
Obviously, any such delays run counter to one of the most important goals of any browser maker, all of whom tout blinding speed as a major selling point to attract more users.
Controversy also erupted within the web development community over the new tag, as one working group espoused a preference for dealing with the image size problem via a proposed <picture> tag. Nonetheless, the Web Hypertext Application Technology Working Group (WHATWG) recently went ahead and added the <img srcset> attribute to their HTML specs.
A separate developer bloc, W3C’s Responsive Images Community Group, has created a hybrid coding solution that incorporates both a <picture> tag and the <img srcset> attribute.
Conclusion
Although the new tag has already been added to the WHATWG HTML spec sheet, there appears to be no set consensus that it represents the most effective way to deal with the issue of adapting image files to various screen sizes. Developer working groups are therefore continuing on a collective quest to find a truly all-encompassing solution.
Please let us know what you think in the comment section!
