So: if the image returned should normally (DPR1) be approx. It seems modern browsers switch to a higher resolution image, when you use a device with a DPR greater than 1. You might have noticed, I didn’t add any DPR-related media-queries to the tool. Is the tool useful? Do you have ideas on how to improve it? Time will tell if some clever backend-developer can create such an interface - until then, I’ll use the tool to create the static markup I need for my components -) This particular configuration requires four images, so the component should display four image-placeholders/fields for images. The goal is to have a component, where a developer (or editor!) picks a configuration (preset) from a drop-down, for instance “Art Direction with Dark Mode”. However, for a simple case like this, there’s no need to use the - and multiple -tags (I’ll use these for ‘art direction’ and ‘dark mode’ later):Įnter fullscreen mode Exit fullscreen mode Here, they do have the sizes-attribute, but used in a way, so it always returns the 650px image, when the min-width is larger than 720px, or until you add another -tag. In some of the code I inspected at dr.dk, I noticed this: The key to loading images in the correct display-size is the sizes-attribute. But in a case like this, where the difference between the minimum and maximum display sizes is minuscule, I don’t think it makes any sense - especially, when the markup-size almost exceeds the image-size before the image has even been loaded. If you have a hero-image which is 100% wide, there’s no doubt: you need to use responsive images. It’s the same when you use SVG’s with - sometimes the link to the SVG is longer than the SVG-code itself. It makes you wonder whether responsive images are always necessary? That’s almost the same size as the largest image itself, if webp had been used with correct scaling. The markup for the -tag in this particular case, is a whopping 11kb! If a modern format like webp is used, the final size is less than 13kb - almost 1/4th of the actual size. This, large image is 53kb, but could/should be just 17kb. However, the intrinsic image is based on the viewport-width, so with a browser-window-width of 2000px, the loaded image is actually 1080圆98px. The image is scaled up, until the max-width of 373px is reached. With a DPR of 2, the size was 671x378px - again, more than double of what it needs to be. With a DPR of 1, the intrinsic size was 336x189px, almost double of what it needs to be. To see which image-src is currently used, open Dev Tools, select the image in "Elements", then open the console-drawer - and type: The image is displayed at 160x90px, but I took a look at its intrinsic size. The first example uses this little teaser-block from dr.dk: Different devices have different DPR’s (some, newer phones have a DPR of 3), but most desktop PC screens have a DPR of 1. To keep it simple, I’m going to use a device-pixel-ratio (DPR) set to 1. They use the -tag for responsive images, with multiple -tags for the media-queries and logic. One of the most popular sites in Denmark is that of the national television, dr.dk. Is it doable? Yes, but not in an easy, CMS-editor-friendly way.īut before we go there, let's look at some examples, and the standard way to do responsive images, using either the -tag stand-alone, or within the -tag. So this is what the clients want - or at least what that particular client wants. “Ha ha! And you probably also want to change that image to a completely different image for a given breakpoint? And server-side-scale all the images in-between?” “Can I change the image, if the user has ‘dark mode’?” Later, a designer on the same project asked me: Sorry … we can’t do that in the solution. “No, I want to change to a completely different image!” “Oh, but we do already scale the images server-side, and send different resolutions to the client!“ “Why can't I change the image for a given breakpoint?” On a project I worked on recently, I had the following conversation with a content-editor: This post will hopefully help you understand them better. But responsive images can be tricky, and the syntax complicated. To create a fast and sustainable website, the top priority is to minimize the amount of assets, mainly images.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |