The srcset WebKit attribute guide in img tag
The free WebKit engine now supports the srcset attribute of images, IMG elements ( official specification from W3C ). This allows you, as a developer, to use high-resolution images for users using a retina display without harming other users. It is also important to note the presence of an elegant solution for browsers that do not yet support this functionality.
Note the need to use the latest nightly builds of WebKit .
You may know that WebKit supports the -webkit-image-set CSS function for just over a year (Safari from version 6 and Google Chrome from version 21). With this function, it became possible to set the image in the css-properties, depending on the screen resolution, or another playback device, each with a 1x, 2x modifier.
')
This will allow the browser to choose the best option for a particular user device. Before, to support large images, you had several development paths, each with certain disadvantages. You could duplicate CSS code. You could use javascript to query (window.devicePixelRatio) the number of pixels per px. (device pixel ratio) and update images after loading page. Or you could always give away big pictures, thereby forcing some users to load too much. And if you needed images with different resolutions, you had to refine the related CSS properties, such as background-size as part of the border-image. It was annoying.
Fortunately, -webkit-image-set allows you to write one simple rule, thereby forcing the browser to determine the most appropriate image for itself and, as a result, load it.
The srcset attribute is very similar to the -webkit-image-set. In fact, you might think of an attribute as an equivalent CSS function. Similar to the list of images in -webkit-image-set, you add a new srcset attribute to your graphic elements. Backward compatibility is supported, browsers that do not support srcset, ignore it and continue to use src. And the beauty is that the browser engine will look at srcset and will determine the best picture to download. In most cases, you need to write this:
Notice the “2x” after “better-image.jpg”? This tells the browser that for device screens with devicePixelRatio = 2 or more, you must use better-image.jpg instead of normal-image.jpg. And if the device screen is not “retina”, the browser will turn to the src attribute. You can also set the 1x value of the srcset attribute, as in the example below.
More about srcset can be found in the official specification . Please note that at the moment only WebKit supports “resolution coefficients” - 1x, 2x, 3x. Like any new feature, WebKit may contain bugs, so be careful. In particular, you should make sure that WebKit loads the minimum resources for the page, because this is one of the goals of this feature.
Special thanks to the members of the WebKit Romain Perier and Yoav Weiss community who made an important contribution (r153624, r153733) to the development of this functionality.
PS Notes on the translation send in lichku.
Note the need to use the latest nightly builds of WebKit .
You may know that WebKit supports the -webkit-image-set CSS function for just over a year (Safari from version 6 and Google Chrome from version 21). With this function, it became possible to set the image in the css-properties, depending on the screen resolution, or another playback device, each with a 1x, 2x modifier.
')
.class { /* , image-set */ background-image: url(image-set-not-supported.png); /* , */ background-image: -webkit-image-set(url(low-res-image.jpg) 1x, url(high-res-image.jpg) 2x); } This will allow the browser to choose the best option for a particular user device. Before, to support large images, you had several development paths, each with certain disadvantages. You could duplicate CSS code. You could use javascript to query (window.devicePixelRatio) the number of pixels per px. (device pixel ratio) and update images after loading page. Or you could always give away big pictures, thereby forcing some users to load too much. And if you needed images with different resolutions, you had to refine the related CSS properties, such as background-size as part of the border-image. It was annoying.
Fortunately, -webkit-image-set allows you to write one simple rule, thereby forcing the browser to determine the most appropriate image for itself and, as a result, load it.
The srcset attribute is very similar to the -webkit-image-set. In fact, you might think of an attribute as an equivalent CSS function. Similar to the list of images in -webkit-image-set, you add a new srcset attribute to your graphic elements. Backward compatibility is supported, browsers that do not support srcset, ignore it and continue to use src. And the beauty is that the browser engine will look at srcset and will determine the best picture to download. In most cases, you need to write this:
<img src="normal-image.jpg" srcset="better-image.jpg 2x">
Notice the “2x” after “better-image.jpg”? This tells the browser that for device screens with devicePixelRatio = 2 or more, you must use better-image.jpg instead of normal-image.jpg. And if the device screen is not “retina”, the browser will turn to the src attribute. You can also set the 1x value of the srcset attribute, as in the example below.
Srcset attribute
The image below is an img element with both attributes: src and srcset. There is a style that sets the size of a picture at 400x400px. In browsers without srcset support, the src value will be used, and therefore the standard image will be loaded:
On normal screens, the 1x srcset attribute will be loaded:
Retina displays will load the 2x srcset attribute option:
HTML example code:
On normal screens, the 1x srcset attribute will be loaded:
Retina displays will load the 2x srcset attribute option:
HTML example code:
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x">
More about srcset can be found in the official specification . Please note that at the moment only WebKit supports “resolution coefficients” - 1x, 2x, 3x. Like any new feature, WebKit may contain bugs, so be careful. In particular, you should make sure that WebKit loads the minimum resources for the page, because this is one of the goals of this feature.
Special thanks to the members of the WebKit Romain Perier and Yoav Weiss community who made an important contribution (r153624, r153733) to the development of this functionality.
PS Notes on the translation send in lichku.
Source: https://habr.com/ru/post/190464/
All Articles