Responsive Web Design Tutorial #10 – Responsive Images & Polyfills

yo what’s going on chaps welcome to your tenth responsive blueprint seminar and in this video I’m going to introduce you to accept personas Wow alright then guys so you’ve already seen during this tutorial playlist a accept idol in action be it inadvertedly so this is it right here the banner and it’s accept because it has in the CSS a thicknes of 100% which is a relative measuring so what I’m saying is whatever the viewport width I miss the main planet portrait to be a hundred percentage of that thicknes okay so if it’s this wide then the image is going to be that wide it is this wide then the image is going to be that wide so that is already clearing the portrait accept however when we scale down portraits this channel we’re losing a lot of the persona data for smaller screens and that’s because the images default length is quite enormous to dres desktops which is kind of this big right so the image is pretty big when we view the epitome on a smaller screen like this then we’re still downloading that large image file but then squash need to fit on the smaller screen so we’re basically downloading a large image for mobiles and small-time tablets when we only actually need a small one so this constitutes loading the likeness on portable machines more duration spending and a more data consuming process so ideally what we want to do is download big likeness for sizable screens such as desktops and there’s small personas for smaller screens such as small-time tablets or Mobile’s or something like that okay so we only ever downloading the size that it is necessary so the whole idea of accept idols is that we furnish a multitude of image size alternatives to browsers and maneuvers so that we can choose which portrait to download based on the viewport size for example the viewports small like this will say to the browser hey download this image if the viewport length is large we’ll say to the browser hey download this large image okay so there’s something we can use which is built into HTML to you are familiar with ply these different options to browsers and that is the picture element all right then proceed so this is the picture tag or the picture element and it’s a relatively new HTML element and essentially what we do is open it up with a select like this and we closed it up with the picture tag and then between those tags what we do is provide a multitude of different source options employing the source labels right here and then the fallback persona call when none of these apply so within the source tag we first equip a source set attribute and well the likenes that we’re going to use for this particular media query if you like okay so what we’re saying here is lock the media is max width for gen 8 pixels so anything which is for gen8 pixels or smaller such as portable devices then use this source set the small image so we’re going to load in that image for small machines okay for this one I’ve said max width is 768 pixels so I’m saying okay well then if that’s the case if it’s below 768 pixels but then it has to be above this right then you laded in the medium size image okay so that’s going to be first tablets and things like that and then if it’s above this pixel extent then we’re going to only default back to this image tag which has a source adjusted of large-scale jpg so that’s going to onu in the large-scale image for desktops nonetheless there is one slight snag as there always is a encoding and that is that this HTML element is pretty brand-new and it’s not fully supported in all browsers okay that’s why I’ve got a president – can I use comm and attacked in the picture element at the top here and it’s delivered down which browsers patronage it on which don’t so everything in scarlet doesn’t subscribe it everything in light-green times there you verify all these versions of ie don’t supporting it edge 12 doesn’t Safari iOS Safari Opera Mini and these older versions of the Android browser all don’t assistance it so that is a pretty big problem if we want everyone to be able to view these different picture sizes on different devices since that’s the whole point right so we’re going to have to do a little extra work if we want to use this picture element now we can use what’s called a polyfill to allow browsers which don’t corroborate this new HTML picture element to support it okay so basically if you’ve ever applied this thing called I think it’s polyfill or something like that it’s in a little car you can spray on your wall crowding chinks and it’s essentially does the same thing it simply crowds in the gaps in browsers so if they don’t natively patronage something then the polyfill will add in that support so that we can use the new incorporated in our system okay so mostly they’re often just J’s libraries which fill in the gaps in two browsers so there’s polyfills for all kinds of web features but the one I want to show you today is called picture fill and you can find that this address right here I’ll leave the link down below and this just allows us to use the picture element in our system so let’s just go to the quick start right here and it says to start using picture field download the enters bulb by the black places in the principal nonetheless the recommended habit is right here okay so you can see we’re adding this script first of all which is a html5 Shiv which basically says record organize constituents and then this picture elements so if the the browser doesn’t recognize these elements then it’s going to create it for it then we’re adding in the picture fill polyfill j/ s file and we’re saying these asynchronous so we want it to load as the rest of the page ladens so we’re going to pop into the head of our paper so I’m going to replica it now come over to our code and let’s adhesive it right there like that and merely shimmy this along a little bit all right but the only problem is oops then we don’t have this word-painting crowd hitherto file in our files or folders there so what we need to do is just link to a hosted account or download it now I’m going to link to the hosted form and you can find that right here picture fill there we go it can have a download the developer version or the make account I’m just going to go with the occurrence account for now you can see this is a content delivery network so I’m just going to seizure that URL and I’m going to paste it into this source attribute right there alright so now we’ve got that sell now we can use the picture call within our report so I’ve already written out the HTML for that I’m just going to copy it I’m going to paste it down here so you don’t have to watch me write all out so what I’m doing is just going to them butter and I’m going to replace this current image there which is the banner image with the picture element so I’ll merely paste it in and you can see we’ve got the picture tag right there and then close it off right there then I’ve got these different sources and the first one is same with a max extent of 480 pixels so that’s for big devices such as portables and I’m going to loading in the small image and then for the second one this is the second source of M tag and it’s got a source set attribute of medium placard and this is for a max extent of 768 pixels and then finally if it’s bigger than mingle that it’s just going to download the desktop button which is just banner j/ s which is the original one that we had now I’ve already created these three placards in Photoshop I’ll just soon evidence you these things you can see this is the original enormous one this is the medium one we’re going to load in for and like tablets and things like that and then this is the small one and what I’ve done is just make a little L for gigantic M for medium and s for tiny on the different placards so when we test it in the browser you can see what’s going on okay so that’s all the HTML that we need so I’m going to save that right there and then I’m going to pop back to our website I’m going to freshen and now if we look in the source let’s go to the elements and down to the main banner you can see now we’ve got the picture element and these different source calls and then this image tag to fall back on now it’s currently come back on this image one right here this central flag and that’s because none of these filters now max with 76 a or max with 480 have been reached hitherto because we’re quite big-hearted the the viewport size so it’s testifying the large banner you can see that with young but when we go down to what is it 7 6 8 pixels we’ll do that now you can view the size up here so nearly there now 7 6 8 let’s get there okay now we’ve loaded in the medium referendum okay so if some laden the web page on this immensity viewport it would just download this one and not this so therefore it’s going to download quicker because it’s a smaller file and you’re not going to waste any data on your big-hearted idol kind of cool right same again if we take it down to four hundred eighty pixels we’re going to load in that small-time one there “theres going” however because of those forms that we applied in one of the previous lessons there we’re elongate the persona we’ll really get rid of those wordings right now we inspect and go to this rule it’s this thing right here construction the thicknes 100 a pixel a percentage and then scooping it off to the left so let’s delete that now we can see this is the small button alright so that is sensitive likeness in a nutshell it’s a pretty cool little skill and it’s good for not squandering data or download experience on smaller devices okay so if you have any questions whatsoever feel free to leave a comment down below otherwise guys I’ll see you in the very next video where we’re going to take a look at frameworks I’ll see you guys

As found on YouTube

Share this article

Leave a comment