Introduction To Web Image Performance

1. Welcome To The Class!: When he was now browsing the Internet on a device, just like this, what you really want to weight in on a large image to be downloaded, which was intended to be used on a large monitor. Of course, for those, and here's the problem. Using a smaller website images will mean this will download much faster on a smaller mobile sized devices. When scaling up to the big screen, it can look really stretched and pixelated. If we go the opposite way and start with a big image, it may look good on a large monitor, but it can take far too long to download on a mobile device, mostly bad user experience. So how do we efficiently add images while website suits all screen sizes and devices? We could try to use an image which has some kind of middle ground on the size. But this is becoming much more difficult in screens, again bigger, and also have a higher resolution too. Another way of doing this is by taking advantage of the HTML pitch elements. With picture, we can have multiple sizes of the same image, and the browser will load up the correct one based on the size of the device. So we'll take a look at this and various other techniques. We also want to make sure that we can load different images based on the orientation of the device, the type of image formats which the browser support, and so much more. We'll also cover lots more useful things are asked direction, different image types and how we can convert them using compression on the different compression methods, using fallback image's, content delivery networks, lazy loading, and lot more. If you create any type of HTML websites or applications, then this course is ideal for you. You don't need much experience to take this course. It is designed to be beginner friendly. Although some HTML experience will be beneficial since I will assume you know how to set up a basic HTML page. I hope you're interested and excited to take this course. Now let's jump into the first lesson where we're going to discover the effect tab party size images and half on the user experience. 2. Share Your Work On Skillshare!: When taking any course, it's really important to not get in the habit of following along just for the sake of taking off another lecture. Take the time to process each lesson, review the code which you write, and think about how you might approach these solutions yourself. With this in mind, this class is project-based and this gives you the opportunity to really make something personal and unique. You don't need to get too lost and divert away from the class and you can even take a step back after you've finished the class, and come back and make some project changes afterwards. This will really give you a good chance to practice what you've learned away from the class. Also remember to share your project too here on Skillshare and only will I check it out but it will also inspire fellow students too. More information on the class project, head into the project and resources tab where you can not only upload your project but you can also see other class projects too. With this in mind I look forward to seeing what you create and upload here on Skillshare. 3. Download The Starter Files: Before we jump into our first lesson, provided with this course is some Starter Files which you can download and work through as we progress through this course. Each one of the lessons has a corresponding folder, and inside we have some basic Starter Files, for example, this one has a basic HTML page, and also some images so we can jump straight in to learning about our topics. To download this for the course, what you'll need to do is to head over to github.com, and then into my profile which is chrisdixon161. Then the repository is the picture element starter files. Once you're inside of the repository, all you need to do is to click on this "Code" button and then download this zip file. For easy access, I've placed mine on the desktop just here, but you can place it anywhere which you prefer. To work through this course, I'll be using the text editor, which is Visual Studio Code. If you don't have one, you can download this through your operating system just here. It's free to download, and free to use for Mac, Windows and Linux. Once you have this all setup and installed, all you need to do is to drag over the Starter Files into Visual Studio Code. I will see you in the next video, where we're going to get to work on our first lesson. 4. Using The Wrong Size Images: Rather than taking my word for it, let's now take a look at some examples of how badly-sized images can really affect your project. For this head over to the starter project and in the files, go into lesson number 1. Inside our Visual Studio code or your text editor head into the first project folder, am now going to right-click on the Index page, Copy Path, then Paste this inside the browser. You can also double click on the Index page inside of the project folder to, this will open up inside your default browser. For this I'm going to be using Google Chrome, but you can use Firefox, Safari or any major browser which you prefer. To begin, we're going to take a look at the file sizes of some supplied images and also see what effect this has on the download speed. Let's open up the Index page and alongside this we have a Images folder which has the same image, but in three different sizes, we have the largest one, which is 5,311 pixels wide and we can also see the size down at the bottom. We have a 640 pixels wide version, and also a small one which is 320 pixels. Over to the index page all we're going to do for this is to set up three separate image elements, link them to all three of these images. Let's jump into the images folder and the first one, which is the smallest one, and since this is an example, I'm just going to leave this old texts as empty. Duplicate this two more times and the next one is the 640 version and we'll have the largest, which is 5,311, save this and now if we refresh, we see all three images as expected, and also just as a side note, all of the images provided for this course has been downloaded from unsplash.com, so if you want to change them or download your own, this is a good resource to look for. Right-click and open up the developer tools with Inspect. All the browsers also have the Developer Tools too, and they are generally available with right-click and the Inspect or Inspect element. Here add into the Network tab and then we can refresh the browser to download all three of these images. If you make this a little bit wider we can see the size of each of these images. As expected, it goes from smallest to largest and also probably as expected, we can see that the smallest image is 27 milliseconds, we see 29 for the one in the middle, then 37 milliseconds for the biggest. Let's refresh and try this again. This is slightly different each time we refresh the page, but we can generally see that the small image will download in about two-thirds of the time of the large image. This can make a real difference if you have lots of images on our site, along with the download time, the image quality is also a huge consideration to, so it's better we can make sure that all three of our images, they got the same available space. We can do this up in the head section and then he will add some styles and just go for the image element and then select the width, then this two,100 percent. Now if we go back over to the browser and refresh, all three of our images will now stretch to be 100 percent of the available width. We can see if we look at the top image, we see a loss of quality, since this has been stretched a little bit bigger. In the middle, quality has been improved, on the quality on the third or the biggest image is much better than the previous two. We also see on this particular refresh that the download time is much slower for the large image, this also reinforces what we said in the intro video. The large images take longer to download, which can cause a poor user experience and also potentially lose users from all sites. There's also many surveys and stats out there that say uses conversion rate dramatically decreases with each second a page takes the load and also the abundant rate goes up significantly while waiting for too long. I won't throw any stats out there since many surveys show different results, but I'm sure we've all been there in the past. When a page takes too long to load, within these patience and our attention moves on to something else. On the other hand, images which are too small, will lose a significant amount of quality as they scale up. Just like we can see here with the first image, so when using images in your website, don't just download one which looks great and then simply add it to your project, think about the size of the image first. In recent years, the range of device sizes uses a viewing our websites on, it's just getting bigger and here is just a small sample of screen sizes which we have to allow for. As you can see, we have a huge range and some up to over 7,000 pixels wide, even though some of the largest screens and most common. This can still leave our choice of image size really difficult. When making these decisions though, we also need to not just think about the size of the devices, but also how our site will be laid onto. This can have a big impact on our choices. You may be tempted to think, "Okay, I should maybe just aim for the middle and go for maybe 3,000 pixels wide." Doing this though does not mean we need to make all of the images this wide. For example, you may plan to have pre-images on the same row, just like this, and this is a common situation for a website or even a gallery view with multiple rows of images. Either way, the point is that now we have suddenly divided up the width. We now need of our images by three, even less if we take into account the space around each one of these images. Now we're talking about our images which only needs to be around 800 pixels wide, which will result in a big saving on the download time. The same goes for two images wide, four images and so on. All of these savings can really add up if we plan of what size of images we first need, instead of just downloads in the first image size which is available, thrown in our project, and forget about it. Sometimes though, it is inevitable that we will need to use a full width image, such as a header image or an image carousel and this again returns us back to the problem of if we sacrifice image quality or the download speed. Well, fortunately, there is a way we can begin to work around this, so we don't have to compromise and we'll take a look at how to do this in the next video. 5. Letting The Browser Decide: To help with choosing the correct size image for the device or browser, the image element has a really useful built-in attribute called srcet. Srcet will allow us to list out multiple images which you want to potentially use, and we're going to let the browser decide which one is best. Inside of our Lesson Two folder, which is Letting the Browser Decide, we have two items and one is the index page, which we're going to use. We can copy the path. This is pretty empty. We're going to add the contents in just a moment, then paste this inside the browser. Over inside the images folder we have six versions of the same image. We have one version which is 320 pixels wide, we have 640, we have 1,500, and also some images with 1X, 2X, and 4X too, which we'll take a look at what these are very soon. Just as we did previously, inside the body section we're going to set up a regular HTML image element. This wants to go into the images folder and select the road image, which is 320 pixels wide. Save and refresh. As expected, we see this small image loaded. So this is generally what we do to load up an image inside of a website. But rather than being stuck with this one single image, we can use what is called the srcet attribute. It provides some alternative images depending on the size of the browser. To do this, we go back to our image elements. Let's just remove this for this example, and I'm going to add inside here the srcet attribute. This attribute will allow us to add multiple images inside of our image elements, which the browser can decide which one is most appropriate for the current size of the browser. The first one, again inside the images folder, let's go for the road, dash, 640, and then separated by a comma, we can add multiple images. We also have an image that is 1,500 pixels wide. So road, dash, 1,500, dot JPEG. What is happening here is we're using the original source attributes if the source set attribute is unsupported in the Chrome browser. So this is basically a fallback image. If we can not select any of these, srcet is in fact, pretty well-supported in all major browsers. If you go to caniuse.com and do a search for srcet, we can see that srcet is widely supported in all these major browsers. The only issue is the older Internet Explorer. But this has been replaced with the newer Edge Browser, which has full support. So this means that srcet is pretty well-supported and we are safe to use it on our projects. There goes our project. Let's try this out. Refresh. We see the road, dash, 640 image, and if we shrink this down, still see the 640. Let's make this bigger. If we get this over 1,500 pixels, which was the size of the larger image, we can still see inside of the developer tools that we are still downloading the 640 pixels version. So the browser is not selecting the alternative image. This is because for the browser to figure out which one it's going to choose, we also need to tell it the width of the image. It doesn't automatically detect that this is 640 and this one is 1,500, but after the file path to the image, only to do is add to the width with the image in pixels, with a W just after. This is 640 pixels wide, this is 1,500 pixels wide, and let's try this out. Back over to the browser, I'm going to shrink this down to a small size, refresh. We see the 640 pixels version. Let's make this bigger. We see at some point the 1,500 pixels version has been loaded. Let's just try this again. 640. I want to see the size just here. So 300 pixels, or, mine changes to the large image around about 500 pixels. As we know, it's choosing this based off the browser's viewport, which is the browser's visible area. It's also choosing under the assumption that we want these images to be the full width of the viewport. However, though, this is not always the case. So to control this, we can set up the sizes attribute after our srcet. Let's add this in. If we leave out this sizes attribute, it is assumed that we want the images to be the full width of the viewport or the browser, or at its most basic, we can add in a size to apply to all images. For example, if we want all images to only be 50 percent of the available width, just like with CSS, we could add at 50vw, set this to be half of the viewport width. Save this. Even though our 640 pixels version has been loaded, this has only taken up 50 percent of the browser's width. If we go up to the larger version, the same will still apply. With small screens, it is common to see images and content using all of the available width, just like we see on the left, and then maybe it'll only take up 50 percent of the width on a larger screen size. So how would you do this with the sizes attribute? We do this by combining these size attributes with media queries to tailor the images for the size of the device. Using our example, since we have two different images to choose from, we are going to add two different values separated by a comma. Just like with regular CSS, I'm going to add in a media query and set up the maximum width to be equal to 600 pixels. So below 600 pixels we then want to set our images to be 100 percent of the viewport width. Otherwise, want these to be 50 percent or half of the available width. So this is a great way to control the size of the images with different screen sizes. Let's try this out. First of all, we need to go down to the smaller size and refresh. We see the road, dash, 640 is being loaded as expected, and that this is 100 percent of the viewport width. Since we set this up to 600 pixels if we keep going, there's our large image now downloaded, and if we take this just above 600 pixels, because of the second value, this now drops down to 50vw. Something which you may have noticed is inside my browser. It's jumping up to the large image at around 500 pixels. You may have a different value and we'll see why very soon. But you may think that 500 pixels is a little bit too small to be jumping up to the large image, considering it's not even any wider than our first image. Surely the 640 version will be better suited. Well, this is a very valid question and something which we are going to answer next. 6. Introduction To Pixel Density: This video head into lesson 3 of the starter files, open up the index page, and also make sure we have the correct one open inside the browser too. In the last video, we previously discussed that the images may not be switching at the times when we expect them to. We looked at if we shrink down the browser to the smallest size inside the dev tools, we see the smaller image is loaded. Scaling this up, we see around the 500 pixel mark that the larger image has been downloaded. You may think that this jump to the larger image is a little bit too early since it's still below the 640 pixel wide image. Well, the reason this happens is because it's not just about the width of the image, it's also about the pixel density of the display too. Here I'm using a retina screen so we can squeeze in more pixels per inch than a non retina device. This results in a crisper, sharper quality image. How does this all work? Well, imagine we had a screen with a resolution of 1920 by 1080, 1920 being the width of the screen in pixels. Let's say we created a space of 300 by 300 pixels where we wanted to place an image inside. Many years ago, this was simple. We created an image which was 300 pixels wide, 300 pixels high, and it worked just fine. Now though with the demands for higher quality, many screens are capable of squeezing more pixels into a space, commonly referred to as pixels per inch or the pixel density. This means if you have a 2x display, you will squeeze in twice as many pixels into the same space. Which means we can use a image twice the size, in our case, 600 by 600 pixels, and it would slot into the same available space on the screen. This is why retina in higher pixel density devices look much sharper. Screens can go even higher too, such as 3 or 4x. I'm sure a lot higher in the near future too. To see a real-world example, over on the left here, my laptop screen has a resolution of 3,072 pixels wide by 1920 high. You may think that it could accommodate images up to 3,072 pixels wide. Over in the Images folder, we also have this same road image named 1x, 2x, and also 4x too. The 1x image is 640 pixels wide, and this is not intended for retina screens. This is intended to be used on regular monitors which have a regular pixel density, 2x, this is twice the size and has a width of 1280. Then 4x is 2,560 pixels wide. Let's give this a go. If we comment out these images here. Well, this create a new image elements, and let's set this up to display our 1x image. What we want to do here is to copy and paste this image in two more times. Save this, and then over to the browser, and close down the developer tools. If we stretch the browser to be pretty much the full width of the screen, we can see we only have the width for two of these images. Remember that each one of these images is the 1x version, which is 640 pixels wide. We only have the width here for around 1500 pixels, even though we've just seen that the screen resolution was over 3,000 pixels wide. This is because I just mentioned I'm using a retina display. A retina display does not mean we have more space to play with. It just means we can provide a higher-quality image, and the images will then be squeezed into the same available space. If we think about it, this makes complete sense. We want the physical size of the image to take up the same amount of space on every screen. When creating a website, an image which I designed to be half the width of the screen, will be still half the width for a regular or a retina display. The only difference being that a retina display can use a larger image to slot into the same available space resulting in a higher quality image. We can also use this knowledge with the source set attributes. For this, we just need one of our image examples, so let's move two of these. This will also be counted as the original 1x version for non retina screens. After this, place in the srcset, and then using a source we can also provide a 2x, and also a link to our 4x image too. The difference to the previous video though we added the size followed by the w. This time, the srcset can also accept a pixel density. For this, we are adding 2x, and then for the large image, we add 4x. Just before we check this, we can also specify the size we want the image to display. This means regardless of the screen, we want to show a 640 pixels wide image. This is what is called CSS pixels. Then if the browser decides it wants to use a bigger one, such as the 2x or the 4x, it will then be squeezed into the same space. Let's give this a save and over to the browser, into the developer tools, refresh, into the network. Now, even though we've set the image to be 640 pixels wide, the browser has now detected my monitor is a retina screen and chose to apply the 2x image, which is 1280 wide, and this image is then squeezed into the same available space. Using these extra image attributes is a pretty good way to switch between image sizes, depending on the screen or the pixel density. Often, we don't need to do anything more complex than this. We're also putting a lot of trust in the browser, that's if we wanted more manual control or even more flexible options. Then next we'll take a look at how to do this with the pitch element. 7. The Picture Element: These extra image attributes which we've looked at are really useful for selecting the correct type of image based off the browser's width and also the pixel density. If this is all we need, then that is completely fine. However, though, if we want some more fine control, we can make use of what is called the picture element. Well, this lesson head into number 4 which is the picture element, and then open up the index.html page. Inside the browser, this is just a empty HTML page and we have some images as ever on this lesson which are really going to be useful for checking out what the picture elements has to offer. The picture element provides more flexibility if required by giving us access to the full power of media queries to select our image. This is the manual way of telling the browser which image is to use rather than letting your browser decide as we did in previous videos. The picture element is simply a wrapper for various images just like this. Inside the body, we create the picture, opening and closing tag. This element doesn't provide any images on its own, we instead need to place in some content inside of this element. Also just like the source at which you looked at in previous videos, the picture element is also well-supported. We have full support in all of the major browsers and like with most things, we have a problem with Internet Explorer, good with Microsoft systems. This has been replaced with the Edge browser so we shouldn't have too many problems with this element. Back to the text editor and inside of the picture element and I'm going to add our first image. I must go for the images folder and the lake which is 640 pixels wide.jpeg. As you'd expect, if we save and refresh this, we now see this image has been loaded inside of the browser. With this setup we're not any further down the line than we would be by simply using a regular image element. But what we can do when using this picture elements is to also provide alternative images inside of one or more source elements. The source elements only has an opening tag. Since we added the data as attributes, it's used to provide media resources for not only this picture elements but you may also see this source attribute used with the audio or video wrapper too. When using it inside of the picture elements, just like we are, the source attributes will be ignored. The reason for this is the source attribute is not needed because we already have a fallback image just below, but what we can add is the source set. This again, takes in the images we want to use, followed by the size. We first add the file path so ours is in the Images folder. Let's go for the sun-640.jpeg. The size of the image 640w. Then separated by a comma, our second image which we are going to allow for selection is the larger version of the sun which is sun-1,280.jpeg. Then we specify that this image is 1,280 pixels wide and I've added the two sun images inside of here which are different to the fallback image just so we can clearly see what's going on inside the browser. Just like in the previous video, we can also use the pixel density instead of this width. Here we could add 2x and 4x for example, so choose which option suits you best. Let's give this a save and open this up in the browser, refresh. We'll see if we shrink the browser down to the smaller size but the sun-640 will bloat it. We don't see the lake because this is just the fallback image if the source is not supported. Let's make this a little bit bigger. I keep going and then once we hit just under 500 pixels, we see the larger version has been loaded. Now this leaves us in a pretty similar position to what we've had in the previous videos where we had a regular image element and then we added the source set. But the difference here is we can also introduce media queries. This means rather than letting the browser decide which image to display, we can serve some stricter conditions of our own. We can use any media query which we want just like we could do with regular CSS. A common one is to only display an image if the viewport is a minimum or maximum width. We add the media attributes and then setup our media query in between the brackets. This one was at the minimum width equal to 640 pixels and we're going to delete our larger image. What this leaves us with is a source attribute, which is only going to display this image when the browser is larger than 640 pixels. If the browser is under 640 pixels and this media query condition is not met, the fallback image will be used. Let's check this out. Bring this down to the smallest size and refresh. We see the lake which is the fallback image and now let's stretch this to be 640 pixels or above. This will now switch to the sun image. Another useful thing this media query does for us is it also allows us to fine-tune exactly when we want our images to switchover. Earlier when the browser was deciding, it changed my picture at just under the 500 pixels mark. Let just say we thought this was too early, we wanted to change this to 600 pixels, well these media attributes will allow us to fine-tune this to any size which we want. To do this, we'll duplicate our source, we can re-introduce our large image which was 1,280. We also need to do is set the width one here and this time, for the smaller image, we're going to set the maximum width to be 599 pixels and then we want the larger one to take effect at 600 pixels. You could even make this higher if you wanted to but this media query will now give us full control of exactly when we switch to our large image. Let's try this out. If we go down to the smaller size, we see the sun at 640, and then it takes it up to 600 pixels and our image will now be replaced with the larger version, as well as the minimum or the maximum width which we are using here, any valid media query can be used. Even though we have only got one single image source for each media query, we can still use multiple sources that still fall under one single media query. An example could be when checking the device orientation. This is more for mobile devices and we can check if the device is rotated either landscape or portrait. To see this in action, we can change the maximum width via the orientation, and this one we'll set this be a landscape. We can then change the second one to the orientation of portrait and now we're going to set our images to suit each one. Since landscape is wider, we'll go for our two wide images, which is 1,280 and 2,400. Change both the image source and also the width. Let's copy this, separated by comma the second one which is for 2,400. Next, the portrait view so that images will be narrower and for this we have a 320 and a 640 version. The first source of 320 then separated by a comma, we can add in the 640 pixels wide version. Now if we test this out in portrait mode, our two smaller images should now display. When we switch this to landscape, we should then display our two large images. To simulate this, we can go over to the developer tools, and then if we click on the Toggle device toolbar, this will then allow us to select between a desktop view and a mobile device. Let's go for iPhone 6, and if we refresh, we see that this small image of 640 pixels has been loaded. This icon just here will toggle the orientation to landscape, refresh, and it's now chose one of the large images for the landscape view. Remember you can add as many of these source elements as you would like to, to make sure we have the best image for each situation. Finally, we can also make use of these size attributes, just like we did in the previous videos. Remember that if no sizes attribute is added, it assumed you want all of these images to be the full width for the viewport. As an example, when using a landscape orientation, we may want to restrict some of the bigger images to only be 50 percent of the screen's width. Though just like earlier, set the sizes. This is combined with a media query where we'll set the maximum width be 1,280 pixels. From zero to 1,280, we want the images to be the full width of the device with 100vw and then only 50 percent wide on the larger screens. Like this and let's test this out. If we stretch the browser even wider, we won't see any difference since the iPhone has a fixed size. If we select something larger such as a iPad Pro, when we first select this in the portray view, the image is the full width of the screen. This is because it falls under the maximum width of 1,280 pixels, where we set the width to be 100 percent. Alternatively, if we switch this to landscape, it should now switch the image down be 50 percent. Let's try this, and this is all now working as expected. The key takeaway being if you want the browser to decide which image to select, use the image combined with the source set or just like this if you want much more flexible control, the picture element is a great option. Another great use for the picture element is to also change the art direction of images and we're going to cover how to do this in the upcoming video. 8. Art Direction: The examples which we have looked at so far mainly focus on the pixel density and also the resolution. However, though the pitch element also has another great use case, and this is to adjust the image, based off what's called the art direction. For this, let's head over to our starter files and into lesson Number Five. From here, the Art direction folder, open up the index page, and let's open this up, inside of the browser, we'll copy the file path to this, and then replace the one from the last video. I'm also just going to click on the toggle device toolbar to reinstate this back to the full desktop view. All of our images so far have just been different sizes, and it's great to have a smaller and a larger version of the same image, but sometimes certain images just may not suit a certain screen size. In the Images folder, inside of lesson five, first, let's take a look at the landscape version. Here, we see somebody jumping with a wide landscape background, and this will look good on a large monitor in my opinion, where you can see all of the background detail. We can see the sun, we can see the mountains, we can see the ground, but imagine this on a small device such as a phone, since the person jumping takes up only a small percentage of the total width of the image, is focused point of this person may look really small. For the mobile device instead of supplying a smaller scaled-down version of this image, it may be better to provide a cropped version of this focus point, just like we see in the portrait version. Here, we see a vertical version which focuses on this person, and we also see less of the background. Meaning, this person takes up a larger percentage of the total width. Therefore, it will look bigger on a mobile device. Let's try this out. Over in the index page, inside the body section, we have just a blank starter here. Again, to make use of this, we're going to use the picture element. Then inside of here, we're going to supply two source elements, which is going to point to both of these pictures. We know we can add a media query as an attribute, then inside the brackets, the first one we'll set up the maximum width be 799 pixels. Then for this smaller view, we're going to set the image with the srcset attributes, so this is going to point to the Images folder. Then the image which we need, since this is the smaller device, we're going to use the portrait version. This has a dot JPEG extension. Now, we can duplicate this. This one is going to trigger when the minimum width is 800 pixels and above. After this one, since we have more space, we'll switch to the landscape view. Switching between our two images like this when one is a particular zoom level or one is a cropped version of the image, this is what is referred to as the art direction. Since we don't have multiple sizes of these images, we're going to set up some CSS at the top. We will simply restrict the image to be a maximum width of 100 percent, and this will stop the images from stretching too wide. Also, doing this pitch element, we need to add an image placeholder which is going to act as a default, and also the element locations place these images inside. The source, this is going to be for the fallback, would just place in the landscape version. Give this a save, and make sure that over in the browser, we are within the number five folder. First of all, let's shrink this down to the smallest view. Because we are on the smaller view, which is under 799 pixels, we'll see a portray version which is focused on this person jumping. Let scale this up to over 800 pixels. There we go. Then over 800 pixels, we see the full landscape version with more of the background scenery. This art direction really gives us something to think about, to try to put the focus onto a single part of the image. Or just like in this case where we're trying not to make the key part too small. Next, we'll focus our attention on the different image types available. 9. Image Types & Compression: Another hugely important part of optimizing our images for the web is to consider the image format. There are lots of image formats available, and I'm sure you've come across some of these, such as JPEG, PNG, GIF, or GIF depending on how you pronounce it, and also SVG to name a few. These are all common and when downloading an image online, using our projects, we don't always get a choice of what format the image is going to be in. There are ways we can change this, which we'll look at soon. But before we go and change the image formats, we first need to understand what the key differences are and why we should even change formats at all. There are multiple key reasons why the format is important. The big one is that different formats have different file sizes. The same image in a different format could potentially bring down the file size, reducing the download time for the end-user. This time-saving could be little or huge depending on some of the factors which we're going to take a look at in just a moment. Along with the file size, the actual image quality can also be different with different formats too. There are considerations such as if the image can support transparency and also the number of supporting colors. Also, we need to think about if we need to scale the image up or down. Since as we've looked at in other videos, scaling up JPEG images can reduce the image quality. But other file types such as SVG will be unaffected. This happens because both this SVG and JPEG fall into two different categories. A raster image is like a traditional photograph. It's made up of tiny pixels. Depending on the size of the image, there can be millions of pixels, and each one represents a color. Since there are so many pixels in a photograph, they are usually undetectable by the human eye unless we scale the images up, and this is when they start to lose the quality and become pixelated since the screen is trying to fit the same amount of pixels into a larger area. Image format such as JPEG and PNG fall into this category. Another category is vector graphics. These are created on computer programs and are made-up with things such as curves, lines, and shapes. They can be scaled up or scale down in size without any loss of quality. We can also edit existing vector graphics too. Programs such as Adobe Illustrator, Sketch, Inkscape, and Figma can create them and they can be saved into format such as SVG. Another difference with an SVG is it's also represented in code too. An SVG file contains a code, which we can directly add into a HTML document. Meaning we don't always even need to link to a image file if we prefer this approach. The clear distinctions between these two groups make it easy to decide what we need to use. If you need high-quality photographs, such as a website, which is a photography portfolio, raster images such as JPEG are ideal. Well for graphics, logos, and icons, a vector will often be a better choice especially when scaling the image. Even though we have the raster category as a better choice of things such as photographs, this doesn't mean we're stuck with the original file size. We can apply compression to our images to reduce down the file size, which will make them faster for using on the web. Compression can be applied in groups called lossy and lossless. These relate to how we compress or optimize our images to try to reduce the file size and therefore the download speed. Lossy compression, as it sounds, can result in a loss of the original image quality. But since it's more regressive, it can also lead to bigger file size reductions too. This doesn't mean our images look pure. In fact, you may not even notice a quality loss at all on many occasions depending on the level of loss which we set. Once compression has been applied though, something which is really important is there is no going back to the original image, it's completely lost forever. Lossless is pretty much the opposite, and the original image quality is maintained. The compression algorithm can reduce the file size and also reduce any metadata which you stored inside of the image. Metadata includes things automatically saved by the camera, such as the date and the camera type, the photographer name, and so on. Since lossless is maintaining the original image quality, it's understandable that the file savings may be less than the lossy versions. So with all this, which one is best to use? Well, let's take a look at some of the more common image formats. JPEG is a great choice for display in high-quality photographs or even art work. However, it's not great for displaying things such as text, especially if it needs to be scaled up. JPEG is a common image format, so there should be no problems with that lack of support. It's a lossy compression format, so we can also save lots of the image file size. If we're happy with a small loss of quality, we could even go further with the compression if we wanted a smaller version, maybe as an email attachment or just something on your website which doesn't require a huge amount of detail. PNG is also a really popular web image format. One of the benefits is that it also supports transparencies, which is something a JPEG doesn't support. A JPEG must have a solid background color. For example, if you're using it in a website header, you need to make sure that the background color of the image matches the header background color. If you need to use an image or a graphic on a transparent background, a PNG is the way to go. A PNG also has lossless compression, so the original file is maintained and it can also be restored. However, this can also mean less file size reduction is possible. You will sometimes find simple images, icons, or graphics stored as a GIF. They are a good choice for this, since they have a small file size and can also support transparencies too. So we don't have a background covering things up. A GIF file can also hold an animation too. So this is a good choice if you need to animate. These animations can be created with tools such as Photoshop. Over to the vectors, an SVG is a popular choice. We don't use it for photographs. Or if you need a computer-based graphic, a logo or an icon, this is a great choice because it's resizable without any loss of quality and also generally has small file sizes too. Some of these image technologies mentioned so far have been around for some time and also have some limitations. For this reason, some newer next generation image formats have been developed, such as JPEG 2000, JPEG XR, and also WebP. Although not as commonly adopted just yet, they can offer big file size savings on traditional formats like JPEG and PNG. I'm not going to go into all of the technical details of these, but JPEG 2000 offers the choice of both lossy and also lossless compression. We can choose which one is best for our images and generally has a higher quality image for the same file size as a regular JPEG. JPEG XR was created by Microsoft, and it's also offering the choice of both lossy and lossless compression to suit a wider range of situations. It can have higher levels of compression, so there is a big file size saving to be made. We also have WebP, which has been developed by Google and just like the other two will also support both lossy and lossless compression. It can preserve transparencies and generally has a much smaller file size than traditional file types. Another benefit is it also supports animations too, meaning it's a really good alternative to GIF files as you would expect since these file types are much newer. The problem lies around support in image programs, devices such as cameras, and also web browsers. To check out the browser support, we can go to caniuse.com as well. Let's take a look at a WebP. Here we go, the WebP image format. We can see this is fully supported in most of the major browsers. As ever, we have a problem with Internet Explorer, which has been replaced by Edge. Also on Safari, we only have partial support. This means it's only supported on the macOS, its operating system and above. This is something to take into account when using any of these next-gen images. Let's take a look for JPEG 2000. We can see this is not as well supported as the WebP, so this is something to be careful of. Let's check the WebXR. Again, this has a lot of problems with support. It may be better to stick with a format such as WebP instead of these two JPEG formats. SVG, let's take a look at this. This is one of the vector types. This is very well supported on all of the major browsers. It can be a good idea to have a next generation image format available if the browser supports them and also fall back images such as JPEG and PNG if there is limited browser support. We'll take a look at how to do this next along with some tools you can use to convert image file types. 10. Conversion Tools & Fallback Images: Now we know a little more about the different types of image file types available. Now let's take a look at how we can add these to our project and also how we can add fallback images if there is no browser support. For this lesson head into number 6, which is conversion tools and fallback images. Open up as ever the Index page, and then we can open this up inside of the browser, place this into a new tab. I'm going to start with our blank HTML page. Inside here, I've provided a list of some of the common image types, we have the WebP, we have the SVG, PNG, JPEG, and also GIF. Again, for switching between different image types, the picture elements it has is covered by [inaudible] list out various images with different formats. Still provide the source elements as we've done previously, but this time, rather than working with the size, we declared the file type, browser or device will then check if this file type is supported, and if not, it will be skipped. Using these image formats which we have just here, let's start with our example. We can use the picture element as our wrapper, for this example over in images we have a JPEG, and a WebP version of the same image, so let's add these in. We need a source, then inside here, we add the type attributes. We can then use any of these ones used to both, I'm going to go for the WebP version, which is image/webp. Then we add the sources point to the WebP image. After this, we also need to take care of our fall back, which is our bridge.jpg, add in the image elements. This is in the images and the bridge.jpg. If WebP is supported, this image will be selected. If not, it will easily fall back inside of the image elements. Let's try this out, refresh the browser. We can see inside of the developer tools that my browser has chosen the WebP version. For me this would be a benefit because this will load faster. If we take a look at the bridge.jpg, we can see down at the bottom, that this is about 134 kilobytes. If we go to the WebP version, this is around by 1-10 kilobytes, so this will result in a file saving and my images will download faster. This is really useful, but when we're looking for images to use in our projects, we don't always have the option to download our images in different file formats. This is fine because there are some tools to help us convert, and also compress our images. I'm using a mark, and this has some options built in when opening up the images. If we go into number six, which we are currently on, insert images and double-click on any one of these images. This will then open up inside the preview. Don't worry if you aren't using a mark if you're using Windows or Linux, your default program which opens up the image may also have some of these options built into. If not, we'll take a look at some more options in just a moment. As most symbol, we can go into tools and adjust the size. We can reduce down the file size if this particular image is a little bit too big, and we can see the resulting file size has been reduced. Which changes to be 300. You can see this has been reduced down to 50 kilobytes, which changes to be 300. It's now down to 30 kilobytes. It's most basic, we can just do something like this to reduce down the file size if the initial download is too big. Most programs also allow us to export the images in different formats too. Many of these generally have an export function which we can click on and we can often change the image format, so we see the file size is 157 here, which changes to be 2,000. This is 216 PNG, this is a bit bigger, and also the file sizes which support compression, we can also adjust the quality too. As with most things are, there is also lots of other tools which you can download. You can find a huge amount available if searching App Stores or online. A popular tool low is one called ImageOptim. This is available from imageoptim.com. This particular piece of software is available for Mac and Linux, which you can download. This is a collection of tools which combines to remove any unnecessary junk from our images. Here is a list of tools which it uses, and it's all free and open-source, so there's no charge to use this. It also applies compression techniques too, and there is also an online version which we can click on just here. They do charge for this particular service. And another one is tinypng.com. Unlike ImageOptim, this is a free online compression tool. You can find this at tinypng.com. Despite the name, this also accept JPEG images too. If we can simply drag and drop into this section just here, that other web-based drag-and-drop service is compressor.io, along with PNG and JPEG. This also accepts GIF, SVG, and also the newer WebP types. You can see that on the bottom here we can accept lossy or losses compression types. Also a customer setting too where we can resize and also set the image quality too. Another optimizer and compressor is Img2go, this is available at img2go.com. This tool also allows us to convert the image type to other format too. Works with PNG, GIFs, JPEGs, and also vectors such as SVG. Just like the other ones, we can also drag and drop and we'll also have some options to link to Dropbox or Google Drive, a dedicated URL. There's also plenty of options to set the quality and also the image size too. These are just some of the many tools available to download, and also some online versions too. We should never be stuck with the wrong image type for our project. 11. Using a CDN: All of this image manipulation and choosing the correct images for our project can really be a lot of extra work, especially as our apps grow. This is why in this video I'm going to show you a great service which is also free, that can really help with this. We can make use of services such as Cloudinary, which is available at cloudinary.com. This is going to allow us to take care of a lot of work for us. Cloudinary is used to store and host our images and also video if required too. Once uploaded, we get a URL which we can link to inside of our HTML. Not only does this host our images photos, but also has many other benefits too. All of these benefits, it's really easy to use CDN. CDN is a content delivery network and it is a way of having our content, which in our case is our images available across the world in multiple servers or data centers. Having these multiple data centers mean that our images hosted closer to the user, rather than just having them in one central location, everyone in the world. This can really speed up the delivery of our images. Also if there is an issue with the server, it can easily be switched over to a new one to avoid any downtime. Not only does it serve the image from a local data center, but it can also provide a optimized version too. We only need to upload one single image to Cloudinary and we can convert it and send it back in a optimized file format, including things such as WebP and JPEG 2000, of course, if the browser supports it. The same for size and quality too, we can set these images up to be transformed into certain sizes or allow it to choose photos. Obviously, we need to first upload an image which is big enough. Our biggest use case, since we don't want to stretch an image too big and loose any quality. If you've not used Cloudinary before, go ahead and create a new account which is free and has a huge free image usage allowance. There is also a paid version too, but the free account includes storing thousands of images. You shouldn't have any worries unless your project grows to a huge level. I already have an account since I use this quite regularly. I'm going to open up this new tab. Then taking it to the user dashboard area for this lesson, head over to number 7, which is using a CDN. I already have this open and also opened up inside a new browser tab. This is just empty HTML file. Inside the images folder, we just have this one single image, which is 5,311 pixels by three-five, four-five wide. Meaning this is a pretty big image, but this time we're not going to be linking it directly to this image. Instead, we can upload this image to Cloudinary and then at the Cloudinary link inside our index. For this, let's go into our project folder, into at number 7 and in the images folder, and over to the Cloudinary dashboard, which you'll be taken to when logged in. All we need to do is to click on the media library. Then we can drag and drop a new image which you want to upload. Drop this inside here, and just give this a few seconds to upload. There we go. There's our new image. If we hover over this, we can see a URL which we can copy with this link just here. If we double-click on this image, we're taken into the detail where we can add things such as tags. We can add some metadata. We can see any revision history. We can see the file data such as the file type, the size, and also the dimensions. Then down at the bottom we have what is called transformations. Currently we are on the original and this is the URL to this particular image. Cloudinary has automatically added some transformations to improve our image, to change the size, to transform into a thumbnail. We can have a banner, we can have a watermarked version. Each time I click on one of these images, we have a new URL which we can use inside of our projects. Along with these defaults, we can also create our own transformations too by clicking on this transform button. From here, we can crop and resize our images. We can change the image format, we have an option for all of these different extensions. We can adjust the quality with this drop down and this slider. We can add corner radiuses, we can rotate, we can add lots of different effects. Every time we make a change to this image, we're then given a new URL which we can copy and use inside of our project. Each time we make a change to our images, let me just close it down and go back into the original. Each time we make a change to one of our images such as clicking on one of these presets or even our own transforms, we are then given a new URL which has some different parameters. Here we can see this orange parameters are being added and separated by comma. If we click on the circle. We can see different ones here and these will affect things such as the size, the radius, the border, the color. This is our way of telling Cloudinary which image we want to fetch. This image ID is always the same at the end, but we'll just add these different parameters inside of the URL. Let's go over to our project and we can try this out. First of all, if we click on the original and then we can select this URL. We'll just copy what's in it just here into our projects. What we're first going to do is to set the image to be 100 percent of the browsers width with the style tags. The image elements, max width of 100 percent. Then down into the body section we can create an image with this URL as well. Deregulate made which was the link which we just copied. All we need to do is to paste in the source attributes, close down the sidebar, give this a save, refresh the browser. We can see since this is quite a big image, it's taken some time to download. This image is far too big for the current browser size, but we'll look at how to adjust this in just a moment. Next, we can adjust the rotation or the angle of this image. We do this just after this upload section. If we say forward slash, say alpha angle underscore and then 90 for a 90 degrees. All of this comes before the image ID, which is at the very end and also the image name. Save this. Reload and now we should pull in a 90 degree version of our existing image. Of course, this is far too big, lets remove the angle and we can set a fixed size in pixels with w then underscore followed by the pixel values such as 200. Refresh. Now this pulls an image which is really small and we can see the download time is much faster, but as we've learned in previous videos, a pixel size is not always the best choice. What we're going to do is to set the width to be equal to, also, which is going to allow Cloudinary to choose the best size image for the browser. Here we see it chose a 3.4 megabyte version. If we go to the original. The original is about 4.2, so it chose a smaller size which is suitable for this browser. We can also change the default format of this image by using f then underscore, and then selecting one of the allowed format by Cloudinary. I'm going to go for WebP and also for this, we can remove the.jpeg extension of the browser and refresh. We now see the image type is WebP. Just like with the size, we can also allow Cloudinary to automatically set the correct format photos. We could do this with f auto, and if we do this, we see that Cloudinary also chooses a WebP format photos, since this is supported inside of the Chrome browser. There's also many other options which we can add inside here. We can also combine them too, or we could also generate these URLs ourselves inside of Cloudinary using these transforms. This is just an overview of a basic usage with Cloudinary. But it has many more features including adding presets which automatically configure or transform our images each time we upload new ones. There is a developer API to connect your projects. This will allow you to automatically do things like adding news uploads. You can include video. I would recommend looking through some of these features. Also the documentation too if you plan to use Cloudinary for a project. I also use Cloudinary for my own projects too, and find it very reliable. Also even though this example just uses the basic image elements, we can also combine these hosted images with [inaudible] and also the pitcher element too. In the upcoming video, we'll discover another way to reduce our page load time by setting up lazy loading. 12. Lazy Loading: We have a webpage which has images. Sometimes when the page first loads, not all of these images are visible. For example, if we have some images right down at the very bottom of our page, we shouldn't really expect the user to wait on these images being downloaded before the page initially loads. To help with this, the final technique I want to show you is called lazy loading. This is a way of delaying or deferring the loading of images which is not critical. There are often images which the user doesn't initially see and has to scroll down to move into view. An example of this is something like Pinterest. A page may have thousands of images and loading all of these at once would take a lot of time. So it makes sense to only load what the user can initially see, and then load more images as the user scrolls. We can even add simple or lightweight placeholder content while these images are being downloaded. Lazy loading is not just for images either. It exists in other parts of web development too. We can lazy load pretty much any type of content depending on what languages, libraries, or frameworks we're using. We can lazy load newsfeeds, articles, social media feeds, and generally any other type of content which you want. There are multiple ways of doing this, including using JavaScript. But here, I'm going to show you a really easy way to add lazy loading natively through this interaction, head over to number eight, and open up the index page. Then paste this into a new tab inside the browser. We can see we have some dog images loaded up just here and we don't have any images stored inside of this project folder. Instead, these all link into external images. We have 10 different images here. As expected, all 10 of these images are loaded up at the same time, even though many of them are not in view when we first load the page, I have a pretty good connection speed, but many users do not. Users could also be on a slower mobile device and if there were lots of images like this, it can really slow things down. To delay the loading of our images which are outside of the viewport or the visible area, we can add it to our image element, a loading attribute, and then set it to be lazy. Currently, we can see about three images inside the view. So we can leave the first three images to load up straight away. Now if we go down to image number four, we can add the loading attributes and set this equal to lazy. Copy this and we can paste this into all of the rest of our images just below. Make sure this is in image number four right through to 10. Let's go to the browser and see what happens. If we refresh, we can still see our first three images, but all of the images are still being downloaded at the same time. There is no change because until these images are loaded in the browser, the browser will not know the height and the width of each image. So if it doesn't have the height and the width, it cannot tell which images are going to be in view and which ones are going to be below the fold. The fold is the bottom part of the browser. Before we need to scroll down. To fix this, we can add some simple CSS in the head section, place in the style section. For the images, we'll just set up a standard width for all these of 600 pixels and also the height of 400 pixels too. If you wanted to, you could also add the width and the height of each individual image too. But I'm just going to keep this simple for this example. Let's try this out. Up to the top of the page and refresh. Now we only see six images loading inside the dev tools rather than the 10 which we originally had. This is a saving of four images, but why are we getting six images downloaded when we can only see about three inside the viewport? Well, this is because I'm using Google Chrome and Chrome has decided to load some extra images which I expect we're going to need pretty soon. We can see how this reacts in different browsers by copying this link, I'm going to open up Firefox. Paste this in. We see initially the same number of images. Open up the developer tools, we're to right-click and inspect element. We see our first three images just here. If we go into the network and refresh, Firefox will only choose the first four images, so it doesn't pre-load in advance as many images as Chrome does. Now if we close Firefox, and let's go back over to Chrome. If we start to scroll down, and we can now see as we scroll down the page that extra images are being loaded as we get closer to needing them. As I mentioned before, this is because Chrome will prefetch them earlier so they are ready for the user. How early depends on the connection speed and also the type of image. That's what we've seen with Firefox, it also varies by the browser and all of these extra four images have now been saved from the initial page load time, resulting in a better experience. If there is an image which you want to load immediately, regardless of if it's below the page fold or not, we can set the loading to be eager. If we go down to the very last image and set this to eager, up to the very top of the page and refresh. We see that now rather than the initial six images, we now get the seventh image loaded even though it's not in view. As you can imagine, these lazy attributes can only help things even further as we have more images on our pages and especially if the user needs to scroll down to reveal more content. We've just seen that this loading attribute worked perfectly fine in my version of Chrome and Firefox. But the support still has a little bit of catching up to do in some of the browsers. Let's do a search on caniuse.com for the loading attributes. This is one I need you to see, which is the lazy loading attribute for images and iframes. So it's finding Edge. With Firefox we only have partial support and this is just because it only supports images rather than iframes. It's finding Chrome or Safari. This is not something which is enabled by default, but we can enable this inside the browser settings. Also, this loading attribute can also be used with the pitcher element too and we only need to add it to the fallback image elements rather than all of the sources for it to take effect. So if we go back into our project folder and go into any one of these index pages, we only need to add the loading attributes to this image element rather than each one of these sources. With this all in mind, we now have an example just here where we scroll down and the images will lazy load. But what happens if we scroll down faster than the images can be downloaded? It's not a problem for this small example where if we had thousands of images and a really slow connection speed, we may start to scroll down faster than the images can be downloaded. For this problem, there are some different approaches which we can take. We could also provide some lower-quality placeholder images, which are going to download faster and we can set this up with the picture element. We could also have one single generic placeholder image, which we use in place until the image is downloaded. Or even things like a solid background color using some CSS. But is also JavaScript libraries to help with this too and also plug-ins if you were using WordPress or any other content management system. One of the popular ones is called lazy sizes and this allows us to make use of JavaScript to apply fast and performance lazy loading. It also makes use of the picture elements and the source set to create responsive images. It's SEO friendly and also intelligently loads images when needed based on the browser, the scroll position, and also the network connection. So it can really handle a lot of the hard work for us. Also in addition to this, it also allows us to use low quality or blurry images as placeholders. I'm not going to go into the setup and installation, but it's pretty simple to get started with. We scroll down to the how-to section. All we need to do is to download the script and link it inside of our HTML. Or we could also install this via NPM too if you're using it on a node project. There is no configuration needed, all we need to do is to set up our images, like the examples which you see here if you're using responsive or non-responsive options. We can also use this with an iframe if needed too. I hope this class has given you something to think about and also some useful techniques which you can use in your future or existing projects. Next, we're going to talk about a little challenge to set up so we can test all of these new skills. 13. Class Project: When we were learning, the best way is to put things into practice. If you already have a project you can apply these techniques to, then that is great or you may have an upcoming project where you can try things out. I've also provided a basic image gallery template with this course. This is inside of folder number 9, and inside here we have this index page and also a single image. This is just a single image to get you go in and you will need to download some more images to use for this project. Something like unsplash.com is ideal. This is just a pretty basic index page. All we have inside the body section is a single section and then multiple image elements, and we'll set this up just above in a style section will be displayed as a grid. If we open this up inside the browser, we can see our grid just here. What I would like you to do for this challenge is to download some new images to use for this gallery. You can then optimize and try all the techniques which you've learned to efficiently load them up inside the browser. There is no right or wrong way of doing this. The idea is just to try things out, to optimize images, which use file sizes and generally make loading the images more efficient. You could do it in batches, you could apply the changes, record your results, and then repeat until you are happy with the results. Good luck with this project. I can't wait to see what you create. 14. Follow Me On Skillshare!: A huge congratulations from me for reaching the end of this class. I hope you've really enjoyed it and gained some knowledge from it. If you've enjoyed this class, make sure you check out the rest of my classes here on Skillshare, and also follow me for any updates, and also to be informed of any new classes as they become available. So thank you once again. Good luck and hopefully I'll see you again in a future class.