Learn to embed images in HTML using the <img> tag with src, height, width, and border attributes. The tutorial shows how to edit and preview in Chrome, then explains why pre-resizing images to their display dimensions loads pages faster than shrinking large files with HTML.
This video is going to show you how you can add images to your web pages. I've already added the images to my images folder here, and now what I want to do is write the code in the index file to bring those images onto that index page. Let me open up my images folder here and I'll show you those images. Right, here we go. And this one here, as I hover over, you can see it's 400 by 350, and the easy button image is 300 by 298. Couple of pretty good-sized images. Now this is my editor here and this is the Komodo editor and what we need now is somewhere between the opening and closing body tag we need to use the image tag. And this is a single tag. In other words there's not going to be an opening image tag and a closing image tag. It's all kind of wrapped into the same thing. Let's go ahead and put in our opening bracket img space and then the closing part of our image tag, and that's it. Now this alone is not going to do anything for us as far as adding our images, but this is the actual image tag. In other words, there's no closing image tag, it's all wrapped into one. Now then, what I want to do is go ahead and put in a space and use the src attribute just like it's showing here in the pop-up, and then equals a couple of double quotes. And in between these double quotes, I'm going to put the location of those images. And this easy button, for example, is right here in the images folder. So that's the first thing. Then we need to put a forward slash and the name of the file and then the file type. I'm just gonna go ahead and put this guy in my clipboard. Come on back here and again it's in the images folder, forward slash and name of the image, .jpg. And that's it. That should produce our image. So let me go ahead and save this. And let's preview this. And let's try our Chrome browser. And there's our Easy Button image. Now that's how you can put the image into your web page. Now there's actually a few other things we can do with this. You can actually style it a little bit more with some additional attributes. You can put a border around it. You can even make this smaller. For example, right now let me see how big is this. This is 300 by 298. Let's knock that down a little bit. Say 150 by 150. That'd be pretty close. And you do that by adding the height and width attributes. So we're going to space height equals a couple of double quotes. And in between this double quote I'm going to go 150 space width double quote 150 close those double quotes. And you can go on, like I said, add border and so on. But I'm not going to do that. Now then, let's go ahead and save this. Come on back here and refresh. And there, now it's a much smaller one. Now the drawback to this, even though it works just fine, the drawback to this is that the browser actually loads the original video size and then it scales it down based on those additional attributes. So in order to increase the speed of your page loading, instead of having the visitor's browser do all that resizing, I would go ahead and make the image the size you want it to be displayed rather than having it a large image and then putting in those additional attributes and having the browser do all that heavy lifting. And that's how you can add images to your web pages and even add some additional attributes. In this example, resizing that original image. That's going to bring us to the end of this video. Thanks for watching and you have a great day.
