![]() ![]() ![]() Pixel density of the device (number of physical pixels per inch): A high resolution device will have a higher pixel density and hence, for the same zoom level, it will have a high device-pixel ratio as compared to a lower resolution device.For example: A high-end Lumia 950 phone would have a higher resolution than a budget Lumia 630 phone, and hence it will have a higher device-pixel ratio for the same zoom level.Two key conditions contribute to device-pixel ratio: The srcset Attribute:īefore we explore how srcset is actually used, let’s understand a few terms: Device-pixel ratioĭevice-pixel ratio is the number of device pixels per CSS pixel. And thankfully, there is! The recommended way is to use: Hence, we need a better way to deal with responsive images. Two, if you don’t specify any image in HTML and want to load only the image as defined by the script, you’ll end up with no image at all for the browsers which have scripting disabled. One, if a script determines which image to download, but the script itself is loaded after the images specified in the HTML have been downloaded, you may potentially end up with two downloaded images. One of the older methods (not recommended) is by simple scripting, but this leads to a couple of problems. There are a number of ways to enable responsive behavior of images.
0 Comments
Leave a Reply. |