Transcript
So I’m here to teach you how to do responsive imagery once and for all that means including WebP images and the new AVIF images but also for mobile and desktop and for double density displays.
[Music] Cool so, here’s my design on the desktop version I’m going to be adding this new image onto my website and also we have a mobile version here so first things first is we’ve got our design and now we’ve also got a nice beautiful high resolution version of the image here that I’ve downloaded from iStock now this is a massive image I think it’s 300 dpi absolutely massive so it’s really good to work with images that are already just way beyond what we actually need.
So, with this as a starting ground this is the ideal basically the ideal starting ground for actually creating responsive imagery in figma how I know the width this image needs to be which is 471 pixels now this needs to be double the size for double density and retina displays high resolution displays so I’m going to go in and just double 471 so 471 times 2 is 942. So, I know my first image um I need two of them as jpegs as 471 and 942 okay. So, remembering that number so first thing we’re going to do is just copy that into our images folder of our website and while that loads I’m just going to rename it.
I mean it’s for the always…always observe section and it’s the second image so I’m just going to give the file name extension because for whatever reason it didn’t copy over so we’ve got our image um on our in our file system now common convention for if we’re dealing with the the is best to deal with the largest size first so uh common convention for high resolution images or double density images is typically at 2x afterwards.
If I open this in in preview now this is going to be different if you’re on PC I’m not quite sure about how we do it on PC but if I open it up in preview on mac I can go up to tools and adjust size now I copied the uh size of the the image that we need double density size here which is 942. you want to make sure also the resolution is 72. so we have a width image width of 942 a resolution of 72 and I can save that then.
The next thing I’m going to do is duplicate that and change the name to remove that at 2x so this is our single density version for screens that can’t display that…that image so if I once again open it up in preview and then change it to percentage I can then halve the percentage half the size of it as quickly as that the next thing we want to deal with is the mobile version so if we have a look at the mobile version now in my design it’s 415 pixels but I know in the design of my website that the mobile breakpoint actually exists at 991 pixels wide.
So, essentially our double density retina version of the image needs to be at least um 991 times two it at least needs to be 1982 which is no problem because we have a huge source image to work with so I’m just going to copy that down once again I’m going to go back to our large image copy that through and now I’m going to deal with in fact I’m just going to open up first the mobile version is going to have a slight different crop to the image which, so it appears a little bit better on mobile so what I’m going to do is I’m going to crop my image but make sure that it’s at least that 991 times two uh at least 1982 so we can see the size of my um crop here uh just on just by my mouse so, 982 we’re going to make it full height that it needs to be and I’m just going to compose the image crop that.
Now, I’ve got my image version I need to now change the resolution to 72 and pop back in and now I’m going to rename this to always observing 2 now you can do use whatever convention you like but I like to use a bem like convention here by doing dash dash mobile and now we know this is the double density double resolution version so I’m going to put the add 2x and now we’ve created our mobile version of the image. So, once again I’ve duplicated that opening it up and putting it in to percentage 50%.
And now, I’ve got my single density and double density version of the mobile image and same again for the desktop version so let’s now get this in code and getting the two uh version swapping based on the uh size of the browser so if I edit my code here here we have the original version now what we’re gonna first thing we’re going to do is put a picture element on our um in our code and put in the image now this is going to be the full back images so if none of the and this will make more sense as we get into it if none of the conditions uh resolve to true this will be the fallback so we know we’ve got a single density version and this..this will be the single density version of the desktop image.
How the picture element works it works very very similar to if you’ve used the video or the audio element and it uses a list of sources that it can pick from to load into that kind of image element so this will be where you put all your classes all of your styling and and everything else to do as you can see I’ve got a class here and I’ve got lazy loading um this just simply picks what the source of the this image element is so the source element we’re going to be using a few items on this the first one is going to be source set and this is going to be a list of images that it can pick from so, if we just copy this for ease of use and put this into here.
What we’re going to be doing with first is the the mobile slash desktop version so if we’re falling back to the desktop version of the jpeg then we don’t really need to deal with that we just need to deal with the fact if it’s a double density or um double resolution version of the image so if I change the source set to the double density version the source set can actually take an argument and for our use case we’re going to use the argument 2x which means double the resolution a double resolution screen now this can actually be 3x or 4x but um there’s really no need for those kind of screens that’s all marketing stuff so if you’re tempted by a 3x screen I would avoid it um..
And if we provide a type here we can actually this will come in handy later on when we deal with WebP and AVIF images so now what we have is a conditional element here that if we have a double resolution display pick the double resolution image if not full back here now what about the mobile image what I’m going to do is just duplicate that one too many times so once again and we’ve got our source set so we want our mobile version to load if it’s a double density image but if not then we can copy all of this and paste it after a comma separated list the easiest way to see this is probably to do something like this where we can see the different versions kind of taking shape.
So, the first um image here is for double resolution displays comma and then the the single density version we need to add jpeg after that the next thing we need to do is to tell it um at what media query you want to load these images and that will be using the media tag here now I know my max..my max width um these images need to show up up until 991 pixels so if we go media max width you should know this from css 991 pixels so what we have here at if the if the browser width is 901 pixels or below then load one of these images.
If it’s double density in retina display then load this one if not load that one if none of those equal true then fall back to this one if you are if it’s a double resolution display load this image and we’ve only got one conditional here if that fault returns false then come down and just fall back on our base image the easiest way to test if things are working I like to test anyway is going into the inspector and looking at the network tab so if I refresh the page now we’re in the desktop view so I would expect the…I would expect the um the image to return as and this is a as a high resolution display so I would expect it to be the desktop um high resolution image.
So, if I refresh I’m in my network tag tab here and if I do it by name then I I know I need to look so up there so there we have our always observing uh at 2x I always observing 2 at 2x now if I clear that so, I’ve got nothing here now when I reduce the reduce the size of the browser then I would expect the mobile version to appear at 901 pixels so we’ll see it break always observing two mobile um jpeg there so now let’s look at providing different image formats in our in our picture element we’ve got the foundations here to create all the versions of the images that we need we have the mobile version the mobile version retina the desktop version and this and the desktop version retina.
Now on my mac here I use a tool called WebP converter and what this does if I simply drag all of these into the I need to select that all of these in here and just click convert and choose where to save them this will now convert all of these images to WebP versions of those images coming back to our code all I’m going to do is duplicate each of these and we’re going to change the file names here to WebP and the this is very very important is the type should also be WebP.
Same again here but we’re going to add in our desktop version of the WebP image that’s not retina so wep clean that up and now because this is running in order uh we basically want to you need to be very very conscious of the order that you’re putting these in so I want the I want to put my preference is that a WebP image will show if the browser supports it if it doesn’t support it then it will fall back to the jpeg version so basically the same thing just um WebP versions of those images and then once again just the retina version of the desktop WebP image.
And…just double checking that’s all correct which does look alright and it’s pretty much as simple as that now edge supports WebP so we’re able to test this out so if I refresh this now I should see always observing two uh high resolution WebP version um…always observing two high resolution WebP version now if I clear this once again make the browser smaller I should expect to see the mobile version of the WebP…always deserving to mobile version WebP image and it is as simple as that you’re basically just thinking of this as a fallback mechanism so we’re saying priority would be if it’s um up to 991 pixels then show the mobile WebP version if not show the desktop version uh sorry the the jpeg version.
Otherwise if we’re larger than 991 pixels then show the WebP version either high resolution or regular if we can’t support WebP then it will fall back to jpeg if we can’t support the double density then fall back to the regular version finally now I’m going to show you how to support a brand new uh image format called AVIF or AVIF and all you need to do is download Node and npm on your computer and you’ll be able to convert any image into…into an AVIF format now these the the size of these images are absolutely tiny so it’s fantastic being able to have access to these images.
Now once again we’ve got all the images necessary that we need to uh to create our AVIF version so, in my terminal I’m gonna navigate to the folder which I am I’m navigated to the folder that my images are in because it’s going to put them back in that same place and all I’m going to do is type mpx AVIF hyphen hyphen input well if I don’t put input it’s going to convert all my images but I don’t need to convert all of my images so I’m going to specify an input here and this can actually take a regular expression so I’m going to do always observing…observing two.
But I only want the jpeg version so star will match any characters and then I’m going to put dot jpg so it’s only going to convert they’re always observing two images that are jpegs typo there type x…. now what we should see in just a moment is converting all these images and you can see them pop in and go back to my code and again if the browser supports AVIF then I want them to use the AVIF version um and so here I’m just going to change my file formats there to AVIF and then finally for the desktop version just type that and it’s as simple as that.
So, chrome is a browser that actually supports the new avi format so when I inspect this element and go to the network tab I would expect the double density desktop version of this image to have loaded so let’s jump in and do a hard refresh here sort by name so always observing 2 at 2x so we’ve actually done that now if I clear this once more make my browser smaller, I would expect then the mobile version of the AVIF to load when we get down to and…
Looks like that has actually happened there so we’ve actually succeeded in doing this so now that all that’s out the way we’ve been we’ve been creating these other versions from an uncompressed version of the jpeg so finally what I’ve got here is I’m going to take these the the original jpegs and drag them into another image compression tool I’ve got on my computer called imageoptim and it’s just going to compress those images just a little bit more so looking at the final file size now we’ve got the jpeg version which as we know is the original the biggest um image which has been been compressed down to 1.1 meg.
The WebP version is a mere 333 kilobytes and then the AVIF version is 93 kilobytes so we’ve jumped from 1.1 meg to 93 kilobytes so I highly highly suggest you at least support the AVIF version of the images so that’ll do it for today.
I hope you enjoyed this episode and how we’ve demonstrated what we’re going to do in pine grove um stay tuned so I want to start making some more of these kind of tips and tricks videos for pine grove it’s a really powerful tool I really highly suggest you use it but these of course work absolutely fine if you’re coding your website from scratch remember to like and subscribe and I’ll see you next time [Music]