 Hello, okay Okay, so I've been working with WordPress for quite some time now and I've been loving the way it has come to be the right tool for the job in so many different cases like e-commerce and Corporate CMS social networks and one thing these kinds of projects often have in common is a complex design requirements regarding images They need to be responsive They need to be lazy They need to be indexed of course and sometimes they also need to be are directed and We'll see what that means later on so Once upon a time To achieve all of this all we had was The max width a hundred percent trick Which makes a web page look okay in basically? any device but has the drawback of Picking a huge image like this one and Serving it to a tiny device Like this one here with probably limited bandwidth and connectivity which nowadays is Basically unacceptable since we have resolution switching Which is a way we can tell the browser to use different images on Different screen sizes and this you do by marking up Your image tag with two extra attributes the source set and the sizes the source set is Basically a list of Images at different resolutions, so same image same aspect ratio different sizes and Then the sizes attributes we use to tell the browser Which image to pick according on screen width in this example we have a source set ranging from 160 pixels width to 480 and to Media conditions and then a default condition to be used when the the previous two Unsatisfied, so how does this work in practice? On a small device We will be we will fall in the first case Which tells the browser to look for images Which are a 50 viewport width units which basically means 50 percent of the screen size And on a small device this will probably mean the smaller image of our range But moving on to a larger device and nearer to the first 960 breakpoint Will probably mean picking the largest image in our range And then after that we move on to a second media condition in this case. We're telling the browser to look for images which are 25 percent of the viewport and So between these two breakpoints that will probably mean picking one of these two images I have a 250 or 300 which incidentally are more or less a quarter of these two breakpoint size and then eventually Upper of the 1200 breakpoints Our design dictates that the layout won't be expanding anymore. So we can just stick to the default 300 pixel width Now you might have noticed that I've been intentionally using words like likely and probably because One thing you need to keep in mind when using source it and sizes is that the browser is going to try and be smart so this means for instance if Your media condition dictates that You should be picking a small image size, but the browser has Cashed previously cached a larger image browser won't bother downloading the smaller resolution It will just use the larger one that is that it has cached and this The browser can do because This isn't tender to work On images with the same aspect ratio So the browser is pretty confident that it can pick whatever image version image you He he sees fits and this won't break your layout Because all the images have the same aspect ratio Now this is surprisingly easy to to work within WordPress since it's Baked into core from version 4.4 and Depending on your on your design you might need to take a couple of simple extra steps One being The definition of a few more image sizes because you probably The default small medium large that usually defined in your media options at min screen Probably won't be enough if you're really using resolution switching so you might want to add extra image sizes and You need to make sure They all have the same aspect ratio if you do this WordPress will automatically populate your source set attribute and That leaves us to cater for the sizes the sizes attribute and For this we have two handy hooks That you can use either to just brutally hard code Your sizes value or you can do of course you can do more complicated stuff with conditionals and so But in any case you should look look up in the soil you want to use this You should look up these hooks in the source and see exactly what they do Now all this is fine and dandy if you want to work with images with the same aspect ratio But if someone comes up with a comp like this Source it and sizes won't won't cut it anymore because look look at all different aspect ratios Small landscape small portrait then a squared and another landscape But not so wide then again a wide landscape But larger and this you just can't do with with with source it and sizes for this you need another solution Which is the picture markup? the picture markup is actually even easier to understand than the source set and sizes and It's pretty straightforward every every a source tag has two attributes a Source it again that you can bet you can you can even use just to specify only one image This is what we're doing for the sake of a simple example and And of course a media query and this media query is actually these media queries a full-blown Media queries as you would be writing in your CSS Which is different from What you would be doing in the sizes attributes those are called media conditions and are not so powerful here You can basically use what you already know from your CSS. So it's pretty straightforward to understand what this code does and so This device clearly satisfies this media condition of portrait orientation and a relatively small width so the small portrait version will be picked and Moving on If the same device is in landscape, you'll be using the small Landscape and then moving up you'll then be picking the square and then again a landscape but not so wide and then again The the larger landscape But there are there's one more aspect other than the ratio in Using picture and that is the crop because our direction means Change aspect ratio, but also change the crop probably and to illustrate this you can look at this image and It's a bit boring and the subject is is Right at the center, which means you can crop this image all day long and it will always fit in your viewports and There will never be any ambiguity on what this image is about But if you use a slightly more interesting image where your subject is not exactly at the center like this one Where your product is this and this is other stuff Okay, and while you crop this thinner and thinner You will eventually realize that at some croppings your product is completely cut out Okay, so this clearly doesn't work So in our direction, not only you need to cater for different aspect ratios, but also different crops This is how it should be This is to just automatic centered cropping which won't work This is a proper full example of our direction and see and here you can see you have a basically a Manual croppings and possibly on smaller resolutions also zoom for clarity So To sum up when you're using the picture and source solution You don't have this kind of Limitations we had with the source and sizes solution because The browser will obey your media queries to the letter so no smart Behaviors and you won't need to worry about the aspect ratios anymore. You can use whatever aspect ratio you want And this is also quite easy to to work with in WordPress Basically four easy steps you need to take number one You need to include a polyfill because browsers haven't not all browsers have caught up with this picture and source business so To level the playground on the browsers you need a polyfill unfortunately We have two of them both work very well. All you need to do is choose one and in queue the script as you usually do and It will just work out of the box Again, you will probably have to add some image sizes in this case You won't need to bother about having the same aspect ratio, of course then you need to Somewhere to save your source and Media queries and an image sizes So you could create a very simple data structure, which is basically an array where the key is your media query and The value is the image sizes you just registered over here You then pick up here to build your structure Of of source media and source it and then of course you need a function to generate the markup according to an Attachment ID and one of these formats you you will have registered previously So it'd be rather boring to go through this code here now just to generate some markup But I made a plug-in that you can use To experiment with this picture stuff, which is pretty cool And all you have to do is just drop it in your in your WordPress and it'll work and you can you can start making experiments There's one more thing We need to know we need to be able to do to properly implement our direction and that is the crop and Fortunately, this is WordPress. So we have a really cool plug-in for this. This is a total lifesaver and It basically it adds a screen to your media to your media Administration that allows you to individually crop any image size Including the ones that you might have defined Your custom image sizes you might have defined Of course You you might be thinking what about the SEO because if the browser doesn't fully understand picture yet What about the bots and of course the bots don't understand it either, but Google boss is a JavaScript So once you include the polyfill to make it work for the browser It works for the Google bot as well and your images Marked up as picture and source will be found in indexes and this is true even if you use lazy loading Because also your lazy loading JavaScript will be passed For the other not so smart bots For search engines, you'll just have to find a clever way to include other resolutions in the source So That's it here. You have the repo Go and check it give it a star download it try the picture and That's it, okay, I'm a spazio per una domanda just one question Well, thank you Can I use one of these solutions inside the post content? inside the post contents If you set up the image and saw the source it and size the solution properly it will just work If you want to use the picture solution inside the contact You will have to either find a way to know your attachment id beforehand using advanced custom field or something like that or You can develop maybe a shortcode To insert a picture shortcode in your contact that will be passed as a shortcode is usually up