 How's everybody doing today? It's always fun when you're in the last session slot. I have some math here, and I'm the last thing standing between you and dinner. And we've had a long full day, so if anybody wants to shake it out, you know? Anybody want to get in some dance moves? Just kind of stretch your arms. Jazz hands, we're in New Orleans, right? It's okay, no one's going to judge. We're all here to have a good time. Everybody having a fun day today? Like in New Orleans? We're having a good time. Okay, so if you are here to learn about how to make images looking great on your site, no matter if it's a large display or a small display, then you're in the right spot. If you're here just because you'd like to look at a lot of great cat images, that's perfectly valid as well. You can just stay. If you want a history of every nuance of how responsive images came to be, that's not what we're going to be talking about today. We're going to be talking about practical implementations for how to make responsive images. We're mostly going to be talking about how you make a plan. Like this cat here, right? He's making a plan. He's playing chess. I mean, cats are talented. Lots of things a cat can do if you give him enough time. Yeah, so my name is Mark, Mark Drummond. I am a front-end developer at Lullabot. This is the one image that is not a cat. Just to clarify. So that's me and my wife Rita and my daughter Izzy. And yeah, so I help make websites. Lullabot would do strategy design and development. And we work with a lot of big media websites that need to have a lot of great images on there. And you want those to load quickly. And that's what we're going to be talking about. I help contribute to Drupal, to Drupal 8. I am one of the co-maintenors of the responsive image and breakpoint modules in Drupal Core, which, spoiler alert, we might talk about today. There's a chance. And so there's my contact information. I'll have this again at the end. Just so you all feel at ease, these slides are already up on my session page on the website. So you're more than welcome to take notes if that's helpful for you. But we're all going to be fine here. All right, so let's just get into it. A little bit of a history lesson. As you know, the internet was invented in order to share cat photos. Al Gore called up Tim Berners-Lee, and he said, Tim, I want to share a cat photo. And so first Tim created this system with HTML and the World Wide Web. And really, you could only describe a cat in text, which was, you know, pretty cool. But then Netscape came along, and they made an image tag, and suddenly you could share cat images. And that's pretty neat. I think that's pretty neat. So let's just say you're going to do this. You get home after this, and you're like, all right, I'm going to get my laptop out. I'm going to go look for a really great cat photo, because that's what you do. And you find this image. Oh man, that's a pretty cute cat. That cat is just looking for fun. So you're a happy cat inside. Your inner cat is really happy. And then later you go and get out your phone. You get out your Android, your iPhone, and you go and you're like, all right, I'm going to look at the same photo. There's a wonderful looking, great cat image. And I'm going to look at this cat image. And it takes a really wild, long time to download and your inner cat has an issue with this. So you're like, OK, that's cool. I'm a web developer. I can fix this. I'm just going to make small images mobile first. We are going to make mobile first cats to unite the internet. And we'll just make mobile first cat images. And then everybody's going to be happy. So you go and you get out your phone and you load up your cat photo. It's so cute. Your inner cat is just like purring. But then you just like, all right, this will just work. You go to your laptop and you're like, OK, I can find that same cat photo, mobile first cat photo. And you're like, OK, it's still kind of cute, right? But it's kind of blocky and cat shouldn't be blocky. You should be able to pet them with nice fur. And they're just like, yeah, that's not quite as great. So you're giving the cat death glare to that image. So here is what responsive images are about. If you have a small photo on a small screen in a small space, your inner cat is super happy. If you have a large photo on a large screen, then you're just purring. And if you've got, but if you mix it up and you have a large photo on a small screen or a small photo on a large screen, if it's mismatched, there is a problem and we have to fix it. So, OK, we've got a really smart idea. We are going to give different cat images based on your screen size. We're going to figure this out together, right? Pretty cool. I'm going to like load up. I'm going to load up here on my phone and I'm going to detect it's a phone perfectly sized cat photo, but the problem is that if you wait until after your web page is loaded and then you use some JavaScript to try to figure out how big the phone is, how big the screen is, it's too late because what happens is your browser, you tell your browser, hey, this is the web page I want. It downloads the images and it's like I'm going to be super helpful. So it goes and makes a list of all the things. It makes a shopping list. I want this CSS file. I want this JS file. I want this image and that image. And as soon as I get a chance, I'm going to download those images that are in my HTML. And so it just gets to work. And by the time your CSS or your JavaScript have been downloaded and parsed, it's too late. It's already downloaded the image. So if you redownload a new image, then you're downloading the image twice and that's just really not a great experience. I think we could do a little bit better than that. So here's the trick. If the browser knows how much space our image is going to take up in our web page, then there's some extra possibilities about how we could do that because it could just know from the HTML what to do. So there's some pretty smart people, the responsive images community group, that came together and they put together some changes to HTML that allows this to happen. This is a real thing that has become a standard and it's something you can do today. So this is some HTML. Don't worry. There'll be more cat photos on the way. So we've got some HTML here. And this is an image element. That part looks pretty familiar. But we've got a couple new attributes on that image element. So let's go through these. So there is a sizes attribute and that sizes attribute has a media query inside of it. And people have seen media queries. How many people here are familiar with responsive web design? So that probably looks pretty familiar. We have a responsive window here. It's pretty awesome. So this is kind of like that. We've got a media query here and it says when the screen has a minimum width of 36ms, m's a really good measure to use for responsive web design. At that point, we're going to say that the layout, the size this image takes up in the layout is 33.3 VW. Now VW, people familiar with the viewport width? Some people are, right? It's newer, but it's very, very well supported. And what that basically says is it's the same thing as percent except it's saying of the entire viewport width. And the reason why it's good to do that is because at the point this gets downloaded, the browser doesn't know any of the CSS. It doesn't know what it's a percent of. The only thing it can know it's a percent of is the viewport width. So that way there's no confusion. This is of the viewport width. And so minimum width of 36m, that's 600 pixels. And if it's smaller than 600 pixels, then it'll go to the next option and we can just say it's 100 VW. So that means that if your screen is bigger than 600 pixels, it takes up about a third of the screen. And other than that, it fills the whole screen. On the phone, it'll fill up your whole screen. So, and the important thing to note here is that the first thing that it finds that matches, that's the one that it picks. It says, okay, I know how big this is. It does understand media queries right when it downloads, and it'll pick the right thing to know what the layout size is. And then the other thing is we give it a list of images. We give it some image files, and then we put a little bit of information after that file. And we got 1024W, 640W, and 320W. And that W is essentially pixels. But again, we're just kind of using some shorthand to say that this image is 1024 pixels wide. And that way the browser doesn't have to download the image file in order to know that. It's just like, great, you gave me some images, and you told me how big of them each of them are. So that's cool. And then the last thing is that we have a source image, which is pretty familiar from image elements. But when the sizes and source set works, this kind of works as a fallback. If you had a really old browser that didn't understand this in theory, it would fall back to that. As we'll get into, that's not something you have to really worry about that much. But behind the scenes, what's happening is that the browser knows the layout, and it knows its options. And from that, it basically, behind the scenes, changes the value of that source. So it's called the controlling image, because that's where the magic has happening behind the scenes. So to kind of sum up, we're telling the image how much space does this image take up in our layout, and we're giving it some options for the image file size, and then the browser is the one that picks which image shows up. We're not explicitly telling it. It's got a little bit of flexibility, but it's going to pick the image that is just larger than the amount of space that it needs, which is really good. So that's cool, and you'll see a lot of things that talk about here's what the specification means, and here's what the syntax means. But what's really important is what does that mean for me? What does that mean for my website? How do I figure this out? It's nice to know that there's this sizes and source set attribute, but how do I actually do something with this? So the first thing that we need to do is we need to kind of understand the relationships between images and layout. So, you know, here we got a little cat, he's got his head getting stuck in, and like if you get an image that's way too big for the amount of space in the layout, that's what we get a little bit of problems, right? And our responsive layouts are fluid, but our images are not, so let's just talk a little bit about what that means. So if you're familiar with responsive web design, you've probably heard this phrase before, target divided by context equals result. And it's basically meaning that in responsive web design, we tend to define things in terms of percentages rather than exact pixel values. So if we said, hey, this is a simple version of our website, at 750 pixels wide and we have our main content area, that's 370 pixels, and the sidebar is 260 pixels, we could convert that into percentages and say, all right, the main part is about 50%, the right part, the sidebar is 35%, and then even if the size of our browser changes, we don't have to manually re-specify that pixel value. The browser will just calculate behind the scenes, okay, at 1,000 pixels, that main content area is 493 pixels. Or if we go a lot bigger, and the main, the whole thing is 1653 pixels, like nobody wants to do all that math all the time, right? Percentages are great, they're less math, and that's cool. But images don't really work like that. They are measured in pixels. So here we've got a cat. That's a good green eye, I think, the cat. But that's made up of individual dots. There are individual dots in an image. If you open up in Photoshop and you zoom in, you'll see that there's all these little dots and each one has a specific little color value, right? And it's so many dots wide and so many dots high. And you can either have a lot of dots packed pretty densely, or you can have a smaller number of dots packed less loosely. And what that means is that'll determine how nicely our image will look, depending upon the space it takes up. We could have a cat photo that looks really good at 750 pixels on our screen, but if you use that same image and you have the same amount of information, the same number of dots in that image, and we're spreading them out over a larger area, there's just not enough information. The browser just can't make up that information. It can downsize pretty easily, because it can calculate that pretty easily, but inventing information is something that is just not really possible. So the sum of that is that we need to give the browser enough information for the amount of space that's available. And that way, our cat images will look really good. So cool. That's some good info. But like, how do we make that work? So we need to start taking a look at our website and understand how does our image fit into our layout. So I've got a cat blog, as you do, right? And it's about sunbathing cats. And this is a particularly nice sunbathing cat, just laying a top on a hero image. And then you've got a sidebar cat, because you have to have a sidebar cat. And that's nice when it's looking on my desktop. And then when you go down to a mobile phone, you've still got the cat on the top and it's filling up the whole width. But there's not enough room for an image in the sidebar, so sidebar cat is now below content cat, right? So they're changing the width. So basically we have a hero image and a side image. So how do we start figuring out how to define that? So we can look at the HTML. That's a really good place to start. I'm going to just read all of that HTML right now. Or maybe not, maybe we won't do that. Maybe I'll just kind of tell you that what you need to do is just sort of trace the path from the top of the document down to the bottom, down to where your image is, and then understand which CSS rules apply to each of those. So we kind of can just look and we have a post container and a post inner and a post aside and a post aside image. And we just have to look at the CSS rules for that. So let's look at the post aside because that's where kind of the action is happening with the sidebar. And so at the smallest size, it's taking up the full width except for there's a little bit of a padding on each side. There's 5% of padding on each side. When we get a little bit larger, around 600 pixels, 640 pixels, then we're going to float that section to the right. We're going to put 2% padding and that's going to take up 40% of our screen. And when we get a little bit larger, about 1200 pixels or so, then instead of a percentage for the padding, we're going to put 1.5 RAM. And RAM, people familiar with RAM? Another great unit, again, really well supported, kind of like an M. So an M is basically, if it's on the root level of your document, your body tag, it's generally 16 pixels to 1M. But if you have different M definitions as you're going down the chain, that can vary. So RAM just says always base it off of the root element. So it's really good for calculating out how wide something is going to be, how tall something's going to be. No matter where you are in the nesting. But media queries, you need to use an M because that's the way the world works. So we've also looked beforehand at the rules and what we found on the post is that basically the main overview section is 100% wide, but there's a max width, once you get to 100 RAM, which is 1600 pixels, and that's the max width. So get out your Excel sheets, get out your Google sheets. It sounds silly. You can write this down on a piece of paper if you want, but a spreadsheet will help you do the math. And there is math involved. But it's okay. We're going to walk through it. It's going to be totally fine. And so we're going to start taking a look at each of these things. So we're going to kind of put them into our little spreadsheet and then we're going to start figuring this out. So our post aside, we said there was a little bit 5% padding on each side. So then we can figure out that part is 90%. And then when it got a little bit bigger, then it was 40%, and the padding was only 2%. Sorry. We start multiplying these out. The post by the post aside. And you can have multiple levels of nesting. But you kind of just multiply out. So you understand how does this image relate to the full width of the viewport. So we've got 36% there, 40% minus 1.5 ram times 2. So you multiply that out. And it's 40% minus 48 pixels. And then when we get to that max width, then instead of 100%, it's 100 ram. So we have 1600 pixels times 40% minus 48 pixels. And you can kind of multiply that out and sort of see. Does that kind of make sense what we're doing there to figure out how the layout works? All right, cool. So that's one part is understanding the layout. Now the other part is understanding... All right, that gives us some percentages and some numbers, but I need to figure out how big are my images going to be? We got to, you know, go out to the ballpark and start getting some rough numbers to make these calculations. So we're going to use this spreadsheet again. It's going to be okay. So we've got our layout information on the left side. And our default breakpoint. So this is our smallest breakpoint, which I kind of assume 320 pixels is about as small. I got to watch here... I mean, I might want to look at a cat image there on a web page someday, but it's not something I do now. So 320 pixels... that's what we're going to do is our minimum. So we do that times the 90%, because at 320, we're taking 90% of that, so it's 288. Here's the tricky part. So a breakpoint means a media query is where something changes, right? So that 90% value is valid until you hit the next breakpoint. So that next breakpoint is that next line down, the min-width 37.5m, which is 600 pixels. So we're going to take the 90% for that first section of our layout information and multiply it by the next breakpoint, because that's the largest it'll ever be. So we're going to say 540 pixels. So then you just kind of do the same thing going on down, and you can cop... just make a formula to multiply this out and drag it down so you don't have to manually do each of these. So you have 36% times 600 pixels. That's 216. And then, again, you go up until the next point. So you have 36% times the next breakpoint, which is 1200 pixels. So that gives you 432. You have 40% minus 48 pixels, and you're multiplying that by the smallest it will ever be in that breakpoint range, which is 75m, and you get 432. That goes up to 592. And as it happens, when you do... you don't have to do a lot of... that's pretty straightforward. It's just 640 pixels minus 48, so 592. So now we know at each of these breakpoints what's the smallest this image will be and what's the largest it will ever be. Does that make sense? How we kind of went through that? We'll take questions at the end. I promise you. So we look at that, and we look overall... what's overall the smallest it will ever be and what's the largest it will ever be? And now we have our minimum size for what we're going to do. So that's good, but we want to have more than just two variations on the image. Between 216 and 592, that's still a pretty big difference. That's still 2.5 times bigger. So how do you figure out how many stops you put in between those smallest and largest? That's really the trick if you want to do responsive images. So this isn't a hard and fast rule. This is just Mark's rule that I use, but it's my guideline. I multiply each size from the smallest by 25%, so times 1.25. And that means 25% wider and 25% taller, so overall it's about 56% bigger. Now, that's still a pretty big jump, but if you made it smaller, like overall 30% total, then you'd have a lot more images you'd have to create. And if you did bigger, like a rule of 50%, then you wouldn't have to create as many images, but there'd be a bigger gap between each size and more opportunities for somebody to download a larger image than necessary. And keep in mind, your screens are going to be all possible sizes. So it's not that an image will always be 56%, it might end up being in the middle there. It might just be 25%, or a little bit on either side of that. So that's how I figure this out. And then I just kind of start doing some multiplication. Again, a spreadsheet is a really good tool here. Just make the formula and then you drag down. So I multiply that out 25% larger each time. 216, 270, 337, 421, 527, 659. And when I get to that 659, I remember, that seems a little bit bigger than 592 that I want. So the other way you can do it, just to give you an option, is you can divide by 1.25. So each one is 25% smaller than the rest. So I just wanted 592 and did the reverse. You can go either way. I mean, this is just one way you can do it that I've found useful on projects. And so I come up with a few options for here's the potential image sizes I might want to create. Okay, and that's very cool. The thing to keep in mind though, is that not all screens are created like. Particularly phones and tablets, tend to tend these days to have high resolution screens. You might see that they're 1.5x or 2x in terms of resolution. And so just going to take a second to kind of walk through what that means. So if you have an older phone like this cat does, then you've got one pixel. So one little dot of light on your phone is equal to one pixel of space in your browser. But what's happened on newer phones, like this cat's pretty happy about his new phone, right? So they're packing more dots of light into the same amount of space that the browser understands. So the browser still thinks that there's 320 pixels across the screen, but there's twice as many pixels in that space. So we're getting higher resolution. So the end effect is like, step, we need to have more pixels in the images that we're downloading on high resolution screens. Because if not, we're going to have our inner mad cat. Because we're not going to have enough information for the actual number of pixels displayed on the screen, right? So ultimately, this isn't too hard. Math wise, you just have to multiply everything by two. You could do by 1.5. It will give you, you know, that will give you an in-between range. A lot of Android phones are 1.5x. iPhones and i everything tends to be 2x. I think 2x is a nice, it ends up working out nicely. And a lot of times you'll get some, I'll kind of show you, it gives you some math benefits. All right, cool. Those numbers were really messy though, right? Like, I don't want to, there's not like a .67821 pixels. That's not a real thing. So we need to have real numbers that are a little bit cleaned up and easier for us to understand. So we're going to just start cleaning these numbers up. So you can do this any way you want. I just started looking at these numbers like, okay, 242 is kind of close to 240. 303, let's go with 300. 378 is 375. All right, and you just kind of pick some numbers. And that 592, I was like, ooh, I have a 300 earlier here. So if I pick 600, remember we got that 2x thing going on where we need things to be multiplied? So you start getting numbers that start to match up because then, as you'll see, we have to do less work. We're cats, right? Cats like to do less work. It's like, that's the smart play. So nice. So I look at those and they're still all about 25% different. And then when I put that 2x in there, I kind of look across and see, are there any ways that I could tweak this a little bit more? And I see, all right, well, we've got a 480 in that upper right-hand column. That's nice. That's like 470, 480 on that lower left part. And then the 600's already match up. That's nice. 480 times 2 is 960, so I'll tweak that number a little bit. And so we get a few points here. It depends on what a big, how much of a range you have between your smallest and your largest. If you had for that hero image, there's going to be a wide range in sizes, right? And just as an exercise, I was trying to figure out for that one. And originally when I did the math, it was like 18 potential image sizes. And I got it down to 11 image sizes just by kind of, you know, futzing with the numbers a little bit and just tweaking things a little bit. And so here's our final list of widths that we need to create for our images. And again, they're all about 25%. So that's within a range that I'm pretty happy with. And we have eight source widths versus 10 source widths, which means we have a little bit less work to do and it'll also take up less space on our server because there won't be as many variations of the images that we create. So let's just translate that back to the HTML then. We got, get at this in our sizes. We got two cats with different sizes there. So we put that layout information. Remember, the first thing we did was we calculated the layout information for our side image. We just translate this a little bit. The 90% becomes 90 VW, the 36%, 36 VW. And then you can use this calc thing. People use calc in CSS. It's a really handy thing and it's super well supported in browsers. So I highly recommend using it. And it lets you combine percentages and fixed numbers very well. So you get your media queries in there and you can match that up with the width. So does that kind of make sense how we went through and figured that out? Cool. So now we're going to look at the source attribute, put that into some concrete terms. We created all those widths. So then that means that ultimately we need to create a bunch of images, variations, and they will have that 240W, the 300W, the 375W, all the image widths that we created will be there. All right. So what that means is ultimately our image element looks something like this. And that's what we want to see on the page. And the cool thing is if you were doing this with some other project, you'd be like, no way do I want to manually create all those images. I don't want to spend all day going into Photoshop and save for web 12 times for every single image that I put on my website. But we have a secret superpower. It's called Drupal. Drupal does things for us. So we're going to come back to that in a minute about how Drupal can do some of our work. All right. Before we do that, I just want to talk about, we've talked about the HTML side of things. So just a quick overview about that you have to put some CSS into this to make it responsive as well, to make our images nice and fluid. So a lot of times in, this is the CSS rule that I use, and it's height auto with 100%. It's debatable if the height auto is necessary, but I just put it on there anyways as a safeguard in case of some weird inheritance thing in CSS. And I use the rule with 100%. And a lot of tutorials you see will say max with 100%. I wanted to talk a little bit about why I don't do that. And again, you're welcome to do whatever you want. This is just what I found from experience. If you have width 100%, then a lot of times when you have an image on your website, you have a specific place that you want it to be. It might be in a gallery of images, and you expect it to take up a certain amount of space in your layout. And so width 100% says, okay, whatever you've defined as the container of this layout, we will take up 100% of that space, so it will take up just as much space as you were expecting. And if you set max width 100%, then it will take up 100% up until the point where as big as the actual image file is. Now, we've done a lot of work to calculate out our layout, and in theory, we should be covered. We could probably do max width 100%. But to me, it's just a little bit of an extra safeguard to put width 100% instead just to make sure there's this slight possibility that maybe an image is a little bit grainier than we would like, but overall, I really care about the fact that this image is as big as I want it to be. All right, cool. All right, so we're going to send in the robots now. We're going to get some help to do work because that's nice to have happen. So one tool to keep in mind, just in case you're wondering, all right, this is kind of new, right? I want to make sure this works in some older browsers. There's a polyfill that is called picturefill.js. And it's a little JavaScript thing that you just put in the footer of your website and of your HTML, and it fills in the cracks in browser support. So just in case somebody comes on an older browser that doesn't understand this new specification, it's fine, it does all the work to find the scenes to make sure that this works anyhow. And people get to see images the way they're supposed to be. And Drupal will include this by default. So you kind of just, it is okay to do this. You don't have to wait for browser support. So we're going to get our Drupal on now, right? So starting in the Drupal spot and like showing you in the user interface, we've taken some time and we've made a plan for what we're going to do. We've taken a look at our layout and we've got a plan. We're ready to go. So in Drupal 7, there are two modules, the picture and breakpoints modules that are essential tools for making this work in Drupal. But in Drupal 8, it's all built in. The names are a little bit changed to protect the innocent. You've got the responsive image module instead of the picture module and you have the breakpoint module, you don't need to worry, it's in core. Responsive image module present is not turned on by default so you just have to go to the extended page and turn it on. And then you can start doing cool things. So what do those mean? What are you going to do with those? So if you were wondering, can I search the internet and find a picture of a breakdancing cat? Yes you can. It is a possible thing. So breakpoints and breakpoint groups that are useful to know about within Drupal. And a breakpoint is just a way for Drupal to understand a media query basically. And a breakpoint group is a set of breakpoints for one type of thing. Like you might have a breakpoint group for your hero image or for your sidebar image. So you gather all your rules in one place. But what we're doing with sizes and source set is it's simpler than that. Because breakpoints are... We'll get to why you would actually use this. But for now know that you really just need a breakpoint that has an empty source set definition. So in Drupal 7 you have to do that. You have to create a breakpoint group. You could call it sizes or whatever you want and just make sure it has an empty source set. Breakpoint which does ship with it. You could put that into your .info file in Drupal 7 if you want it. You don't need to but you could. Depends on how you're managing your configuration things. In Drupal 8 there is a file that goes in your theme called a breakpoints.yaml file. And this is one example where it says theme in all caps that would be your theme name. This is a simple example of what a breakpoint definition looks like for an empty source set. And the good thing is you don't actually need to do this at all in Drupal 8. If you're just worrying about making sure that your images look good on small screens and large screens which is called viewport sizing generally. If you're just doing viewport sizing there is already a breakpoint group that's built into Drupal 8 called responsive image. And that has an empty source set definition. So you can just use that. Okay. So that's one part of it. Drupal needs to know about the breakpoints. The other thing is that we need to have image styles. People have used image styles right. Super handy tool. They let Drupal do the work so that you can just upload one image and Drupal will take care of doing the resizing of the image. So we have to tell Drupal what are the rules that we want for resizing our images. And luckily we already did all the math for this. So we already came up with here's all the image sizes that we need to create. So we can go into Drupal and we can go into configuration media and then image styles. And then we just need to add some styles in there for our responsive images. And what I recommend you can again do whatever you like but I tend to not say like hero and then you need to identify it somehow. You could put something and then a number that tells me how wide that thing is. You could put hero or side image or all the different types of images but you might find that multiple types of images on your site have image styles that are the same size. So if you use a naming convention like this then you can reuse things and do less work which is always good. So width I use if we're just defining the width on something and rectangle I use if I'm defining the width and the height and I'll talk in a little bit about why you might do that and square is what I would do if I mean you can just do width, you can do whatever you like. That's just what I do. So you create your image style and then you select the effect that you want to do and this is kind of just off the edge it looks like but there is a scale that you would select. You would select is scale and if you're just defining the width you don't care about the aspect ratio then you just select width. I select allow upscaling generally what you want to tell your image editors is just upload the largest version of an image that you have. If you know that they're always going to be uploading an image for a particular type of image then you can tell them you look at your list of information and you're like okay the 2x version will, the max size is 2,000 pixels or 1,600 pixels so you could tell them that's the size to upload but you never know what might happen in the future so you could also just tell them whatever the largest source file it is upload it and let Drupal take care of doing the resizing. So then we need to tell Drupal how do we connect those two pieces of information, the breakpoints and the image styles and in Drupal 7 this is called a picture mapping so we have a cat sitting on a map cats like to do that sort of thing if it's important so we're going to go and we're going to add a mapping and and we're going to select the breakpoint group that we care about so we created that sizes breakpoint group and then we're going to say we're going to use the sizes attribute and because that's the type of thing that we're doing. In Drupal 8 it's a little bit different we select add a responsive image style and then as part of this process we define the fallback image style which if you remember back to our HTML that was that original source and so it's kind of nice in Drupal 8 you get to define that right on your definition of this overall style in Drupal 7 so you can define this every place that you use your responsive image and it's a little bit more awkward so Drupal 8 we kind of clean this up and made it a little bit easier and so now we look back at the information that we figured out about the sizes and we can put that into our text box we can just kind of copy that and we already have all the information right there because we figured it out and then we have all of our image styles and we just select all of those image styles that we had gone ahead and created and there you go you've defined how Drupal can create a responsive image style we're not quite done yet but we're getting close one thing I want to make sure that you do you know our overall goal is that we want great images to load fast right so one thing to check is there is a it's kind of sounds obscure there's an image toolkit configuration page and this is like if you've ever used Photoshop and done save for web and it gives you a percentage of quality that you want to select this is exactly like that this is how Drupal does the quality level by default I'm pretty sure it's 75% but you want to play around with that number because generally you can set that down to something like 60% and you can test it out and just visually do an eye check generally I find that that looks exactly the same if you go between like 75 and 60 and you'd be amazed what a difference that makes in terms of file size so your images will load more quickly and if you go much below 50% that's probably going to get a bit sketchy but I would just recommend playing it around it depends on the needs of your site as to what you set that as but just kind of play around with it alright cool so now we got a stylish cat and we're going to start using our responsive image styles we're going to put them into action within Drupal so normal place you would use an image is in a field you might have a piece of content that has an image field and so on your managed display page you can select formatters for your different fields and by default an image field will have this image format selected and what we're going to do is select the picture format and once we've done that then we can click on that little gear icon and then we can format, we can change the settings we can we can select which picture mapping we're going to use so if we have multiple mappings we have a hero image, a side image we can say alright we want to use the side image rules here and in Drupal 7 you have to select that fallback image we don't have to do that in Drupal 8 and in Drupal 8 it will be called format settings it will be like responsive image style instead of picture but pretty similar so that's cool has anybody ever had to do funky things with images in pre-process code? raise your hands if you have not a lot so if you ever do this is what you do if you want to sometimes you might find this is in the slide so don't write this down but if you needed to manually add a responsive image style to a field in pre-process code you would have to do something like that and that's really complicated so in Drupal 8 we made it a lot simpler there's a lot less things you have to do so again only worry about that if you need to worry about it so one other thing you might ask is what about using WYSIWYG what about when I have content that goes into the main body part so that is not working right now in Drupal 8 there's some ways to make this work in Drupal 7 but I'm trying to get this fixed and get this into core right now you have to manually specify the width and the height of an image when you add it via WYSIWYG in Drupal 8 which is a little bit frustrating but I'm working on getting it in a responsive image style and I say other people are working on it you can work on it I've got an idea come on Friday to sprint day and come talk to me if you want to help we've got a patch that's on its way but it needs tests so if you know how to write tests or unit tests I would really appreciate your help another fun thing that you might this is kind of a work in progress one of my co-workers in a responsive image batch sandbox I think it's really cool because it does some of the work of creating image styles for you so you don't have to do it all manually it's really neat and we're going to work on trying to continue to improve this so it will be a useful tool Drupal SAS breakpoints is another tool that one of my co-workers Thomas Latimore put together that lets you reuse those breakpoint definitions which is kind of neat just going to quickly move on to some more advanced use cases for responsive images we've covered how to use the basic responsive images that you'll need to use 90% of the time so now you know how to do that you've got extra superpowers so if you've read up on responsive images at all you might have seen that earlier there was this picture element and we haven't talked about the picture element at all and that was the original definition of how you did this there's a picture element that's kind of a container for some source elements that are inside there's also an image element that works as the controlling image each source element can have a media query on them and then originally it was designed about you would have to create source images for each point where you wanted to change the image and you could provide 1x and 2x versions but that meant you had to create a lot of different source elements to really cover the range of sizes sizes and source set lets us do that in a much more compact fashion and again it picks from the the first one that it finds the first match is where it'll pick and so that original definition might not be useful for viewport switching but it's super useful for a couple other things which generally are called art direction and I'll break that down into two different types of art direction one is aspect ratios and aspect ratios so let's say that you have an image and it's in like the main part of your article so you just have the normal image and it's 75% maybe this is like something that goes at the top let's say this is the hero image so on your phone this looks great because it takes up this amount of space and then you still have some space below that where you can see the text you can see the heading but when you get to a larger size screen it doesn't work as well because it takes up less space so you could have a smaller aspect ratio so that especially if it's horizontal by making it a little bit smaller then you have still some room for some space below it for a headline or something like that if you got up to a larger size desktop screen then you might want to have a smaller aspect ratio and for like a really big iMac you kind of got to go pretty narrow for an aspect ratio in order for this to take up the right amount of space so this is where picture is great because on each source element you can put a different aspect ratio because the browser can't tell the aspect ratio things it's doing picking things automatically remember we're giving it some guidance and saying at this media query I want you to use images of this aspect ratio and you might only have three aspect ratio switches so you could still have some big gaps between the smallest version of that and like a medium sized one so you could still use sizes in the source set there if you want and again if you ever need this this is kind of some extra protection to make sure you get things that are the right aspect ratio this works really well for YouTube videos in an iFrame for example instead of to make sure that the container is the right size then we're going to set the height of zero on the container and do a padding bottom for the percentage that is our aspect ratio and then we'll set position relative and overflow hidden and then the image itself will do position absolute you could probably do the positioning here a number of different ways but that way you're basically creating a space for where the image is going to show up and then you're positioning it there kind of behind that opening that you've created and the overflow hidden means that if something gets a little bit larger you're covered and then in your CSS at each media query change then you would just change the aspect ratio so this is where breakpoints actually start to get useful that's a use case where you might want to have something in your theme a breakpoints.yaml file and here I add a theme.hero and that's how you can define a breakpoint group right now there's not a really good way to define a friendly name that will show up in the user interface in Drupal 8 for a breakpoint group you can do that just fine in Drupal 7 but it would show up in the interface as the name of your theme .hero and there you can define your breakpoints for all that switching we get some more RoombaCat which I think is a plus and then we go and we create our image styles again and here we're going to use scale and crop so that we can set both the width and the height and that's how we set the aspect ratio we have our width numbers that we already created and then we just times set the aspect ratio percentage to get the height that we want to add to that as well and then again we're going to map these two together and go into the interface and do that part the other thing is you might want to do some really fancy art direction where you're going to put different crops on an image so what does that look like you might have a cat that's in a field and it looks really great on a desktop but because it's right in the middle of a field and it's a very big image so you can see all the detail but when you look at that on a smaller screen you're kind of starting to squint to see the cat because it just doesn't take up as much space so you might want to crop a little bit tighter or even go in really tight on a small screen and again the picture element comes in great for this so for each source you can have a different image crop and you can use sizes in the source set on those source elements as well and here is some more break dancing we're going to do some more break points and again you would just define your break points that you want for that art cropping and get a little bit more Roomba Cat and what would you do for the image styles there's a couple good modules there's one called image focus another one is focal point is further along in Drupal 8 support so I'd look at that one for right now but basically when you upload an image you can point to some place on the image and say this is the most important part of the image and then you can set different crop levels on your image styles so you can say crop really tightly or like don't crop at all and that way then you can create a set of image styles for the tight crops and for the medium crops and then you can just map that up in your responsive image style between the break points you've defined and the image styles for that so cool it also can be used for image type swapping there's a newer image format called WebP and you can define a WebP version on one source element and then fall back to the not WebP version so it's a neat tool for as new image types get introduced so that's something you might want to do alright so to sum up I just want to remind us all we kind of went into the weeds about how we do all of this but just a reminder that we're doing this for a really important reason there are huge cat photos out there and a photo is important I've been talking about cat photos and it's joking about those those are really important they're a hugely important part of our website because they create emotion in a way that a well written text is one thing but a photo is a thousand words and really can help generate the sort of emotion that will drive people to action because that's what we want to do with our websites we want somebody to learn something we want somebody to take some sort of action and images play a huge role in doing that so I care a lot about front end performance I care a lot about our websites being fast and sure big images are something that can make websites slower but I don't want to tell you to not use images they're an important part of the communication medium but we can do that and still be smart about how we do it so that our websites still load really fast because that has a huge impact if somebody might have the best image in the world but if somebody's stuck waiting for photos to download not just one photo but like 10 photos on your website it doesn't matter what your information is if they're waiting for a long time they're just never going to get to the point where they care and so just as an example if we took this photo and we put it on like a really big screen maybe it's a 5,120 pixels wide on a big high resolution monitor whereas on a phone you might just need 320 pixels that's 120 times different that's a huge amount of time that people could end up waiting so it takes some time to do this I think the first couple of times it might take a little bit longer to do the math and do all the setup first couple of times it might take you like an hour or an hour and a half to do this for one type of image on your site but as you kind of get in the swing of things maybe it's 30 to 45 minutes to do this and you know, you can look at your website how many different types of images are there is there 5, is there 10 it will take time in your project to do this work but I really want to encourage you to build that time into your project as you're planning out your project build in some time to do this sort of thing because this is probably the biggest impact that you can make on making your website faster particularly on small screens because the file sizes can just be so big the biggest file size thing that's going to be on your website so that's what I want you to hopefully take away from this is try this out and make the web a little bit faster so, again, I'm Mark if you have any questions about this more than happy to talk about this just find me anywhere, you can contact me on Twitter at Mark Drummond I'll be tweeting out a link to the slides and again, you can find that on the find that on the session page again, join us for sprints whether you want to work on responsive images or something else please join us for sprints on Friday please rate the session and that's what I'm here to talk about today so, have some questions anybody have questions? I know we're getting kind of tight here yes alright, you're right let's do this on our site sorry, did I go in first? yes, you know it, let's go here first point to start with large to small to confuse us how that works the breakpoint definitions in the file start from small to large in breakpoints.yaml it's from small to large in css it's small to large sorry in the html it is from large to small in the definition of the breakpoints file it's from small to large for responsive image does that make sense? it's different in two different places in breakpoints.yaml it goes from the smallest to the largest the html the drupal creates goes from largest to smallest and in css it goes from smallest to largest does that help? I just wanted to know if you had any experience with using picture with manual crop breakpoints with what? using manual crop with breakpoints I have not done that if you know of a good way to do it I'd love to talk to you about it I've been using it and it kind of fails on the thing but you can set it up so the crop comes with your definition cool, I'd love to talk to you and learn more about that I'd say 320 pixels something like that also I should have said this earlier shout out to Peter who's back there Peter is the one that helped build the picture and the breakpoints module in Drupal 7 and get this all kicked off and he's done he did lots of the coding on Drupal 8 I kind of said yes, that's good and Peter did the work so please clap for Peter that is awesome alright, yes the field form matters yes so in CSS you should use em, the testing shows that that is the most consistent thing that will work in the HTML I think em will be fine I've seen usages of rem within the HTML part of it and I think that works better than in the CSS CSS part so I trust rem pretty well for other things besides the media queries so tend to use it em would be safe in media queries always yeah anything else? that's correct that's right yes, you're defining 11 different images in the HTML but the browser will only load one at the time and Drupal Drupal creates the first cached version of that image style when it loads which is a good thing to know sometimes if it's got like 100 images to create at the same time I think there's some people who have been working on some performance optimizations for that yes no, so the question was can it do progressive so it's up to the browser how it decides to pick between when you're using sizes and source set in theory it could use bandwidth considerations to determine which one to download I don't know if a lot of browsers are actually implementing that in theory it could there are some implementations out there to do this in conjunction with lazy load you kind of have to do testing to see there's some tradeoffs for that it's sort of deferring if you have like 100 images on your page then a lot of those are further down below the fold it might create a quicker page load if you lazy load the later ones but you're just deferring that so that then when somebody scrolls down you know there could be a delay while those images get loaded in so with everything performance there could be guidelines but test try things out and test it out yes so Jason Greggs has a really good article about that sort of art direction where text is involved you can do some responsive images through CSS background images that is one option where it might make sense in certain use cases there's a property called CSS set that can be used for that I think I'm not familiar with that this is more about the content images that sort of thing is sort of a special case I'd say read Jason Greggs article about it he talks about it alright thanks everybody have a great evening so there's nothing perfect so there's another method that's out there where they try to calculate the actual k difference based on the content of the image there's a service out there called Cloudinary I think it's called that tries to like the math behind the scenes it's a web service that does that and I think that's great but it's hard to tell somebody like that's a lot of manual testing or automatic testing for like a paid service and the 25% rule nothing's perfect but I think it's a thing that helps make it possible for people to do this you know whereas like trying to measure k is a great barrier to try to do that so nothing's perfect I think it's it's good and the 25% ends up giving you a lot of mathematical concurrences where you get things where they line up on that 2x line and so you can tweak the numbers and create less image sets so that's just what I got through guessing Jack yeah yeah it's tricky if somebody really wants full width no max width that's really difficult I'd say put in aspect ratio switching because then at least you're reducing the height of the image I mean number one like if you don't do aspect ratio switching on a hero image that's full width you will never be able to see the headlines and stuff like that and I guarantee you the designers and business owners will cry foul on that so aspect ratio is pretty important for that but you get an extra benefit where if you're doing aspect ratio switching it's less pixels involved so they get to be big but there's one image I don't know it's a trade off yeah I thought about updating the slide to mention that and then it was like it's 5,120 pixels that's where I got that number yeah yeah so EM is a typography term but what the practical implications are that it's I generally it works out at 16 pixels is 1M but some browsers define it differently as like 22 pixels and so by using EMs within your media query I guess I could have explained that a little bit better by using EMs in both your media query and within and REMs then within your widths of everything that you're using within your CSS then if somebody happens to come to your site on a device that has a different like 22 pixels to 1M ratio or it's really good for accessibility because some people with eyesight issues may set a higher pixel ratio so that things appear bigger on the screen and if you do things consistently then it's like the equivalent of where you might have had a desktop layout you would have a tablet layout instead so elements you know can be fit on the page larger because the problem is if you don't do that then if the ratio is off then you could have super long line lengths for example and the content going off the screen so yeah yeah to 100% is what I recommend that's the trick yeah I don't set it to a pixel because that wrecks the flexibility yeah they can in certain browsers but I can't remember it was Internet Explorer there was a problem for a long time with that I'm not sure I mean the latest versions of Internet Explorer are pretty good so I'm not sure if they fix that or not you can in Firefox and Chrome but I say 100% like a lot of testing shows that gives you the