About this talk
In this talk, Perry Brown discusses the significance of responsive images in bridging the digital divide. He emphasizes that images constitute a significant portion of web content and often lead to heavy page weights that can hinder user experience, especially for marginalized communities. He presents a framework for utilizing responsive images in Drupal, allowing browsers to select the most appropriate image based on user context, such as device capabilities and network speed. The session explores the technical architecture of responsive images, detailing how to serve various image sizes using the sourceset and sizes attributes. Brown also highlights the implications of page weight on performance, accessibility, and even search engine optimization, advocating for a more equitable web design approach. By leveraging responsive images, developers can reduce page weight and enhance overall user experience.
Full transcript
I have 420. I mean 410. Let's go ahead and get started. Did anybody get that? That was shout out to my kids like Okay. Yeah, >> it's the last session. >> That's what I was going to say. Welcome to the final session of uh Drupalcon Chicago 2026. You've made it through Wednesday and u hopefully this will be a good session for you. Just real quick show of
hands. How many of you are are uh familiar with responsive images? Familiarity. Great. Great. Great. the digital divide. A little bit new of aer concept. Okay. So, what we're going to look at today is how we can use responsive images as a tool to help us bridge the the digital divide. My name is Perry Brown. I'm a full stack Drupal developer. This is my handle about everywhere
up till for music. uh finding me on [snorts] where X Twitter whatever I I don't do there anymore. It's more of just it's wherever I can be found. That's it. So, you probably won't find me many places. Uh drupal.org maybe be about it. Uh I've been doing Drupal now for uh almost 18 years. Um uh maybe it's a little bit longer than that. I don't think I
started a profile on drupal.org or immediately but um I'm a lot younger than I look or older than I act something like that. So so uh the digital divide what we're looking at is uh this tension that we have let me just start by reading the abstract I submitted major factor in the digital divide which is the unequal access to and effective use of digital technology. A
lot of that lies with those of us who build websites. Images make up roughly 35% of web content by volume. And we often force our users to download massive files that burden infrastructure, drain data plans, and tax personal patients. Right? Everybody likes waiting for those big files to download. This session, we're going to explore how we can be better digital citizens by relinquishing control and empowering the
browser to choose the optimal image. We will dive into the technical architecture of responsive images in Drupal. Balancing the visual impact with performance to create a more equitable web. At the heart, we have a conflict. As web developers and designers, we want to use these massive large highfidelity images, [clears throat] excuse me, that offer maximum visual impact. However, we have to respect the various constraints of our
endusers and design accordingly. Largely impacted communities are people who are dis disproportionately affected, black, indigenous, and people of color, lowincome households, rural populations, older adults, and people with disabilities. A solution, a resolution is to configure our responsive images to serve a large number of image style options using the source set and sizes attributes. Then we can achieve an optimal outcome for both our site owners and developers
and for our site users. So let's talk real quick about the high cost of pixels. So, where does page weight come from these days? From the uh web almanac. Everybody familiar with the web almanac? Got some great stuff on here. Um so, this is median, right? So, 50th percentile, median desktop page weight by content types. So, from left to right, you've got HTML, a little bit CSS,
not much more, a little bit of fonts, decent amount of JavaScript, but obviously the heaviest part is the images. The green represents like a homepage, an average homepage. Blue representing an average interior page. If you look at mobile, it's the same picture pretty much. So again, this is the 50th percentile. So same kind of statistics. You got a little bit less weight for some of these pages.
Um but in essence, P the same thing. And if you look at a distribution, this looks at the distribution for images uh by percentile. Right? So down the middle right there you have 50th percent uh which would be your your median but then when you look to the right of it you've got 75% and then the 90th percent you're looking at you know almost 7 megabytes uh
worth of images on your average homepage whether that is desktop or mobile um at the 90th percentile and then obviously it can get a lot worse from there. Right? This is you still got 10% or 10 percentile left to go on how large some of these pages could get. And so what we end up is having this huge amount of weight um locked up in our images.
All right. And this page weight is pretty much a direct proxy for both performance and accessibility. Uh a heavy page creates several negative ripple effects throughout our site. One, there's a performance gap. Larger payloads can require more CPU cycles, uses more device memory to parse and render, often leading to a sluggish experience on low-end devices, regardless of the connection speed. There's an economic toll to be paid.
In many parts of the world, data is a metered commodity, right? We're very privileged here. We've had this wonderful Wi-Fi at this hotel, which not too bad this year all said and done, but we have access to, you know, a lot of of data. Some parts of the parts of the world, it is still metered. And so a 5 megabyte page isn't just a slow experience. It's
an exclusive experience. It's an expensive experience. If a user can't afford the data to load your page, your site is by definition inaccessible to them. There's also the accessibility barrier. If a page is heavy, it doesn't just load slowly. It becomes physically and cognitively harder to use. Excessive page weight creates signific significant inequities, heavily penalizing users who rely on less powerful devices or expensive slow connections with
limited data caps. There's also an environmental impact to be paid. Every megabyte transferred requires energy from data centers to cooling systems to the device in the person's hand. As the web grows, so does its carbon footprint. This seems maybe less relevant in in the public space today. We have these huge data centers going up and they are consuming a wealth of energy and bandwidth. So you know
we kind of think maybe our six megabytes on our homepage uh is is insignificant and maybe in the larger it's uh context it is but in the context of the website that you're working on um I would say no like this this may be the most important part of your page. U finally the weight matters because of speed and the thing that we like to you know
uh focus a little more on is SEO. So heavier pages take longer to load, especially on slower connections. And Google does use their uh core web vital metrics as part of their core algorithm to uh you know help rank our pages. So when they're slow and bloated, they're going to they're going to rank worse. And so um there's a lot more that you can dig into on
u the HTTP archive. There's QR code there if you want to scan that. It takes you to the overview page for page weight. There's a lot that you can learn there also for you know JavaScript that's a whole another you know topic but there there's another um large offender for you know huge page weight but we're looking at images today. So let's move on from there. So
what are we talking about with the the what we are profering that we would like to accomplish right is to relinquish control. So we as designers and developers, we build these sites and we want to have like the uh the control of how how the thing looks, right? You know, we've we've moved from pixel perfect, we've kind of gotten away from that, but we have other areas
that we still try to maintain a lot of control. So, uh, browsers have the ability to do things that we can't do. So the preloader, it will go through your HTML. It'll find all of the images and it'll start downloading them even before the the CSS or the JavaScript uh executes it. It is it's finding those images as quickly as possible, pre-loading them. And so it knows
the environment that you're going to have to load those images into before your page is even loading. U your content is loading before that. Um so we we are we are putting that burden of uh knowing stuff about the browser or excuse me about the device. We're we're putting that burden off on the browser. Um it also understands the viewport size. It understands the pixel density. Um
and there is even uh APIs in uh that are being worked on in the browser that will allow them to understand the network conditions so that you know a slower connection and if you have a um kind of like prefers reduced motion you can do a media query. There's also uh settings probably in your OS where you can say, you know, when I'm on a um I
don't know, metered connection of some sort, I want to reduce my my download footprint. I don't think there's any browsers that are um implementing that fully yet, but it is uh a spec that's out there and it is behind flags. I think it's either Safari or I think it's Safari. Anyway, but that's another signal that it it it's coming, right? So, you've got the pixel density, you've
got the viewport size, and you got network conditions. And those are three things that you cannot know about in advance when you're designing your page, right? You're just never going to have that information. You can make guesses, you can say, you know, you can do some maybe some sniffing, but by that time, we're we're already past that preloader stage. you you you've already loaded a bunch of
assets that um you know you you had no control over it. It's it's it's all out of your power. So understanding this is that um a forcing of size that we provide a series of options. That's that's what we're basically going to give to the browser and we're going to say you be the one to decide which of these is the best in this context that is
unique for this individual that's looking at the site right now. Okay, as far as our our syntax, uh these are our tags that we're dealing with, right? We've got the image tag and we've got the picture tag. And they serve two different um two different purposes. Um there there is overlap. So with the image tag, we use uh source set and sizes. And this allows us to
change the actual dimensions, right? It's the same image, it's just a different size. So if you have like a cropped image and it's uh, you know, 16-9 aspect ratio, you might have images that range from a, you know, a small size up to several larger sizes. Maybe you've got like a small, medium, and large that you have put together. Those images are going to be what you're
feeding the browser to then choose based on all those other criterias which one is the best. Right? So again, this one is for identical crops. It's just a matter of which screen size it's going to be on, what's the the the DPR, all those things, they're going to have an effect. Art direction. This is where we use the picture element. And so the picture element can have
multiple multiple source sets. So you can have um uh one source set that serves like a 16 to9 right uh aspect ratio and then maybe another one that's square and then another one that's like a portrait that's like 9 to 16. So, [clears throat] you know, at your different viewports, one would be on a desktop and it would be like a a banner size. Then on maybe
a tablet size or something in that neighborhood, it's going to be square. And then maybe on like a horizontal or uh yeah, vertical orientation on a phone, it's going to be like in a portrait display. But those are separate crops that you have done manually. manually you have art ddirected that uh that decision to say here's an image and with you know this aspect ratio I want
to show this much of it when I switch to a different aspect ratio it's square and I this is my focal point there right this is what I want to show and finally when you get to a portrait kind of image you hone in on differently because obviously the the things that you would display in those they're they're you are making a decision an art directed decision
about what you want to show. So two different syntaxes and we'll look at both of those and then we look at some uh some of the optimizations. So this would be like if you have you know a large unoptim unoptimized payload image 40 4800 kilobytes. Okay, pretty good size. If you just have only one image and that's it. Everybody gets that under every circumstance. Right now, the
browser um will scale that image. It'll probably fit it. You know, you might have some issues with your CSS if it doesn't fit, but if you got your uh CSS set up so that that uh max image width would be like set to 100% and the height was auto, it'll scale that huge 4,800 kilobyte image down to the correct size. But you still had to download the
whole thing, right? the page weight that you paid for was a big price. If you use responsive images and you give it some options now, you might see like for the desktop at 4K, maybe it only has to download an 18,800 kilobyte images. Still, that's still a large image, right? But that's, you know, 63% reduction in in the page weight. Uh maybe you go with a tablet,
a retina display. Uh you know, it's going to choose something that's 220 kilobytes. That's a lot that we've saved, right? And then you go to a phone uh maybe a lower-end phone that it's not a high pixel density phone. It's just, you know, some thing that you would buy like a I want to say a burner phone. That's not the right term. Uh uh throwaway uh disposable
almost, you know, or maybe that's your main phone. That's kind of the whole point. like we are we're trying to give um the option no matter what somebody what device somebody is bringing to our website. All right. So, and then you get down to like 45K, you're talking a huge 40 or 99% reduction. Okay. So, let's go and let's take a look. Uh okay, so I have
a couple sites set up here. My let the browser decide demo site here. Got a couple cat images. Same cat. This is two different crops. All right. If I view source on this, inspect it. Everybody see a little bit larger. What in the world is going on here? We have a huge amount of image sizes, right? These are all um these are all 16 to no these
are all 32 32 to9 aspect ratio right about three and a half times wide as they are tall. Um this is a uh fairly common aspect ratio something that you would find I actually found all these on um oh I forget where the article was um Wikipedia I think it shows like you know bunch of common aspect ratios. So this is one and you'll see that the
sizes. So we have the image tag. Um I am actually uh eager loading this. If you'll notice, everybody can see down here it says loading is eager. That's because it's above the fold, right? I don't want to lazy load this. It's going to slow it down. It's kind of against the point. You want you want this to come down quickly. This is going to be your largest
contentful paint right here, right? Probably. It could be. Maybe not. But large uh very good possibility that it will be. So I have here I want to say it's 17 different sizes and they're all that same aspect ratio. Okay. Seems like a lot, doesn't it? Anybody? Anybody else think it seems like a lot? Okay. Well, let's go back down and let's look at this one. This one
is a different aspect ratio. This is a portrait. It's got I think it's four four to five. So, it's it's a little bit taller than it is wide. Not a whole lot, but enough that um it's not this massive wide banner, right? Same image. Started with the same huge image. This is all done with um image styles. And we'll look at the the hows here in just
a minute, but I want you to get the idea for for what we're looking at. Um let's go now and look at another one. This is an artdirected version. Looks a lot alike, right? This same 32-9 aspect ratio here. Um, this one's a little bit different. This one is um golden ratio. Everybody's familiar golden ratio like mythical, right? Everybody's good. So, this is a a golden ratio
uh crop here. But what we're doing is a little bit different because now if I take a peek. This one uses picture and we actually have three different sizes, three different aspect ratios. Uh there's the 32-9 that you see at this viewport width, right? Uh the next one is let's see uh L. Oh, this is uh like 2 to one maybe. I I'll look at it in
a second. And then this one is uh a portrait size. Um it's probably four four to five just like that other one. Same thing, similar thing with this uh cute kit here. Okay, got three different aspect ratio. We're using picture and multiple source sets. Everybody kind of see the pattern there? Now, if I take a look at this, if I look at it, this is my break
points. This is using the excuse me just a second. This is using the break points that are built into Stark. I think Stark's still a core theme doesn't get installed. I I don't remember which one it is, but >> is it? So, at at 960, I'm still seeing the 32-9 aspect ratio. Soon as I bring it down one pixel, come under that break point. Now I see
another aspect ratio. This is this is 16 to9 I think is probably what that is. But you'll notice the change, right? One So cut off just a little bit below the chin, but we're focused right in. You know, cute little face there. Right. Come down one more pixel. Cross over that break point. And now I've got a dis different aspect ratio, but I chose this crop, right?
I'm the one that said, I want to go and I want to see the way this looks. You know, he's got his little paw coming out here towards you and so adorable. This one is now square. You can't notice a whole lot of difference, right? It's not that extreme, but this is now a square crop at this. So now if I come down to still at the
16 by9 still at the square if I come down one more pixel and cross over to that break that last break point now I have a portrait display and you'll see I don't have much on the sides anymore right it's just this narrow I don't have any well I didn't have any let me reload it shouldn't have any any uh wiggle. Nah, it's not like it's got,
you know, how sometimes you'll have a an image that'll get it'll get blown off to the side or maybe you'll get uh a long URL, it'll come off and your your your design will have this you go to swipe it and it's got side to side on it. I'm not getting that from these images because these images are actually this aspect ratio. They're designed to fit in
here. So, this one is a portrait. Uh again, it's a golden ratio. It's just golden ratio. uh in a in a portrait aspect. This one I don't have that. Come on, baby. Stays at that 32 to9 aspect ratio no matter no matter where uh I am on the break points. Right? This one is not art directed. This one is just a single crop. This one uses image.
All right. And a single set of crops. Um, the other one uses a picture and multiple set of crops. So, let's look behind the scenes and see what that looks like. Okay. Image styles. Everybody familiar with image styles? Site builders? Oh, that's site builders versus like front end, backend. Who's [snorts] full stack? You do everything front end. Who's front end? Okay. Backend. Okay. Jack of all trade.
Yeah. Okay. Great. My people. I love it. Um, these are image styles. And I'm going to blow you away here. There's 50 on a page. >> 50 on a page. At least 50 on the first 13 pages. The last one doesn't have that quite that many. That's a lot of image styles, right? Again, this is how I am giving the browser a lot of choice, right? So,
these are image styles and they're all aspect ratiobased, right? So, you see these first ones here, um they're art directed. So, they're they're labeled as art directed. This one's landscape. The aspect ratio is 3:1. And then there's a some sizes. Um these these are generated courtesy of a module uh that Rick Hawkins made that um you can give uh your you can basically set a definition for
the image styles that you want and it'll generate them for you. So that's where these come from. There's like 17 versions of each one of these different aspect ratios. And then we take those and we make a responsive image off of them. So here's the 3:1. If I look at the aspect ratio down here for every one of these um Oh, this is a single aspect. Yeah,
this is again this uses image. So this is not going to be multiples. This is going to be a single. So this is the responsive image breakpoint group, right? It only has one. So you give it multiple image styles and you use the sizes attribute. I default to a 100 viewpoint viewport widths. Um it it's for stuff like this especially this is going to probably be a
banner maybe right especially at this aspect ratio 32 to9 or excuse me 3:1 no let me go back and click on the right okay I did sorry there they are so there's all the 3 to selected. So, I have sizes from 128 pixels, right, all the way up to 3,840 pixels. 17 different sizes. They're they're kind of graduated. There's some math that's happening there that gets you
approximately um I forget what like 20% increase in the volume of pixels that each one represents from the largest to the smallest. So you are giving the browser a huge number of images to choose from. If if it's looking at the width, right? That's one of the signals that it gets. See all the different widths that are that are in in the the code here. Come on.
Out of the way. Out of the way. Sorry. There we go. There we go. So there 128. That's that is the width of that image, right? And so that's one of the signals that comes through in the source set. That's going to be a a signal to the browser. The browser now knows what the width of that image is and that corresponds to one of those those
um image styles. And so we do the same through that thing all the way up to these through these larger image styles. So now your your browser is given 17 different things to choose from. Which one's it going to choose? Well, let's go do a thing here. Coming up on the audience participation time here in just a second. I'm going to try something. Okay. How many y'all
use DDEV when you're doing your local development? Or uh Lando. Uh they have these like share features. I'm not sure if Lando still has theirs. I think they does anybody use Lando all the time? Do they still have a share feature? I thought kind of went away for a little bit, but anyway, this is uh um DDEV. This is uses a share feature. So now if I
come back, I have turn on the responsive image debugger. So that prints the image size that is actually being displayed by the browser. Make sense? So here in this this scenario, it's picked the one that's 3,840 pixels wide. All right. Who would like to play along? got your phone. It's got a camera on your phone. Scan the QR code. It's going to take you to a uh
Ingro site. Uh you're going to get this little thing that's going to pop up and says, "Hey, do you trust the people that gave you this link? That's me. You can kind of trust it." Go to it. You're going to get here and you're going to see something similar to this except this is going to be on your device, right? So now, who has 3840? Is anybody?
Nobody. Uh what about if you got a laptop? People with laptops, if you if you're playing at home with a laptop, you can go here. Tiny URL. Uh 2026 Drupal Con Chicago, right? If you don't have a way to scan a QR code like you're well try it on your laptop. Does anybody have 3840? Okay. If I pull up see 9 960. Now, I do have this
little JavaScript down below here that shows the viewport and the pixel density. So, right now on this laptop, I've got 960 is my viewport and 1.0 is my pixel density. And that's because that's what I selected up here in Chrome. I can change it to two. Uh, it's not going to do anything until I re ow until I refresh. But now that I've refreshed, now I have
1920. Wait a second. Do you see what's happening there? My viewport's 960, but because my pixel density is two, it's chosen 1920. If I change it to three and refresh guess what? Another size is there. 2944. So, this is one of the reasons why we give the browser a bunch of different options because you know just how many's got everybody's got something different. You've got if you
turn your phone sideways and do a refresh, you're going to get something to get. Now, there is um this one thing that does happen. Okay, so I am at three. My my pixel density is at three right now and my width is at 960. If I go below that, still getting I'm just one pixel at a time, but it's not changing. Why? Because I've already paid that
price. The browser has already paid the price to to download that 2944 wide pixel image. So, as I go down in size, it just keeps it there. I already have that one. Why would I go download another smaller one? But if I refresh Oh, I didn't get a different one. Sorry. Let's go down a bunch. Um I still have 20. No, there it went. There it did.
You see it went down to 1644. Hard to see, but so the browser, it's kind of the whole point of this. The browser is smart, right? and it's got a lot of information and it can download and do stuff that you know you just kind of kind of let go. All right, so um what else do we need to cover real quick here? Let's go back. Come
on. Let's go look at our art directed one. So again uh my pixel density is two. See my viewport width there. Uh I'm immediately going down to 480. And now uh we have crossed over. If you'll notice there's the the you can hardly read it. I can hardly read it from here. So if you can I understand why the name of the um the image style. And
you can see it's it starts at a L. So that's art directed uh landscape 05 and then there is some numbers and that's just like a a system that it kind of keeps the stuff in order when you're looking at it. You don't go crazy when you're setting this stuff up. All of your image styles are in order right beside each other and you know because of
sorting. But um you'll notice that this is that 16 to9. If I come down, come on, one more pixel, it should there it switches to the the uh portrait. And you see again, we have that large count 1644 because my DPR is three. I refresh again at two, I'm only getting a 1024 If I go to one, 512. Make sense? Let's look behind the curtain a little
bit more and see some other stuff. what we got in here. So, lot of image styles, right? Um, lot of responsive images. Each one of those, these landscape ones right here, this is the uh the single um aspect ratio is an image. You have these other two up here that are art directed. Here's the banner one that goes at the top. We have multiple break points. All
right. Yep. Using the responsive uh the stark breakpoint. So, there's only three break points. Uh, at the low end with the mobile, I've got four to five. And I don't have actually they are probably something is happening here. These are out of order. Yeah, there's a bunch more there. They're just not stacked on top of each other. I have selected all of them. But again, that's the
the portrait version. Same thing from 480 to 959. We've got the uh the the other portrait version is four four fifths. And then at the top we've got the 32 to9 landscape. But those those are three different break points. So it's going to use a picture element and it's going to stack all of those. Again, you're still even though you're using picture and you're art directing, you're
still giving the browser a huge number of choices with inside that that picture element because it's still using source set. Okay. Um, now I do have in this uh demo here, I I do have a couple of media types because one of the things that you get with the art directed, okay, is that you kind of have to choose these crops. Let's look let me pull those
up real quick. Have multiple crop types. The focal point crop type that's the only one that I have to use for when I'm just using a single responsive image. It's an image with sort set and I'm just choosing the 16-9 aspect ratio. I only have to use focal point because when I go to edit, let's uh open another one. So, this is my regular image. Uh it's
not one of the art directed ones. When I go to edit this, I get here. I know you I'm sure you can't see it. There's a little crosshair right here in the middle, right? That is the focal point that I every single one of those crops is going to attempt to make that focal point the center of its image. So if it's 16 to nine, it's going
to try and make it the center. If it's a portrait one, it's still going to try and keep it in the center. If I if I make that focal point, if I put it over here in midair somewhere, it's not always going to try it's not always going to accomplish getting that in the center of the the crop, but it's going to attempt to. That make sense?
with these other ones. these are the ones where I am using specific. Let me turn that off real Hang on. Okay, there we go. Um, here you see the the artdirected crops, right? These are aspect ratio based. I can I can take and I can move this around and change what shows up in that crop. Same way with the 2:1, right? and the portrait. Now, it's got
a little red thing around it because it's it's saying like you're violating the minimums, but you don't really have to worry about it. But I can I can I can shrink this down even more. Oh, excuse me. Come on, baby. See, I can I can do that if I want. And that's what'll show up when that crop shows up. I also have this one for the golden
and the square. It's got a landscape golden. I again I can change, you know, can do that if I want. Okay. So, how do we get here? Um, don't have a lot of time left. Let me show you real quick. I've got a fresh install fresh install of um the Drupal CMS. Actually, it's just the regular standard profile. I didn't install the the C the Drupal CMS
profile that comes with it. There's just so much stuff there, but it's 11.3based. there's two recipes. Um, the second one isn't published yet. This is the one that's been out for a while. There normalize responsive images. I can just come in. I can run a DDEV command. I've already downloaded everything. I'm just going to go over here to this other site that's running. I'm going to paste
in the DDEV command with Drush and it's going to apply all of those woles. >> Yeah, let's try actually. >> Oh no. Got to be kidding me. My inside I I might be. Wow. [laughter] Okay. It's a recipe. I I don't know what's wrong there, but you can apply it and and then what it gives you is not all of these art directed image styles. It gives
you all these other ones like you know. So, there's two sets. There's ones that are art directed that use those um you know the it's a a crop style that has that aspect ratio built into it. These other ones uh like this one here, it doesn't have that aspect ratio built into it. I mean, the crop the the image style does, but it doesn't use a manual
crop. It just uses the focal point that you select. So you end up are allowing to your your browser is going to choose from a lot of different styles, right? You're probably going to be able to use one really large image, right? Bring the biggest one that you got, the nicest one that you got, load that up, allow a Drupal to do its thing, and make all
the derivatives. Once you set it all up, now you're serving hopefully the optimal image that the browser is going to choose. All right. So, we're basically designing for equity, right? That's what this is kind of all about. Developers and organizations, they got to treat start treating page weight as not as an accessibility and social justice metric, not just an SEO metric, right? We've got to be that
better digital citizens. Use responsive images in a way that allows the browser to choose the most optimal image for every situation. Give it a bunch of choices and then just as you saw with the little tags on there, right? Depending on what browser you're on, if you're on a phone, if you're on a laptop, um if you're portrait or landscape, you're going to get different sizes. And
and really when you don't have like that debugger on, you can't see that happening. with the debugger on, you can see like which sizes you're actually getting. Some resources wrapping up here real quick. Only got a few minutes. Um, so this is a QR code to the normalized response of images. Uh, it it will work. It'll it'll apply for you if you got a 103 or better
site that uses recipes. Next one's coming up here in just a This is the art directed version of it. This there's no code here yet. Um just like that recipe failed. Other one was failing. I I don't know why. So this one doesn't have I I'll have to fix it tomorrow. But you'll have it. You can bookmark it and you can do the art directed thing too.
And that one comes with the demo, the same demo. And so you can kind of see it. That is a lot more. you have to customize that one a whole lot more. Just the normalized ones, it's very simple to use. You can use that one about anywhere. The art directed ones are a lot more custom. Um there's also I did not show it to you yet, but
there is um here is a bookmark that you can take once you have your images up like this. You can run this bookmark again it against it and it will tell you like maybe here are some better um sizes what you want to put in your sizes where here instead of 100 viewport widths. All right. Uh maybe you're not using this as a big banner across the
whole thing. Maybe it is, you know, kind of like in a body or in a paragraph. it only takes up half of uh your your width, right, on the largest. So you can modify uh your sizes attribute. This is basically it's um it it's just a media query, right? Um and so you can say at this smaller, you know, at 50% show it up to 960 pixels
and then above that then use a 100 or whatever. There's there's there's there's different ways that you can do it and that mark that bookmark will will help kind of figure that out. Um, sorry. Go back to here. So, if you want that, that's really handy. Um, um, I did a similar talk to this uh, back in August at Drupal GovCon. There's a YouTube video. Uh, there's
also uh, if you go there, there's also you can get to the, um, repository for that demo. It's got pretty much all this stuff and a lot more about images. This is a little more focused, a little less I know you're thinking, how could it be less all over the place? But it kind of Uh there's also this talk by Rick Hawkins from Drupal Con Pittsburgh um
where he talks about having an image plan. And so his is a little more high level in like a lot of the things that you'd kind of need to, you know, consider when you are planning out your images in Drupal. This is just kind of a free bonus cuz I appreciate what he did there. Um, and then there is the feedback form if you would care to
scan that and you can leave feedback. And we are really close to time, but I'm going to take couple questions for anybody that's got one. Yes, sir. So when your editors are editing and they're inserting images with the CK edit or whatever, >> do they see a hundred different image >> No, you can. So with the CK editor, you can set up to where if it uses
responsive images in there, you can like curate the list. Like I just, you know, I don't they only need to see 16 to 9 and square or whatever and that's the only thing that they have. Yeah. So good question. What can your editors get to? >> What module are you using for selecting the focal point? It is focal point. >> It is called focal point. Yep. >>
Does that work well with like the media modals will like add like cont? >> Yes, it works in that scenario. Yeah. So, when you're when you're um uploading initially or editing your media images, there is the little it's the um get back to it real quick. There. Here, not this one, but This is your focal point right here. >> Yep. >> Yes. Nothing. You >> What was
the that you use to generate all those images. >> Uh normalized responsive images. This is the one that currently works. The other one will work tomorrow or Friday. It'll work eventually. I will. It's a recipe. I just got Yeah. I went back here and then and you Yes, sir. >> doesn't allow you to drag that. >> Correct. Right. >> Oh, that is image w image widget crop.
I think it's the image widget crop. I believe that's the name of or it's image crop widget. >> Oh, thank you. >> Yes, image. Yeah, th this um from this QR code, you can get to the repo that I did this from and I have all that. I just ran out of time. Yes, sir. What was the debug module? >> Um, it is >> Is that a
specific? >> Yeah. Yeah. >> And that is the short on that is Yeah. Responsive_image_debugger. >> I just tip I 50,000 articles my space was gone. >> Okay. Large content base this space vanishing. Yes. >> And this was about >> Yeah. So there is anytime you make image derivatives right you are going to uh generate you don't have to generate they don't always get generated they get generated
for the most part on demand. So somebody's going to pay the price of being the first person that shows up on your site in the conditions where that you know crop is they're going to be the first one that hits that one and it's going to get generated by Drupal at that time. you can do it so that um you pre-generate them but it is going to
start taking up some disc space. One of the things that you can do to um a strategy is so so instead of storing let's uh let me go look at this real quick here. So, here's my media image, right? And you have the option of telling it, you know, what extensions are acceptable and where does it store it. And right here, we've got custom year and uh
yeah, date, custom year, and date, custom month. You can change that. You could make that like date, custom day would be maybe the first thing that you put in there. So now you're splitting your your images up into storing automatically into 31 files. So it's going to it's going to have a it's going to be the same amount of stuff on disk, but by having it spread
over more file or more directories, um you know, your your OS isn't going to choke as much. It's it's it's a it's a trade-off. Yeah, there's other things that you can do with, you know, to optimize the sizes of your images. Um, but again, I just the only thing that really kind of helps me remember this is that if you start with the big image, when you're
scaling it down, you're making it smaller, you're cropping it, whatever, it's probably going to look okay, right? But if you start with a small one, at some point it goes bad really quick, right? uh, hopefully you got a lot of disc space at some point. Any else? Thank you all for coming. Have a great rest of your Drupal Con. Go to the trivia night uh tomorrow and
do all the things. >> Thank you.
