The sizes attribute describes the width of the image that would best fit the layout under different media conditions. The browser will pick only one of these variants, so which one will it pick? That’s where sizes comes in. In our example, we provided four image variants: one that’s 640px wide, 960px wide, 1200px wide and 1440px wide. Note that the image width is specified using the w descriptor as opposed to px. In srcset, you specify the path to each image and its physical width in pixels. It allows you to specify multiple variants of an image which the browser can choose from based on the media conditions specified in the sizes attribute. It confused me too at first, but you will make sense of it soon enough.
If that syntax confuses you, don’t worry. Here’s some markup that shows the concept of responsive images: Each device’s DPR and logical resolution is shown by default. In Firefox, hit Ctrl+Shift+M to jump straight to Responsive Design Mode. You might need to click the three dots at the top right and select “add device pixel ratio” to view the DPR for each device.
Then use the dropdown to select the device of your choice. In Chrome, open the DevTools, then click the device toolbar icon or hit Ctrl+Shift+M. If you want to inspect some other devices and their pixel ratios, you can use Responsive Design Mode in both Chrome and Firefox. A 1x display corresponds to a DPR of 1, 2x means a DPR of 2 and so on. So when you’re defining pixel measurements in your CSS, you’re actually targeting logical resolutions not physical ones. This puts its logical resolution at 360 x 640 pixels, same as the S7 Edge. Another device, the Nexus 5, has a physical resolution of 1080 x 1920 pixels, and a DPR of 3. This means that its logical resolution is (1440 / 4) x (2560 / 4) which gives 360 x 640 pixels. The S7 Edge has a Device Pixel Ratio of 4. Similarly, a DPR of 3 implies that a single logical pixel is equivalent to 9 physical pixels. For example, a device with a DPR of 2 means that one logical pixel contains 4 (2 x 2) physical pixels. Simply put, it refers to the number of physical pixels contained in one logical pixel. The DPR is defined by the device manufacturer. Logical pixels are defined as the number of physical pixels in a device’s screen divided by the Device Pixel Ratio (DPR). Which brings me to the concept of logical pixels (a.k.a CSS pixels in web development). This means that the device has a display that’s physically 1440px wide and 2560px tall.Įver wonder why the following CSS media query still matches the S7 Edge’s media ( max-width : 400px ) Īlthough the physical pixels of the device is 1440 x 2560, if the browser tried to use every single pixel to display content on a 5.5inch screen, the content would be far too small to see. Let’s say you have a Samsung Galaxy S7 Edge with a screen resolution of 1440 x 2560 pixels.
CHROME RESPONSIVE RESIZE HOW TO
Physical pixels vs Logical (CSS) pixelsīefore we explore how srcset and sizes work, let’s examine the relationship between physical (device) pixels and logical pixels because they’re crucial to understanding how to develop an efficient responsive image solution. It took a while to understand all the terminology that’s out there, but I’m going to try to explain everything as best as I can. There’s the srcset and sizes attributes, the element, and also the process of generating multiple variants of an image at different sizes, aspect ratios and for different pixel densities. There’s a lot to figure out when it comes to responsive images.
After all, a screen that’s 360 pixels wide does not need a 2000px image even if it’s a 3x display. It means not relying on browser resizing to display images on screens with varying widths or sending a high-resolution image to small devices with a low resolution display which could result in a huge waste of users' data. The concept of responsive images refers to a system for adapting images to fit the resolution, viewport and layout for any device, and it goes farther than just applying a max-width: 100% rule to the img tag. You also need to make sure that you are serving the right images to your users depending on their device capabilities.
The process of optimising images for the web does not stop at using tools like MozJPEG or pngquant. Published on AugA Guide to Responsive Images on the Web
0 kommentar(er)
