![]() When a large image is resized to fit a small area, it can lose its relevance, usefulness, and legibility. Despite being similar in terms of file-size, the 2x image will give a sharper appearance. 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. I know it's been patched to avoid sub-sequential web requests in most of the browsers, but still.This is a simplified version of responsive images in action. It's not good if you generate empty tags. Note that CSS is cascade and first match top down will win.Īnd now the last piece in the puzzle - markup generation method (here also the order of the images is important to match source media order): PictureProfiles.BootstrapGrid)Īlso arbitrary image urls are supported (in cases when you need to fine tuning each image): PictureProfiles.BootstrapGrid) NB! Specified media attribute is generated in the sequence as specified here in picture profile. Note, that we have now possibility to define various medias which are specified for every source element. Next we would need to define our picture profile: public static PictureProfile BootstrapGrid = For example in this code sample we have SampleImage profile: public static PictureProfile SampleImage = ![]() Picture profile is an entity that describes how image should be scaled and rendered in various cases. What are those picture profiles you passed as last element? Basically simple straight forward Episerver property for image definition. Note that new method to generate picture element with all the corresponding sources and source sets is as simple as following: PictureProfiles.SampleImage)Ĭurrent page's MainImage property is of type ContentReference. When you need to deal with images and want to adapt to various screen sizes - it's time to switch to element. Thanks to lately movement by Erik and Vincent. ![]() ![]() Latest ImageResizer library version now can also generate element. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |