responsive resize image next to each other

#Responsive resize image next to each other how to

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.

#Responsive resize image next to each other 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