HTML & CSS Intro Course: Adding Images

Full Video Transcript

Understanding Index.html and File Naming

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 here because I've got a page here and I'm going to open up index.html. I just want to address what index.html is to a website.

Index.html is a special name. When you go to a website's address, let's say you go to something.com, out of all the pages how does the web server know which one to show first, which is your homepage? Index.html is a special name that's going to be your home page because if you don't give it a specific page, the web server knows to find index.html and use that as your home page. From there you can link to any other file name that you choose, assuming that you don't put spaces in your file names. You want to have a dash or an underscore in your file name, but that index.html is a special name reserved for your homepage.

So if you only have a one-page website, you'll name your HTML file index.html. Any additional pages you build after that home page, if you're going to link to those, you can name them whatever you want. But that is a special name, index.html, for your home page.

Page Structure and Heading Hierarchy

I am going to add some images to this particular page, so I'm going to open this up in my code editor Sublime Text. I want to preview this in a browser so you can see what it is that I'm working with here. I'm going to right-click on that page in my desktop and open it up in my browser such as Google Chrome.

Here we see a main heading, which is a heading one in the page. I can put these side by side so we can see the code and the result at the same time. This is the page about the latest news, and then these are the actual headlines. This would be a heading two underneath this heading one, because if the topic for the page is the latest news, then the headlines are the individual subtopics under the main topic of the latest news. So those are all heading twos underneath the main topic of the latest news, which is the heading one.

We want to put some images up at the top, kind of showing a bunch of different images so that you get a quick visual of what the news stories are instead of having to scroll down and actually read those things.

The Image Tag and Source Attribute

I want to insert some images and I've got those images made. Let me go to my desktop here. I have them in an images folder that I'm going to open up, and we've got a couple of them here. They can be JPEG files, PNG files, GIF files, SVG files. Right now I just have some JPEGs and I want to bring those in. I'm going to put them underneath the heading, so between the heading one and the heading two, right here on this line. That's where I want to bring in my first image.

The image tag is a tag that does not have an ending tag. It is only a starting tag, and the reasoning for that is actually a good reason. Even though most tags have a start and an end, this one doesn't because you can't wrap it around something to say "this is an image." If you think about what a heading tag does, for example, it says that the stuff that's inside of that tag is a heading.

Conceptually, if I did have an end of an image tag, what would I put in here? This is a text file. I can't put the actual image in the text file. I can't put an actual image in here to say "this is an image." It just doesn't work. The idea of a markup language is that the tags wrap around the thing that they're marking up. So that's why we don't have a wrapping ending tag. We just have a start tag. We are inserting something that doesn't currently exist in the page, and so instead of wrapping it around something to say "this is an image," we're saying to insert an image. It's more of a command than a descriptive kind of tag.

Linking to Image Files with Relative Paths

For the image tag by itself, you're not just going to have "img" for image. You're always going to pair this with a source attribute because you need to tell it where that file is located. So "src" is for source. Like always, we have the tag name, there's a space, the attribute, and that attribute equals some value in quotes.

I've stored my images in an images folder here, and so I'm going to need to tell it to go into that 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. So I am in the index and I need to get into the images folder and then I can find this file. The format is folder name, slash, and if there were subfolders you could do folder slash folder slash, however many other folders deep you need to go, and then you end on the file name.

As long as you get that path right, then your image will load. I go back to my browser, hit refresh, and that image loads.

Block Elements vs Inline Elements

Let's do another image because there's going to be some useful things to learn. If I use my code editor's hints to complete the image tag, it's actually going to put in that source attribute for me. Once again I have to go into the images folder and then link to the file. 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 AutoFileName and it actually suggests the list of file names.

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. There are different types of elements. There are what are called block 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.

If you wanted images to go on different lines, you'd have to either wrap them in a paragraph or insert a break. Even though the code has them on different lines, hitting return and adding spaces, none of that matters to a browser. That's just formatting your code so that it looks nice to you. What matters to a browser are the codes that you have, and image tags in the browser are going to be next to each other assuming they're small enough to fit on the same line.

Alternate Text for Accessibility

For each image that you do, you want to add alternate text. 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. That is just another attribute that we're going to add to our image tag. Attributes don't matter as far as their order, so "alt" could go first and then "source," or "source" could go first and then "alt." It doesn't matter as long as there is a space between your attributes.

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? That would be a good piece of alternate text. In this case, this would be "Bill Gates holding the Kid A album" and then this would be "a radar map of a hurricane."

