[Translation] HTML5 Responsive Image

Adaptive images are one of the problems of Responsive Web Design. You may have started using high-res images for high-resolution displays and reducing their size for devices with lower display resolutions, which simply eats traffic without any benefit for owners of devices with low-resolution displays. Or still use low-resolution images that look awful on large screens and high-resolution displays. To solve this problem, many hacks were created.

I was upset by the fact that there is still no specification for adaptive images. In November of 2011, I proposed the picture tag . This element uses the video tag mechanism paired with Media Queries:
')

 <picture alt="angry pirate"> <source src=hires.png media="min-width:800px"> <source src=midres.png media="min-width:480px"> <source src=lores.png> <!--      --> <img src=midres.png alt="angry pirate"> </picture> 

At the same time, others proposed a similar specification , after which the W3C group was created to discuss the adaptive image specifications.

However, in January, HTML5 editor Ian Hickson wrote:

Why do this for the img tag? Usually the img element is used for images in content that you do not need to make responsive.

Later, Edward O'Connor from Apple suggested another method, use the srcset attribute for the img element. This complements the similar offer of the new CSS image-set property, which has already been added to WebKit:

<img src="foo-lores.jpg"
srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
alt="decent alt text for foo.">

The values ​​“2x” and “6.5x” inform the browser of the relative resolution; foo-hires.jpg 2 times the original image, and foo-superduperhires.jpg 6.5 times. A couple of days later this offer was added to the specification .

There are two main differences between the proposed picture element and the srcset attribute. The most obvious is that the srcset attribute is used in the img element, which was originally intended for images. And that's great.

The second difference is that using the srcset attribute does not provide for Media Queries. Although using Media Queries, it is possible to set parameters for any resolution, device orientation, dpi, color depth and aspect ratio. On the other hand, setting the Media Queries for each image variant may lead to an increase in the code several times.

O'Connor wrote:

Why do I suggest a scaling factor, not a media queries? Media Queries work at the expense of User Agent data, we are discussing the relationship between different image variants. Also, the User Agent should be able to freely choose the version of the image that is best suited for the current state, taking into account not only the parameters set using the Media Queries, but also the dimensions specified by the img element using CSS, and maybe even the current page scaling value.

I like the idea of ​​allowing the browser to choose the most appropriate version of the image based on such data as the speed of information reception, delay, ppi, device orientation, etc. The idea is to free the developer from the need to describe the conditions under which one or another version of the image should be used. You need to specify only the data on the image, size and density, and the browser itself will decide what is best to use in this situation.

The proposed srcset attribute has two drawbacks. The first one is very subjective, but many will agree with me: the specification that it is now has a terrible syntax:

<img src="face-600-200-at-1.jpeg" alt=""
srcset="face-600-200-at-1.jpeg 600w 200h 1x,
face-600-200-at-2.jpeg 600w 200h 2x,
face-icon.png 200w 200h">

Of course, this can and should be corrected. It's not just the aesthetics of the code. If the syntax is too confused, it will be used incorrectly.

The second problem is that developers do not want to lose the ability to control the process. This is a question of losing the visual meaning of the visual content (read the paragraph “Do I care about art direction?” ) And many are convinced that Apple did not think about it. Although supporters of srcset hold the opposite opinion .

Source: HTML5 adaptive images: end of round one

Useful links:
- A little about holivar between developers
- Which responsive images solution should you use?