Embedding Images and Managing Line Breaks

Let's see how to add images into our webpages. What we're talking about here is that the image tag is going to be one of those tags that does not have an ending tag. So while we're on this topic, we did see that the meta tag does not have an ending tag.

And the idea is that most tags that wrap something are going to have a start and an end, and they wrap something to say this is a heading, this is a paragraph, this is a title, or whatever it is. So the thing that you're selecting is basically labeled by the tag that surrounds it. With something like a meta tag, where we're just kind of inserting some idea of some information, we're not wrapping it around something to say this is something.

We're just saying, hey, remember that this webpage uses Unicode for its encoding. We're not saying this thing is Unicode, we're not wrapping it around something. So the same idea exists when we're inserting something that doesn't exist, like an image.

Or a break tag. As an example here, actually in the Microsoft page here, let's say when we have—actually no, we'll do this in the index page. Latest news from The Onion.

Right now, even in the code, it is put on different lines. But let's say I put this on one line right here. Okay, I'm going to save this and preview this in my browser.

Option+B on Mac or ALT+B on Windows. This is all on one long line, regardless of how I do it in my code. Even if I do that, it does not change anything because hitting return in your code does not actually hit return in the browser.

There was no code telling it to go to the next line. Now, if I created these as two different headings or two different paragraphs, then there would be an extra bit of line space in between those things. But what if I want to just go to the next line? I don't want it to actually be another heading.

I just want it to go to the next line without adding the entire extra space. I don't want an extra line. I just want to go to the next line.

So I want to break to the next line, but hitting return doesn't work. So I need to give it some code to indicate that I want it to break right here. So I'm going to give it a tag, and it's the break tag.

It says break right here. I'm not marking it up in the sense of saying this is a break. There isn't a break.

There doesn't need to be a break. I'm saying to create something that doesn't exist, to add a break in this position. That's why this tag has no ending tag.

A break does not exist, but the tag creates one. Save that. Reload, and a break is created.

It breaks to the next line, and we get things on two different lines without all the extra space that creating another heading or paragraph would. We can kind of essentially just hit return without creating a whole new heading or paragraph. If I want to do that visually with whitespace, I can do that.

But the point is that browsers don't care about whitespace. They don't care about indentation. This could all be one really long line of code, and the browser could care less.

They don't care about that at all. For us as human beings, we like to indent things. We like to format the code so that we can see, okay, well, this is the stuff inside of this.

Or it might be, if it's just a single line, you might think that that takes up less space. So I don't have to scroll as much. It's up to you whether you want to put things on different lines like this or if you want to keep them on a single line.

But when we want to create something that doesn't exist, like we're going to do with an image, we need to insert a tag to create that thing. So I want to insert an image here, and I can't wrap an image tag around something saying this is an image. I don't have an image.

This is a text file. I can create an image in the browser, but I can't say this is an image. So this is going to be an image tag, and there is no ending tag—like the break tag, like the meta tag.

I'm creating something that does not exist. It will be created in the browser. Now the image tag itself, img, short for image, will always have a source, much like how an a tag will always have an href when we're linking to another page, and we're linking to other pages using relative paths within our website.

We're going to do the same thing with images. So the src, or source, is a relative path to the image that's in your website. These images can be JPEGs, PNGs, GIFs, or SVGs.

There are various different formats. For right now, I want to bring in a JPEG here, which is going to be a photograph. And so I can bring it in by its name.

We put all of the images into the images folder. And not because we have to—just to organize them instead of having them all outside of this, just kind of unorganized. If I want to get into the images folder, I have to think about where my file currently is. Well, I'm in index.

If I want to get to an image in the images folder, I have to say go into images and then find the file. I can't just say the name of the file because the name of the file is not in the same folder. Everything is based on the relative path of where you currently are.

And how do you find it from where you are? Well, I need to go into images, tab, accept the code hint. And then here I have a list of all the images in that images folder. I want one of the thumbnails.

So as I hit slash, let's say I type in news. So I can start typing in newsthumb and then I can choose between any of these four. We want the Bill Gates one here. So I'm going to use my up and down arrow keys to find it and then hit TAB.

And so now we'll put that particular image there. I'm going to save that change. Option+B for my browser or ALT+B on Windows.

And there we have that image there. Now the image is going to come in at the size of the image. This is a very small image.

So it comes in very small. If this were a very large image, it would come in very large. You want to size your images according to the size you want them to be in your webpage.

Do not bring in giant images and then scale them way down, because it will still download that very large image and still take all that time to download it—even if you scale it down to fit into a very small area. So there are a couple of different attributes that you can set here for things like size.

But before I get to size, ALT is a very important thing. ALT is alternate text. What if you were blind or vision impaired and you could not see the web or could not see it well enough and you wanted to know what that image was about? You could have it read some text to you.

And that is the ALT attribute. This is always important to have. If you don't give it an ALT attribute at all, then it will read the file name.

That's not going to be a great name. NewsThumbBillGates.jpg. While it would give somebody some idea of it, we don't really like hearing file names. So better to put in ALT.

Now, if you put in ALT and it's empty, it would literally skip over that image, not saying anything at all. And if this image were complete visual fluff—like it's just extra, like a nice little visual flourish or something, like a little decorative element that doesn't really mean anything—that would be fine to add the ALT attribute with nothing inside of it to say, don't read anything. Just get past it.

Nothing important here. You don't have to describe every single image. Especially think about if you were scrolling through a page and there was just this little icon that kind of indicated the end of an article, but it wasn't really important. It was just some little extra visual fluff.

You don't need to say something like “ending bullet points” or similar. You wouldn't necessarily have to say that. So you could leave an empty ALT attribute so that it wouldn't read the file name.