When would you not put alternate text in there? You don't want to just leave the alt attribute out ever, because then it would probably read the file name to somebody. There are some cases where you would actually leave an alt attribute but leave it blank and not fill in a value. That would be purely if it's a decorative piece of content, like a special visual divider line between sections. If there's no real meaning behind it, it's just visual decoration, like a little divider line or a dot or some kind of 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 skip over it by leaving the alt attribute blank. You're basically saying don't read anything, this is just purely visual.

Width and Height Attributes

In addition to this, is there any other attributes that we might want to add? Potentially, because it depends. When this page is loading, during the page load, what if that image hasn't been downloaded yet? If you've ever been browsing the web, started loading a page especially on mobile phones, scrolled down and tried to read something, and then all of a sudden that scrolls off screen, that's because other images were loading up top. 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.

Is there a way that we could prevent that? 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 that even before it downloads the image, it knows how big to make that image and allocate the correct space ahead of time.

How big is that image? One way to find out is you can open it up in your image editor like Photoshop. But a really quick way to find out how big an image is without having to have an image editor installed on your computer is to just drag it into a browser window. In the tab bar of the browser window, it'll say the file name but it also in parentheses says the size. This is 190 by 145, and that's how big both of our images are. So 190 wide by 145 pixels tall.

Browser Differences in Image Handling

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 is not using that information, but Safari is using that information. It's interesting how the different browsers do handle things slightly differently. Also interesting is Safari, if it can't show the alternate text in the first line and it's too long, it just doesn't show it at all. I'm surprised that they don't wrap that onto multiple lines.

The width and height reserves the right amount of space, so it knows how big to make that even before that image loads. Once that image loads into that space, nothing needs to change. You don't necessarily have to specify width and height, it'll still work without it. But one thing you don't want to do is put in the wrong size. You don't want to make your images bigger, for example. If I change this to 590 wide, that's going to stretch and distort that image.

Image Optimization and File Size

A common mistake that I see is when I go to a page and sometimes it's a photo gallery with a ton of photos on it, and it takes forever to load. When I click on one of them to see the bigger version, the bigger one loads instantly. You think to yourself, 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 what they were doing is actually linking to a huge photograph, probably straight from the digital camera. Those digital camera photographs can be megabytes for each and every single photo.

Let's say the original photo is like three, four, five thousand pixels wide, but they're only displaying it within the space of maybe 190 pixels. You don't want to take a huge three, four, five thousand 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. That large version shouldn't be directly off the digital camera. Most of the time those images are three, four thousand pixels in size just in the width. The average screen is 1280 to 1440 somewhere in that range. If they're on the big side, it could be HD resolution at like 1920. If you're giving it a three, four, five thousand pixel wide image, that's way more pixels than you actually need for those size screens. 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. 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.

The Break Tag for Line Breaks

While we're talking about tags that only have a start tag and don't have an ending tag, let me introduce just a couple other ones. 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 one. 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.

For that we have the break tag. So "br" as in break just says break to the next line. It's not something that really exists in the code to wrap around something to say "this is a break" because that just doesn't work. You just say create a break. This can work even if this is on one line. In your code you can say put this text, then insert a break, and then go to the next line. There's no ending tag, just a starting tag for the break. It goes to the next line without adding extra space, because headings have space between them and paragraphs have space between them.

Anytime you want to go to next line, like after "Redmond, Washington," if you wanted to put a break there, we could put in a break there and it just goes to the next line without starting a whole new paragraph. For images, if you want them on different lines, one of the ways is to put in a break and they're going to be on the next line without adding a ton of extra space like the amount of space that would be between our paragraphs. You could also wrap them in paragraphs if you wanted additional space above and below.

The Horizontal Rule Tag

One more tag that you can insert that is not a markup sort of tag in the sense that you wrap it around something, but it's a new thing that you're going to insert that doesn't exist in the page right now, is the horizontal rule. So "hr" as in horizontal rule, and that creates a horizontal rule, a line going through there. If I copy and paste that up top, we can put rules above and below.

There are other ways you can do this as well. For example, using 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. But just to introduce one basic idea, 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, this has got some lovely retro three-dimensionality to it with this kind of inset shading. The size is like the thickness of the horizontal rule. If you make it one, then it would be like a thin, just clean little line. But if you wanted to change color or switch to other styles, you would need to be using CSS to do all that.

So those are just a few of the insert tags where you don't have an ending tag, you just have a start tag, and just the basics of how images work.