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. If you need fast load times, use srcset to load smaller images on mobile.This is a simplified version of responsive images in action.In most cases, just add height: auto in your CSS.The padded container technique, used by Netflix, works everywhere.Use object-fit if you don’t care about IE.Use background-image if your image is not part of the page’s content. You can combine them with the HTML 5 tag, which gracefully degrades with an. A big hero image can ruin it and make your page feel slow, especially on mobile.ĭid you know that in modern browsers you can change an image source depending on your page width? That’s what srcset is made for! The Performance way (Advanced)īy performance, I mean load times. If your layout isn’t too complicated, it works in most cases. Your image will be a full size absolute child. We will keep the image ratio with a percentage on the padding property. Don’t worry, this one works everywhere and it is my favorite! You’ll need to wrap your image with a relative padded parent. You may think “nice trick man, one more way that doesn’t work in old browsers like IE ?”. Unfortunately object-fit will not work on IE and older versions of Safari, but there is a polyfill. That’s all folks! See how when we retrieve the friendly value cover, we can also use contain. What if I told you this kind of magic exists also for elements? Say “hi” to the object-fit property - which also works for videos, by the way! Yet, remember that you should use them only for non-content images or as a replacement of text and in some particular cases. Using background properties is very useful, they just work. Sounds familiar? We’ve all done it once, doesn’t it feel like cheating to you? It’s 5:00 pm on Friday, you have to finish this page, but the images won’t fit the layout. No more black magic hacks - here are my five favorites techniques to handle image resizing. This situation has happened to me many times and I have learned from my mistakes. Sometimes, for some reasons, your images won’t fit the layout and you don’t want to wrap your head around this for hours. As a web developer, there is a high probability that you have encountered the two enemies of this article: images and deadlines.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |