In this video, we'll see how to add images into a webpage using HTML and a few other related topics.
Continue to learn to code HTML & CSS in our NYC Web Development classes. For those outside New York, find and compare the best HTML & CSS classes near you or live online HTML & CSS classes.
Video Transcription
Let's see how to add images into a webpage using HTML and a few other related topics. Before we get into that though, let's just talk about file naming. I've got a page here and I'm going to open up index.html. Index.html is a special name when you go to a website's address. If you don't give it a specific page, the web server knows to find index.html and use that as your homepage. For any additional pages you build after that home page, you can name them whatever you want, but index.html is a special name reserved for your homepage.
I'm going to add pages and some images to this page. I'm going to open this up in my code editor, Sublime Text, and I want to preview this in a browser. So, I'm going to right-click on that page in my desktop here and open it up in my browser such as Google Chrome.
We see a main heading here which is a Heading 1, and I can put these side by side so we can see the code and the result here at the same time. The topic for the page is the latest news, and the headlines are the kind of individual subtopics under the main topic. I want to put some images up at the top to show a bunch of different images so you get a quick visual of what the news stories are, instead of having to scroll down and read them.
I have the images in an images folder. They can be JPEG files, PNG files, GIF files, or SVG files. I'm going to need to tell it to go into the images folder and find that image. Just like we link to other web pages within the site using relative links, we link to our images using relative links as well. I'm in the index and I need to get into the images folder, and then I can find the file.
I'm ignoring the hints from my code editor so I focus on the code and not the way that a particular code editor works. I go back to my browser, hit refresh, and the image loads. I use my code editor's hints to complete the image tag, and once again I have to go into the images folder and link to the file, and make sure you get the name right.
If you're not good at typing or you think there's any chance you're going to make a typo, copy and paste things like file names or get an add-on for your code editor that can suggest those. In my case in Sublime Text, I'm using a package called Autofile Name, and it actually suggests the list of file names. So, as soon as I put my cursor in there, it pops up and I can actually use my arrow keys here and hit return and then choose the one that I want. But, every code editor is a little different as far as how that type of stuff works and if you have a package, how that package would work. So, let me save that, come back here, and hit refresh.
The reason I wanted to show two images is because I wanted you to see that unlike headings and paragraphs, which stack on top of each other, these two things are going next to each other. So, there are different types of elements: there are what are called block-level elements and inline elements. Headings and paragraphs are block-level elements and they stack on top of each other like building blocks. However, images are what we call inline elements; they go in a line, kind of like words. Words are inline elements; they go next to each other and so, if you wanted images to go on different lines, you'd have to either wrap a paragraph or insert a break.
For each image that you do, you want to add alternate text, and this is good for accessibility purposes. Not everybody can see perfectly or not everybody can see, so for anybody that is blind or vision impaired, we always want to have alternate text so that is just another attribute that we're going to add to our image tag. Alternate text should be done on every image and it should describe what that image is. If you imagine if you could not see that image, what would you want to hear to describe that image, and that would be a good piece of alternate text. In this case, this would be "Bill Gates holding the Kid A album" and this would be a "radar map of a hurricane." You would normally put in the name of the hurricane, but we'll just say "of a hurricane." What you don't want to do is you don't want to just leave the alt attribute out ever, because then it would probably read the file name.
There are some cases where you would actually leave an alt attribute but leave it blank and not fill in a value. In that case, that would be purely if it's a decorative piece of content like a little divider line or maybe a little dot or something like a visual flourish. In that case, if you didn't know that it was there and it doesn't change your perception of the page, you could just kind of skip over it by leaving the alt attribute blank. You're basically saying don't read anything; this is just purely visual. If they can't see it, no big deal, it won't affect the meaning of the page; they'll still get 100% of the benefit of the page even if they don't know that this thing exists.
In addition to the alternate text, there might be other attributes that we might want to add, potentially. It depends when this page is loading during the page load; what if that image hasn't been downloaded yet? We can break these links by adding a `1` in each of these and let's see how different browsers handle this.
So in this case this also shows you another reason why alternate text is there - it's not only for accessibility purposes. It's also there while the image is loading, so while the image is loading here, you may see the alternate text depending on your browser. This will vary from browser to browser - it can be different, but in here you see the broken link icon and the alternate text. And so, once the image loads, then this would be replaced with the actual image and then you would no longer see this.
Now, if you actually do have a broken link, if the image doesn't load, then you would see this. How this looks will depend on the browser - for example, Safari looks a little different aesthetically, they don't show the broken link icon; they just show a little box with the text. Firefox can be different as well. Let's take a look at how Firefox does - they don't outline it. So, the exact handling of this is really up to the browser, and it varies across all the browsers.
But they all show the alternate text in this case. Now, what if we are waiting for that page to load? Now, it does not know how big those images are. So, if you've ever been browsing the web and you've started loading a page, especially on mobile phones, and you've scrolled down and you're trying to read something and then all of a sudden it scrolls off screen and you're like, "Wait, come back," that's because other images were loading up top, and if it didn't know how big those things were, it didn't know how much space to reserve. And so, once those come in, it pushes the other content down on the page, and even if you can't see it, it's still making the page taller, moving this content down. So, once the page is done loading, it's fine, but during the page load, the page can change and content can move down as images start loading in.
Is there a way that we could prevent that in certain cases? It depends on if it needs to be a flexibly sized image or a fixed-sized image. In this case, these images would be a fixed size - we don't want them to resize - so we can actually go in and give it the exact size of the image. So, even before it downloads the image, it knows how big to make that image and allot the correct space ahead of time. So, we can set a width and a height for these images.
Now, how big is that image? One way to find out is, of course, you can open it up in your code editor or your image editor, so you could open up in Photoshop or whatever image editor you have. But a really quick way to find out how big an image is without having to even have an image editor installed on your computer is to just drag it into a browser window and in the tab bar of the browser window, it'll say the file name, but it also in parentheses says the size. Now, if the name is too long to fit in your tab, just mouse over the tab and wait for the tooltip. So, this is 190 by 145 and that's how big both of our images are. But I can verify that by dragging that one on and that one - mouse over there - 190 by 145. So, 190 wide by 145 pixels tall. So, I'm going to go ahead and close those and put that in there for both images because both images are the same size.
And now, when I hit refresh, Chrome doesn't do anything different in this case, it's not using that information, but other browsers can act differently. Firefox and Chrome did not pre-reserve the correct amount of space, so like I said, this can vary across browsers. But if you know that there is a fixed size to these images, you can specify the width and height. You don't necessarily have to - it'll still work without it - but one thing you don't want to do is put in the wrong size. So, you don't want to make your images bigger, for example, like if I change this to 590 wide, that's going to stretch and distort that image. Now, if I didn't put in the height and I just had in the width, then it would proportionally scale it up, but keep in mind that when you're scaling images up, they don't look good. You could technically scale it down, so let's say I want to make this even smaller - you could scale it down, that actually does increase the resolution and makes it look better on higher resolution screens. And that's a bigger discussion for another video. But so, it would technically be okay to scale them down some - you don't want to scale them down tremendously, though.
A common mistake that I see, for example, is when I go to a page and sometimes it's a photo gallery and there's a ton of photos on it and it takes forever to load. And when I click on one of them to see the bigger version, the bigger one loads instantly, and you think to yourself, "Well, how if it was loading a small image and that took so long when I clicked on it, how would the big version load instantly?" Because the big version would be so much bigger - well, what they were doing is they were actually linking to a huge photograph, probably straight from the digital camera, and those digital camera photographs, they can be megabytes for each and every single photo.
Let's say that the original photo is 3,450 pixels wide, but they're only displaying it within the space of maybe 190 pixels. Imagine displaying a three megabyte image for each image and you only want to split a display this big. You don't want to take a huge 3,450 pixel image and scale it down to fit the size, because it's still a huge file size. You need to go into your image editor and resize it to the size you need it to be so that it creates a small file that loads quickly.
The way that an image gallery like that should be built is there should be a different image for the thumbnail and for the large version, and that large version shouldn't be directly off the digital camera. Most of the time, those images are 3,450 pixels in width and the average screen is 1280 to 1440 pixels in size (somewhere in that range is what the vast majority of people have). If they're on the big side, they it could be HD resolution at 1920, but the average person has between 1280 and 1440. So, in that case, let's say it's 1440 pixels. If you're giving it a 3,450 or 5,000 pixel wide image, that's way more pixels than you actually need for those size screens. So, you normally want to resize your image using some sort of image editor to be the appropriate size and lower the quality down so that it's going to be a much smaller, faster loading image.
You don't want to throw in huge images, as Google does rank pages in part based on your page speed. So, if your page takes too long to load, that's going to hurt your Google rankings. You want to make sure you have quick, fast loading images.
Now, that's the basics of images. There are more things you can learn, but that's just the basics of it. Let me introduce a couple other tags. For example, here in the heading, right now this headline goes the whole way across. What if I want to put in a line break right here - I just want to go to the next line? I don't want to start a whole new heading, I just want one heading. I just want to put in an actual line break here. I know I hit return in my code, but that doesn't hit return in the browser, so for that we have the break tag (br, as in break). It just says break to the next line - it's not something that really exists in the code to say like you're not going to wrap it around something. To say this is a break, because that just doesn't work, you just say create a break because this can work even if this is on one line. So, in your code, you can say, "Hey, put this text, then insert a break, and then go to the next line." That would still work here. So, there's no ending tag, just a starting tag for the break - goes to the next line without adding extra space.
You could also wrap images in paragraphs if you wanted additional space. That would add space above and below it. So multiple ways you can do those kind of things. There is also the horizontal rule tag (hr, as in horizontal rule). That creates a horizontal rule line going through there. You can also style this with CSS (Cascading Style Sheets). You can put borders above and below things, so there are alternate ways to do it. But while we're talking about tags that only have a start tag and no ending tag, I thought it made sense to talk about this tag as well.
I'm not going to go into many details about styling it because you would normally style this with CSS. However, there is this size attribute. Normally, you'd be using CSS to really format this, but if you're just writing HTML and not writing CSS, if you put in a size, it has got some lovely retro three-dimensionality to it, with an inset shading. If you make it one, it would be like a thin, clean little line. To do things like change color or switch to other styles, you would need to be using CSS. Those are just a few of the kind of insert tags where you don't have an ending tag, you just have a start tag, and just the basics of how images work.