 The bandwidth is a huge problem on mobile forms, then there's a problem of r-direction and means that if you want to present your site on a mobile phone differently than on a desktop you needed to be able to switch your image with another image but not using the same aspect ratio. Our company built for Drupal 7.2 modules to solve the problem. They're called breakpoints and pictures. Picture is later renamed to responsive images in Drupal 8 core but it's basically the same principle. So the evolution of the picture take, it started with the source set that was added by Apple in the CSS so you could define multiple background images. There was a first one in 2012 but it never succeeded. There was not enough browsers interested in the problem. In September 2013 we had a meeting in Paris with all browser builders trying to explain to them why we needed a solution. At the end of the meeting there was no conclusion so eventually your voice started writing the code for blink to support picture and at that moment people from Firefox also jumped on and said that they would support it as well. It is for a moment available in Chrome 38 and in the latest version of Firefox that should be released in like two weeks or so. The people from the filament group, Scott Yale, they created a polyfill for picture take that is now being used as well by Drupal 7 module as Drupal 8 core. The polyfill works on most browsers. The problem you're probably going to face is that in the Explorer 8 it's not going to support media queries correctly so the output of picture is probably not going to be as expected. So when do you use picture? There are four cases. When you are better to use picture instead of a plain image take. The first one is that if you need different sizes the next one is if you want support for retina displays so and that's for the moment most I all new phones are retina displays for instance the Nexus 5 of Google as a DPI of three meaning that you have three pixels plotted on one pixel. Another use case is MIME types. If you want to output WebP format images to save bandwidth you need a way to support browser that has support for WebP and which is Chrome for the moment because the huge advantage of WebP is that it's at least 20 percent smaller than GPEG files and the last case is the R direction. There are cases when you better don't use picture for instance if you have a small logo on your site there's no need to provide different sizes so you can use it on all devices use the same image things like avatars things like banners and ads especially their third party it's going to be difficult to wrap their outputs and switch to picture and if you're using SVG you don't have the problem of the scaling and the bandwidth so break points break points are basically media queries they're for moments used in CSS files or in SAS so you can target different media with a different set of CSS the break points module in Drupal 8 core uses exactly the same break points as defined in your CSS so there are two types of break points you have break points you use to define the layout of your page so you say on a mobile device I want all my blocks I made my navigation at the top and then my content on the desktop I want my leg navigation on the left and what my content on the right and then there was also break points you use for your content to define how your content has to react depending mostly on the rate of your screen okay so break points for layout they are defined in the in your team dot break points of the MMO file so each team has to chip with such a file that defines the break points there is in Drupal 8 core no UI to define your own break points they have to be defined inside your team so the ones for so I made a small demo site so you have a layout that defines your page so it's mobile first approach so you have a page and then regions they're all 100% wide and then you have a container that contains your blocks so on a tablet the layout changes that your sidebar so the region sidebar moves to the left and the content moves to the right so and at the top you can see that there's a break point added so if the width is 38 ms you get this layout at the CSS applied and so it changes your layout since that's the same layout we're going to be using on the desktop there's nothing that you needed need to define in your CSS so the break points that you saw in the CSS are the same the only addition is there is a mobile break point with an empty media query so that's added so it can be used later on by the picture module to do his job so and you see an error break point that's that's for the 38m and you see the white break point for 50m so the layout looks something like this you have a header at the top the orange one is the the sidebar and the green one is the content and on a tablet you have the header still at the top and the sidebar to the left content to the right and the same for the desktop so now we have break points needed for our layout but we still need to define the layout of our page our content content is going to react so on the desktop we want our image floated to the left with the text wrapping around it so we need to define with a 50m break point or the white break point that it has to flow to the left and the text will be wrapped into the right so I added the dimensions of the rough dimensions of the images so mobile you have a banner at the top that's as full width 240 pixels wide and 90 pixels in height the content image is also full width and on tablets the layout changes that the banner image gets another dimension and the image for the content is scaled to full width and then on desktop we wanted the layout that the text is wrapping around the image so the image gets smaller as on a tablet so if we have all of this next thing we have to do is we have to define responsive image mappings so we need to define a mapping to tell RuPaul what the connection is between a certain break point and a certain image style we want to use to output the image so adding responsive images is pretty straightforward for the moment so you have to enter a name and select the breakpoint group you have to select image styles and save it so that's a screen for adding a mapping so you give it a name this one is called content image because it's going to control the image in the content you select the breakpoint group which is basically or is normally always your team you're using but modules are also able to define break points so that's added so country can later on build modules that works with breakpoints as well so if you select the breakpoint group and you save you get a list of all your breakpoints so the one X is a multiplier that defines the D the DPI of the screen so basically they're all I you always have a 1x multiplier but later on you can add others as well so you see the the whites breakpoint and error breakpoint and the mobile one and then these three at the bottom are a field set so you can click on it and they slide open so easy can then select the image style you want to use for each of them so I created image stars content image desk tablet and mobile and I just map them on that screen so for the banner at the in the cyber we have to do the same so we just enter the name select the same breakpoint group and we add the the mappings as well so we choose for tablets both on narrow and white because the image stays the same on both tablets and desktops so to control the output it's similar as it is in the 2.7 since views is part of 2.8 the output of the banner is controlled by a view so this is a basic view it has the image field if you click on it you can select the responsive image formatter and you can select the mapping that's the responsive image mapping this to be used for the output you also see the fallback image the fallback image is needed if the browser doesn't support picture or the polyfill or if the user is is not using JavaScript so if they disable JavaScript and we don't have native support for the picture element they will see the fallback image so for the image in the content we have to do the same but this time we use a field formatter so if you go to the manage displays page you can select the formatter and changes from image to a responsive image you select your mapping the same and you select the fallback image style so and depending on how you design your site you either select the smallest available or the biggest available so if you want to support I8 the safe bet is to select the big picture assuming that all all browsers are going to be I8 so most browsers out there might be updated like Firefox and Chrome so they will be are sooner going to be adapting the picture and supporting it so I build a small demo of this okay okay so this is a demo site so on the left the little ducks is the banner image on the right you see the image and the text wrapping around it so it will make my screen smaller so this is a tablet so the image is displayed on the full bit of the content and with the text is and move to the bottom the banner image stays the same the same and if you go to a mobile device the ducks are displayed at the top and the image of the content is also full width so and so the thing that the picture module is doing is it's outputting a picture tag so you have the picture element and picture elements contains sources so for each breakpoint you use in your responsive image mapping you get a source take edit so this one is for the 50m and the sources defines which file it has to be used so 50m it uses the banner tablets for the tablet one it uses tablet as well and for the mobile one it uses the mobile image style to output it the green comments are needed because i9 doesn't like the use of source text so if the comments are not added or stripped during rendering i9 will display all these by default because it assumes that what you're outputting is a video instead of picture element so and the thing the polyfill does is that it changes the fallback image on the fly so you can see which one is used on this screen the mobile one is used if you have native support there's no easy way for a moment to tell which picture is actually used so it can be a little bit hard to to find potential problems so for the moment we have one image outputted for each breakpoint but the problem the problem is on the mobile screen this image is exactly the same image if it's this white as it and as this one so it means that for this image you're downloading way too much data to output it because this is approximately 200 pixels wide if you go near the size of the tablet this is almost 500 pixels wide so we need a way to define extra images so we can save on the on the bandwidth so the other process the better image that you saw between is between the mobile and tablet breakpoint but to render it properly on the widest possible you needed to make it as wide as the tablets and for the content image you have the same image between mobile and the tablet breakpoint you have one image that's used all over the time so these are the problems there are two solutions for those problems so the first one and the old one was adding more breakpoints in your team so you had a breakpoint for 38 m it was at 1 for 30 m 26 m 20 m all the way down promise you have a lot of breakpoints that you have to add and you have to repeat your meetings all over the time so there's a new solution and that uses sizes and sizes allows you to react on the width of the browser screen so I just nothing to do with the size of the image is the size of the browser screen so to do that we have to change our mappings and there's a third option there's an option to use sizes and sizes you define how wide you expect your picture to be on a certain width of a screen so and it has a new unit added is VW from viewport and it allows you to say okay I want 100 VW meaning 100% of my viewport width so for the banner we need our banner to be as wide as our device so in sizes we can just say okay we want 100% of our viewport width all the time so I created a new set of image mappings so I have to change my settings in my view then for the content image we have something different so there are sizes yeah and it's hard to read but at the bottom the sizes are mean width 38m which is the breakpoint we use and on that width if that is true we want the image to be 70% of the width of our screen and in all the cases we want it to be 100% of the width of our screen so for the sizes you have first to define the sizes itself and then you have to select the image styles you want to use so what we normally do is we create image styles W21 or W4 and W600 but so and those are simple resizes so they resize the image to that width you have to change your settings in the display and then I'm going to try to do it live so these are the the settings of our content image so I change my mapping to the new one I created so I call it content width sizes you have to hit save at the bottom and for the banner block there's something similar you have so the image and it changes to the banner width sizes yeah so there's visually nothing changed it's exactly the same but if we so if we look at the output now so you see that for the source there are a lot of image styles added to it so and the browser knows which one to choose depending on what you define the sizes so in the easy case where you say sizes 100% of my viewport browser knows how wide your screen is and it knows how many dpi your screen is so it just multiplies the dpi with the width of your screen so if you have a 320 pixel wide screen with three dpi's you get 960 pixels it scans the list of the break of the source set to find the best the best matching source of the image and that's the one that gets loaded so if you do it properly you can define multiple image styles for different reads and you can save a lot of bandwidth and your site will render a lot faster especially on mobile phones yeah so but this is this still means that that's as a cyber that you have to define 10 or 20 image styles you have to define all your mappings but since ruple 8 has support for config files and the teams and modules in ruple 8 are essentially the same it allows teams also to define config so what what teamers can do to make it easier for people using their team they can define the breakpoints in the breakpoints demo file but they can also define all the image styles they think are appropriate for a site in the config install and they can do the same with responsive image mappings in config install so if they put all of the those into their config install the moment the team gets installed the site builder has all the image styles and has all the responsive image mappings out of the box there are still some problems with the picture element because it reacts on the width of your screen meaning if that if you have a 30 inch screen and you maximize your browser the calculations are going to be done with with that size so the browser either 100% viewport width is going to be the same as 2500 pixels and the picture element is going to load the highest possible source set that it is defined so there's a solution for it and it's called element queries that allows but that's still a proposal that allows you to react on the width of the container of your image so if your image is in region content and that that region is only 500 pixels wide you can the say that the 100% viewport width is the 500 pixels so we'll get better control of the output but that's still a proposal the responsive image community group is working on it but we they have still to convince browsers that it's really needed that is the list of group or eight issues so for the moment group or eight is not up to date with the polyfill so that needs to be done the sooner the better there's also an issue created to discuss the use of the polyfill because there are people worrying that it's going to be abused instead of used correctly there are people saying that it would be better to not use the polyfill but just our picture and force people or browsers in that way to update sooner but that's the discussion that still has to be held the UI needs some work because for the moment it's way too complex especially if you have a lot of breakpoints and a lot of image styles it's not easy to use there's still a problem with with Ajax callbacks in Drupal 8 and there is an issue that should be ready that allows you to change the mime type of your file so you could say I want my users to upload a GPIG file but I want to convert it on the fly-to web p-format so I can use that there's still some other issues needed for the gd toolkit because for the moment that's no support for other image formats I made a list of a couple of blog posts about sizes and source sets because for most people it might be intimidating in the beginning because it's a complex thing there's a lift there's a link to the draft of a spec and there's a kind of a formal spec for the moment browser supports is added so for the moment Chrome F5 Fox and Opera are having support for it IE is still considering the use of picture but normally they will add it to IE 12 and Safari or Apple has still no formal decision if they're going to use it or not so for the moment for Safari and for in-exploit you will need a polyfill there's a tool called SizerSauce that allows you to scan a website to see how much you can save if you use the picture tag for most sites that are not optimized that can be a lot there's a list of use cases for picture and some other blog posts about the picture fill yeah some people like to think is ELSA breaks who wrote a lot of their patches for Drupal 8 and who is co-mentaining the Drupal 7 modules Mark Brahmant who is helping to get all issues fixed as soon as possible the responsive images community group who started with the proposal for the picture element and who developed it the filament group because they are still maintaining the picture polyfill your wife is the guy who wrote the code for blink and Marcus Casera is an open-source lead in the Firefox team I have to remind you that Friday is a sprint and that the more people that are coming to help the sooner that the Drupal 8 will be released so yeah anybody has questions okay then guess that's it oh wait I'm sorry no no no the break on model the only thing the break on model does in Drupal 8 is read the break once you modify from your team and expose it as a kind of config settings to responsive images so the output is controlled by the picture mobile okay thank you