![]() On a device, with DPR (device pixel ratio) 2, a 2x wide image with low-quality (50) will look better than a 1x wide image with high-quality(90). However, note that it does not always mean that we have to load a large file size. It means if we want to render a 100 CSS pixels wide image, we will have to load a 200px wide image for it to look sharp.įor a device with pixel density 3, we will have to load a 300px wide image. ![]() Effective device resolution: 750px by 1334px.In simple terms, a large image is required to fit the same physical image. As a result, high-resolution displays demand images with more pixels. This means more pixels in the same amount of physical space. High-resolution displays have a higher pixel density. If the browser stretches a smaller image to fit the design, the rendered image will look blurred, and if you load a bigger image on a device with small viewport width, it results in bandwidth and time wastage. If your layout changes based on the device viewport, the loaded image dimension should match the container CSS/HTML width. This is especially important on retail sites where users expect to view high-resolution closeups of product images to better look at texture & details.įor an image to look good, it must adapt based on viewport width and screen pixel density. Render a high-quality image on different devicesĪn image without perceptible artifacts looks crisp and contributes towards a great user experience. Loading the right image - Art directionġ.Render a high-quality image on different devices.Here are three main reasons why we need to implement responsive images: A responsive design should adapt based on user screen size, pixel density, and device orientation to ensure a great user experience. Chapter 2 - Why do we need responsive images?Īs you saw in the above example, one size doesn’t fit all. As of Oct 2020, all browsers support srcset except Opera mini and IE. Note that we are still using the old src attribute as a fallback if the browser doesn’t support the srcset attribute. We will soon discover more about srcset and other options in great detail. The browser picked the right option based on the actual viewport size of the device. We used srcset (source set) to provide the browser with three different size images. This is a simplified version of responsive images in action.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |