 Hello, everybody Today I'm going to talk about Responsive images and how to have them under control I'm Christina Chumillas. I'm my designer and a front-end developer I work at Imbra Drupal agency in Barcelona and you can find me on Twitter as Chumillas or Drupal.org as a criminal So the main thing that I'm going to talk about is the basics of our responsive images responsive images in Drupal and finally art direction The basics it's not just I'm going to do an introduction. It's a really important part for me because I Have to say it. I just don't like doing sessions I just really get super nervous and I'm here thinking all these all these smart people just looking at me and expecting something so Last year I said, okay I'm gonna talk about something that I really know about it and I've been doing Responsive images for years with Drupal 7 and so on and I know how to do it And I started the session and I realized that I was doing responsive images wrong for years So that's why the basics are important So let's start with some General information that page weight for the website has been increasing Incredibly during the last year just from 2015 to the last year it was It was a 10% increase in of increase man It was almost two megas and a half and now as average for all the websites. So that's incredible So some just fast faxed around 60% of the traffic for websites are images So we have a huge impact if we think about responsive images Images are loaded in synchronously, so we have to take that into account and usually Images that we put on the websites are usually too big. So we have a huge Part to play there So here the main goal is to deliver the highest quality images supported and nothing more So let's start with the basics So what do we know is for example, we have two main Things here the outer the person that is doing the website and the browser And we have several things that one knows but the other doesn't know for example The viewport dimensions the person that is creating the website that is creating writing the code He doesn't know how this website is going to be consumed So he doesn't know that if it's going to be an iPhone it's going to be a super Retina display super big so he doesn't know but the browser actually knows it because it's displaying it the image size Relative to the viewport the author knows it because he has designed it or he has He has coated it so he knows it and the browser didn't know it, but now with the new The new things that we are adding with responsive images. He knows it in this case It's the sizes attribute. We will see it right now the screen density again the author doesn't knows it but the browser knows and Finally the source dimensions If it's 100 pixels or 2,000 the browser doesn't knows until he gets the image So he already has the image. So with the new attribute Air as air see set you can say that to the browser before the browser loads the image So who has all the control is the browser? This link here is the best Block post that I've seen explaining it and it's amazing. So we want to learn a little bit more. It's super well explained and Here we have The anatomy of an a skilled image We have here the new attributes We have the the src set the sizes So let's look a little bit to them The DS RC set is a way to saying to the browser How big are the images that you are going to send to him? So before he loads it He knows if he is going to need the big one the small one So he doesn't have to load all the images just the one that he needs and With sizes what we are doing is explaining to the browser. What are the proportions? For example with? With that is bigger that 36 a.m. The Image needs to be a 33% So the browser will decide which image has to be loaded So well, it's not mobile first. It's actually mobile second, but first because we have the 100% the second the second value, but it's just like moving the Medi-Aquare is to the to the to the sizes attribute So here's is the Anatomy of a response of a responsive image skilled. It means the same image So that's a skill So we have this huge image in the browser and we have the small image But exactly the same image on the mobile. So what is? Our direction our direction is changing the image on the mobile So we actually have different images not just the same image is skilled and For that we have picture So that's the thing that I was doing wrong. I was using picture to create to build all every one of the Of the responsive images that I was Creating for all the projects So here we have the picture anatomy. We have the The tag the picture tag that actually is a container and then we have the the the the tax source where Inside we have again the DSRC set where we can have actually different densities and For each source we say where it has to be applied. We have the media. It's like a Media query attribute and it says this source is going to be applied on small for example, this one is from zero pixels to almost 29 a.m. And the other one is going to be applied to a bigger one and Finally, we have the fallback the EMG tag inside the picture as a fallback. They always need to have slide for Internet Explorer So here it is Just the picture tag and all these attributes go back perfectly in most of the browsers but Not an internet Explorer and for that we have picked a picture feel It's already built on Drupal. So those that you're that are just using Drupal Don't have to worry about it Otherwise you have to use it So Let's see how to build actually responsive images in Drupal a little bit of history on Drupal 7 we have several approaches to For using responsive images the first one was using the actually the same The same modules that are right now in core in Drupal 8 it goes the The module res EMG is and bread points and I Have to say it Jail AS and addicts made a huge work here because they already built something a lot of years ago before It goes actually on a standard and everything and we had this on Drupal a lot of years ago So it's great and it has to be I want to say it and We have also some great modules on Drupal 7 that they were adaptive images and a I Yes Sorry, my English is not the best one and another one was client-side adaptive images If they were all different approaches so on Drupal a to have responsive images It's actually his name is his machine. It's machine name is Steel picture and we have the its dependencies are breakpoint and well image and via file and field and The process for creating a responsive image are these four steps The first one is creating or importing the breakpoints later creating the image styles Later on we create the responsive image itself and finally we apply it on views or a view mode or whatever So let's start with the beginning We have to start creating or importing the breakpoints breakpoints are created both on themes or on modules We need to create a File that it's called the theme or the module name dot breakpoints dot yaml and Inside this what we have to do is move these Medi-queries into Drupal so Drupal can read it read it. So for example for Bartik we have Three breakpoints here and for each one we need to Place the name of them of them of the in this case in this case a theme And the machine name and for each one we need the level the medic query The multipliers and some different properties so the second step is to create the image styles and Something really important here that I keep saying One one time and another is we need to plan the image styles We usually jump next to let's create all the image styles and if we plan them It's much easier and we will save a lot of time. So let's have this example. We have three break we have two breakpoints with three three sizes and for example on the tablet we need We have this design where we have two columns and for example the way at the width of these tablet is for a Eight hundred and three pixels then we take from here take off the margins the gather So we end up with this 770 pixels divided on two images. So we have this size for this image And we always have to take the bigger The biggest size for this breakpoint and then start dividing from here So I'm going to explain just a little bit that there's An amazing presentation for from mark through moon It goes in New Orleans, and I was in New Orleans, and I said I know about responsive images and I didn't went to that session and He it's a one-hour session explaining this So I'm just going to go around it super fast, but it's it really worth it so what we do is We try to use the same image of styles And so we do we create the less image of styles that we need so we try to use the same ones in different in different breakpoints and Here as he said there's like a rule where you increase the size of your image style for with 25% approximately so you start with the in this case we you start with a smaller image of styles that you are going to have for example for For a mobile you don't want you don't care about anything smaller than that and you start with the 240 pixels for the mobile and Then you increase at 20% at 25% and then you do the same with the other breakpoints and you as you can see You just end up with four Image styles you don't have to do all of them So you actually don't have to do that many image styles So that's really important to plan. That's why it's really important to plan the image styles And also another thing to plan the image styles is the naming. It's important to have a strategy for each project I usually follow the the component ones I use the naming of the component that I'm going to create and I use that name for this image style I never put the sizes on the on the machine name. I just put the sizes on the on the on the display name and The other approach is by size. You just create a bunch of Image styles and then you decide It depends on your on your Project, I mean a huge project probably is gonna use that and a small project or a component based project This one is much better. It's much clearer and when you have a list of 60 image styles This one is easier to find to find the ones that you want So the third step will be to create a responsive image itself Remember we have the scale image so for doing so what we do is We already have the image styles and then we go here and instead of picking the Breakpoint groups that we already created on our theme what we do is we take the we pick the responsive image that we have here and This is the default and this is going to have to create for us the EMG tag. So We for example create the diesel one and instead of picking the demo or whatever we take we pick the Responsive image and here we enter manually the sizes that we want for our theme for our component and later we pick the image styles that we want and With that Drupal is going to create the markup Of course, we don't forget about Internet Explorer we go we choose the The image on the view mode or on a view. It's super fast It's just you do know that where to pick it to pick it and here we can see the example We have this respond this this bunch of of nodes and While you see it's it's responsive. It's changing and The important part here is that the markup that Drupal created is the one That we want for the EMG not the picture one So as you can see we have the EMG here and we have the SRC set Bunch of of images and we have the the sizes that reboot later on Of course, it's all not not so well structured, but it's already here. So Drupal creates it for us and Then we have picture we have our direction. We have different images for several Devices so here the difference is that instead of picking the responsive image what we take is the demo Group of breakpoints and for each one we pick one or several images image of styles as we want and That's it So that's the default for Drupal in core so we already have in core the two ways of doing responsive images scaled images and Picture that we can we could say art art direction But what about really giving the control to the final user because at the end he is going to say what if I have picture with someone face in The right of the picture. I don't want to cut the face of a prime minister or something like that so We have for example Sorry, for example, no, we have crop appy This is the base of the main two models for creating for giving control to the final user crop appy is like the the appy for the other two models so they can Give us the control and the first Module that we have here is the image widget crop. It gives us full control for picking For each image exactly what part of the image we want as you see in the gift So so for doing that. It's a long process. We start creating the crop types. We go to structure crop types Here we create a crop type and We have seven for example, we could we can have several crop types With the proportions, then we create the image of style where we pick manual crop and there we pick The crop that we want for this image and then we go to responsive images Well to create a responsive image Later on we go to this is the another step we have to go to the Manage form display pick the the the widget appropriate for it. It's image widget crop then we have to To select for the final user exactly which crops do we give to them and Finally when we go to the know to the creation of the node the user what is going to find is a form where he can pick actually the Proportion and exactly the place for each image So as you can see here You can just choose whatever is the Exactly good for each image. It's super handful for example for a banner for a image for a Really important image that you have for a main for example A news on on the home page or whatever this typical banner So as you can see we have this difference between them In this one we picked the the one So it gives you full control. It's super cool Users are going to be super happy For the five minutes the five first minutes that they that they use it After that, they will realize that they have to do it Every time that they upload an image They have to go for each one of them and pick the image because otherwise they won't have an image so It's great, but it requires a long implementation and a long Efforts from the final users so Big wise and use it only if you need it and The other Module that is also based on the crop api on Drupal 7 it goes on like that But Drupal 8 is inside this media initiative that they don't they have done these amazing things and What it Does is that you just pick the important part and that's all so What we have to do is for example, we create an image of style we give a name and Like with any other one instead of using a scale and crop we use focal point a scale and crop We decide the sizes for the image of style never on the machine name And you see we have several images and For example, if we want if we go to add content Well, we will create a responsive image and so on and For creating content the only thing that we have to do is to choose the important part and Actually, it gives you a preview from the set the different Image styles that you have with a focal point apply it So it gives you exactly the same output with a bit of control for the final user and They don't have to worry. They just have to pick the important part so it gives you a basic higher direction basic control and Actually, it really requires low effort for the from the development team and from the final user Really low effort because the only thing that is the difference between creating a responsive image with and without a focal point is picking scale and crop or manual focal point scale and crop. That's the only difference and And finally one more thing will be using the responsive images inside what you see is what you get there's this module that appeared after as an issue in the actually responsive images Module in the issue queue and they created this module as a spin-off or something like that and It gives you this widget inside the what you see what you get and it's super useful It still has some issues that actually needs review the status that need review So if you want to try it and say that it works or not you can do it and That's also the conclusions will be plan your responsive images before implementing it. It's super important. It will save you a lot of time and Use focal point if you don't need full control because it Worth it and that's all Thank you. Oops. So there are the sprints if you want to join us on Friday What do you think if you want to give feedback and question Hi Thanks for the presentation. I have a question about the break points in the team By default there are some break points. That is I mean, I don't know when to use one or Well, it depends on your design. I mean you can if you don't have a requirement from the design You can use whatever you find it's it works But sometimes your design is gonna break at some point and it probably is not going to be the same break point Than the default ones. So ideally with the design, for example, if you have two two columns on on a Tablet There there will be at one point where two columns is The images are too big So you will decide at that point that you want three columns So that's going to say you where the break point is not using the the defaults from Drupal They are useful if you don't have requirements. So using them by default. It's it's useful Hey Just wondering I saw at the beginning there was something about Source it is there also the equivalent of like alt text set You know so like for each different image Which you might be pulling through depending on the break point like you have different alt text because you might want to use Entirely different alt text if if the image is completely different All takes that's yeah, or yeah So for example, you've got src set and like those could be I mean there are three different images But they could be entirely different content You know it might be a road on mobile and then a forest on tablet So is is there then like all set to go along with that? technically you could In theory you should you shouldn't I mean the theories that is that's for a skilled image That's the same image So it's going to load a different image if you want to to do it manually You can create the image a different image But if you are using Drupal or any other automatic thing, it's not going to be like that Technically you can you can change the image and actually if you want a different image You can use picture because the theory is that picture is for that. Okay, so technically there's no problem But you shouldn't Thanks. Thank you. Just About focal point When you study cinematography and you have to work on shooting Faces there is a rule which says that You should have the eye of the person you're shooting even if you're in extreme close-up or in medium medium shot At one-third of the height of the image meaning you have two-thirds of Free space and one-third on the top How would you do such a thing with focal point? You don't because you actually I Listen to you and I hear that someone that really knows about photography But who actually is going to decide that is the final user So is the final user going to know about photography? Then will he will be able to do it because he will know more or less It will be here, but you can automate automate it. I mean, I'm just giving a proper rule that can be coded and We all know that all the images that we have are or landscape or obviously food, but that's for Instagram or People and what I'm seeing is something that comes from 60 80 100 years of photography. So just with focal point you would center The focal point. Yes. Yeah, I mean this focal point is not something really really scientific I mean, you're just more or less big that big that point and that's all the control that focal point gives you so focal focal point what does is It sacrifices This precision for having more Quick results so the user doesn't have to spend that many time if you really want Full control for that. You're gonna have to use or image widget drop That as you have seen it really requires a lot of work Or you will have to build something by your own because it's not already there. You can work over The crop appy, but I don't know anything that actually automates in that way that I mean It might we just grow up what it gives you is proportions and you can move it as you so really what I just Need is to focal point and to decide as We have the focal point the rule of cropping around the focal point There's nothing automated on that. It's just the user picking the point Sorry anything else. I think the big problem is always like the sizes attribute because you You really want to have all this control in CSS But you have to put some of this information into into your HTML and that's super annoying and for instance you have maybe four pictures and In the mobile you have all of them the same size on top of each other But on desktop you have one of them bigger At the first one and this other ones like on the side or something like that And so you would have to have a different sizes attribute on the first picture than on the others And it's super annoying to maintain if you want to change this later You have to babysit all the stuff and what I was wondering is I mean this is not specific to Drupal this problem It's just a general problem with this side that would maybe to have some kind of server side thing on the patch a level which Analyzes the page and then applies of the sizes attributes and then Caches this thing. Do you know of something like this? I don't know something anything like this and it really sounds like magic for me because it will be amazing having Something like that, but I don't know anything right now that works like that and that automates it Okay, another question. No, you said you make this image style names like what was in Which yeah, just say an example of your image time. I forgot the teaser one. Yeah, okay So you name them after where you want to use them, but is this really useful because then you would have like different image styles per Per thing that you want maybe per view mode or something and in the end you just need some Sizes and then you can you reuse them exactly? That's a thing. It depends a lot on your project. I mean if you only have Imagine that you have a list of Different content types and all of them on the teaser appear like that and you are Have, I don't know five components that are using images This approach with components is useful because you have everything really Organized but if you really have a huge project with a lot of images and so on The best approach is this one only using just naming the images by this By the size they need and then just choosing the right size and that's it really depends on the project Okay, so it's not there's not the best way it depends So, yeah, thanks. I was wondering about the art and the title tags How to use them best because I mean to show up in Google search and have it then you maybe would want the name of the photographer and everything inside but I think also for the Yeah, or what's the best practice now for showing that the title or yeah, what to use like art and title and For search but also then for the Aliyah or like that really depends on the on on the design actually because If it just shows under the image and it doesn't need any theming We just show that the title field from the image entity under the The image itself on the markup and that's all But if you have if we have some theming to do there like for example It has a background and it's over the image and it appears when you hover and so on We actually have to create like some fields if you also want there For example the year or you have more information than you have to create fields to create new modes and Do some theming on the Wondering really about the code and the accessibility and stuff or if you have like Screen readers and things and I read that it's not so good to use too much information in there and no actually The image itself it should actually have the markup in the in the in the tag I mean The EMG tag should have the alt attribute and the the title attribute and They don't have to be the same that you are showing I mean they have they should be the same text I mean the same the same value, but they don't have to be the markup itself I mean Drupalm gives you the control to to Make it appear twice So the also I was wondering if you have like photographer a website and you want on Google To search for the images and then you want the name of the photographer as well in there But for screen readers it would be annoying if on each image. I have like the same repetitive Yeah shot in Vienna, right? 2017 dadada, so I haven't faced in this situation Actually, and it would make sense to really use someone that Knows which parts are going to be read and how to Maybe hide for the screen readers that the duplication So I guess I will go to a someone that really knows about that before just launching the website for sure Anything else? Thank you for listening