It would read nothing at all. But in this case, I want to describe the image because it is worthy of saying that it's Bill Gates holding the Kid A album. You could even say in front of a Windows XP backdrop.

So something that describes what you would want to hear if you could not see that? So I could say Bill Gates holding the Kid A album. Whether you want to describe the background is based on whether you think that's important. Again, if you couldn't see this, would you want to know that? Is that valid, or is this really the most important thing? You don't want to make this too long because somebody's going to have to listen to this, of course.

So you don't want to add unimportant details. You don't necessarily have to describe everything in such excruciating detail that someone might say, okay, come on, I get the point. I didn't need that much detail.

But find the right balance of just descriptive enough. Again, I use the filter of what I would want to hear if I couldn't see that. What's the most important thing? You will not see this in the webpage, but it's still important to add because people who have screen readers reading the webpage to them will hear that instead of the file name. So it is important for them.

It's possible that you might see it in certain circumstances. For example, if I break this link by putting an extra letter there, then in that case, either while the image is loading or if the image is broken, you may see that ALT text. So it depends on the browser as to whether they show that while the image is loading or not.

So, for the most part, once the image is loaded, it will replace the ALT text with the image. Other attributes that you can put onto the image tag include the source and the ALT attribute.

And again, with these attributes, you can order them however you want. As long as you put the tag first and then put spaces between your attributes, the order of those attributes does not matter. So I can put a width in here.

And if I put in a width, let's say 500, which would be 500 pixels in this case, that will override the default image width. And this would be scaling it up. Now, if you are making this very large, let's say I make it,000 pixels, this is going to look poor in quality because you're enlarging a very small image. So I would not recommend enlarging images. It's going to make your images look worse.

You could, however, make it smaller. So let's say I reduce this to 50 pixels. That makes it even smaller.

But we also have an opposite problem. While it looks fine, the file size is too large. It's bigger than it needs to be. When we make this image, if we make it the size it's intended to be within our webpage, and we don't put any width at all, it's going to come in at that native size.

You can actually see what the native size is by looking in the images folder, selecting your image, and then looking down here at the bottom right. It says 190 × 145. So it's 190 pixels wide by 145 pixels tall. That is the pixel dimensions.

Now, as you're getting used to pixel dimensions, think of it relative to your screen until you're used to these sizes. So let's say the entire screen here—a lot of people on laptops, kind of normal-sized laptops—are somewhere around, let's say, 1400 pixels wide. I have a little bit of a bigger laptop screen.

So I'm more like around, I think it's maybe 1900 pixels if I remember right. So I'm a bit wider. But a lot of laptops will be somewhere around 1366 (a common Windows laptop size), or 1400 to 1500 on some Macs as well.

So let's just say 1400 pixels. If you imagine the whole width of your screen is 1400 pixels, half of 1400 is 700 pixels. If I made something 700 pixels, it's about half the screen.

Just think of relative size. So width is 700. That would be a little bit smaller than half my screen because I have a slightly bigger screen.

But that's about half of the webpage. So think in relation to the entire width. A phone, however, is a lot smaller. A lot of phones are around 350–360 pixels.

If you want it to be half of a phone, let's just say it's 350 pixels, half of that would be 175. If you're thinking relationally, you can kind of get a size idea.

As opposed to here—if my whole screen is 1400 pixels—if I make something just 100 pixels, you could fit approximately 14 of them across. So that's pretty small relative to my whole screen. As you get used to working with pixels, you'll get more comfortable with the sizes.

Now, going back to my image here, this is 190. I do not have to put in a width. But if I did put in a width that is the same as my actual image, it would look the same.

It would look no different. It's not making it bigger. It's not making it smaller.

Might you want to add that? Technically, no, you don't have to add it. You can just leave it off. It will be the same size.

But might you want to add it? Depends on what you're going to do with that image. This image is very small. But imagine it's a photo that's going to be the full width of the page or a big area that, as we resize this, needs to reflow to be good across different screen sizes.

So maybe it's filling up the page across various screen sizes. That image would need to scale up and down with the page. In that case, I wouldn't bother adding a width and height to this.

Now, some things like maybe a company logo or social media graphics will never change in size. They're always going to be a fixed size. In that case, you could, but you don't have to include a width and height.

The only advantage to doing it in this case—the height is 145—would be that the page would load ever so slightly faster. Because as the page is downloading, it doesn't know the image size yet, unless you've given it in the code. It takes a little while to download the image. All of this code would load first.

It would know how big to make the area. It would reserve that amount of space. And then, later, it would download the image.

So as it's drawing the page, it could draw just a teeny little bit faster. And for things that don't change in size, you could certainly include the width and height. Now, again, if you're going to have something that's flexible, or if you just need to create a webpage very quickly, you don't have to include that in there.

And it will come in at the original size. But during the loading of the page, it might come in where there's just a tiny area reserved. Think about it: if it doesn't know how big the image is, it won't reserve space for it.

Then later, it'll open up that space. Have you ever been browsing, let's say, on your phone? And you scroll down the page while it's still loading. And then you're looking at something.

And all of a sudden, other things are loading up above. So the stuff you're looking at shifts down. And you're like, hey, come back.

You were on screen just a moment ago. But now you've scrolled off screen. And you have to keep scrolling down.

And you might have to keep scrolling down because things keep loading up above and shifting things down the page. Like, look at where this is here.

But the moment the image above loads, see—that pushes everything down. So the loading experience sometimes can be a little bit nicer. For those fixed image sizes, it might be worth including the width and height.

But in a lot of cases, because they're going to be flexible images, we don't bother including the widths and heights in many of our images these days. All right. So that is how you insert images into your web pages.

So go ahead and do exercise 1d in the book.