Displaying Images

Perhaps nothing enhances a website better than strategically placed images. In this lecture we will learn how to include images in your HTML documents. 

Okay, so we're looking at images.html, which is located in the examples Lecture10 folder. And you may recognize this file from a few lectures ago where this is a famous quote from Theodore Roosevelt. And, by the way, I apologize, I made a typo before. Theodore Roosevelt is spelled with an E. So for you eagle eyes out there who noticed that I misspelled Theodore I apologize. It was just a typo. Anyway our task here is to display an image right before the quote itself. And we actually have a couple of images here. And since I wanted to start with one, let me comment this one out, and at the same time show you what an HTML comment looks like. And it's pretty simple, it starts with a less than bracket, exclamation point, dash, dash, and then it gets closed with a dash, dash, right angle bracket. And what will happen when you load this page into the browser Is that the browser will completely ignore this comment and will not render it. So let's take a look at the image tag that we wanted to discuss. The image is displayed in HTML using this img tag which is just short for image. And the src attribute of the img tag is a URL that points to some image file. Now this URL is no different than the href that you've seen with the regular link A tag. It could be a relative URL, or it can be an absolute URL, even one that contains an external link. Next, we specifiy the width and the height of the image. While not absolutely required, it's a really good idea to always specify the width and the height. And I will demonstrate to you in a few minutes why that is. And also the alt tag which is used by screen readers that help people with visual impairment. Let's save the document and take a look at it in the browser. 

As you could see, this is the image that we included in our HTML. The interesting part here is that it appears as if it's another character within our text, which should right away tell you that an img tag is an inline element. If it weren't, the image would be on its own line, pushing everything behind it onto a new line. Next let's take a look at the other img tag and uncomment it so we could use it within our page. As you could see this is an external link pointing to some image on the web. Let's save the file and preview it in the browser again. 

Let's reload it. As you could see, we get this image of, I think ants, crawling on a blade of grass. It's very often the case that you use images as sort of these anchors within your visual layout of your page. And if this images take time to load, the page might appear jumpy. So this is actually the primary reason why you would want to use the width and the height of the image. You want to tell the browser to reserve this space and to visually partition your page such that it knows that there should be something going on in there even if it takes time to load it. So let's simulate what would happen to our layout if we removed the width and the height from this image. Let's go ahead and save it, go to our webpage. And instead of just reloading it, since our Internet or at least my Internet is pretty fast here, I'm going to simulate Internet being very slow. And we'll see how the fact that this paragraph and this paragraph is visually separated by this image is not necessarily going to happen right away. And we'll see some jumping. But the way we're going to accomplish that is by bringing up the Chrome developer tools. And I'm on the Mac so I'm going to press Option+Cmd+I. And if you're in Windows, I believe it's Ctrl+Option or Ctrl+Alt+I. And I'm going to go to the Network tab. And if you notice here, there is a throttling setting here. And it says No throttling. What I'm going to change that to, the lowest possible setting. And now I'm going to go ahead and reload the page. And watch what happens in terms of this space between the Theodore Roosevelt and the actual quote. So let's go ahead and reload the page. 

And noticed how it jumped. The first there was Theodore Roosevelt was right next to the quote, and then once the image loaded it jumped in. And the reason that happened was because the browser did not up front know how large the image was going to be. Even worse if you're relying on the image to give some sort of a visual layout to your page and for some reason the image did not load, for example the URL could be broken. So let me go ahead and break it just by removing a couple of letters from the URL. And if URL is broken, this is what you're going to get if you don't specify the width and the height of the image. Let's go back to our page and let's click reload, and there you go. If we relied on a specific amount of space between the quote and the footer of this page, well we can no longer see that space since the image did not load. However, if we go back and undo this and still break the URL, yet specifying the width and the height of the image, let's go back and reload the page. 

You'll see that even though the image is not loading, the visual spacing and the visual layout remains correct as we intended it to be. 

So to summarize, images can truly enhance your website, especially if you use them correctly. And remember to always specify width and height of the image tag whenever possible, because without it, it may break your layouts. 

Video Images