Hi, today we're gonna be
talking about images. There are a lot of tags in HTML, and
most of them are pretty self-explanatory. But the image tag is one where
we really want to explore it, to make sure that you're using
it to the best possible purpose. So at this point,
you've heard of a lot of different tags. But images is one where you
really need to understand what the different attributes are. There are many different file
types that are supported by HTML. The most common are: JPEG, GIF and PNG,
and you're gonna see those quite a bit. There's also SVG and BMP. There are additional options. The most important thing is that
no matter which file type you use, you need to include
the different file extensions. That's the .jpg, the .gif, the .png. The additional thing to understand is
that when somebody looks at your page, every single image that you have on
your page must be downloaded, so size can really be a factor. If you expect that most of the people
viewing your page to be looking at it from a mobile phone, you might wanna think about using smaller
file sizes, because every single image requires an HTTP request in order
to be loaded onto the browser. So when we think about image sizes,
most people think of, just kind of,
the visual how big it is on the screen. But in computer science,
we talk much more about pixel sizes. By default, the browser's gonna open up your image
in the same exact size it's been saved. And it's really,
really rare that this size was optimal. You've probably all gone to a site
where you've gotten to it and the picture was really small and
you're not able to make it bigger. Or perhaps, what I find even more annoying, is when
the picture takes up the entire screen and you're forced to scroll around
trying to see the whole thing. So I'm gonna show you two quick
solutions for changing the image size. The first is to change the actual file,
and the second is use the width and height attributes for the image tag. Now, if you're going to use and
editor to change your file, what you need to understand is that
editors change those images permanently. This only works on what
I call local files. You can only change the pictures
that you have down on your computer. If you're trying to use an image that
you found someplace else on the web and you're linking to it,
you can't change the size permanently. So if you're using a Mac, there's built-in software called Preview
that you can use to change the size. And if you're using Windows, there's
also a built-in program called Paint. Either one of those gives you
the option to resize your pictures. However, just as a side note,
neither one of these are the best choice if you really want to get
into different image graphics. What most of us tend to
do is use attributes. Now, one of the things I talk about and everyone talks about is the importance
of keeping style and content separate. And I really try to encourage
people to not put any type of style attributes into their code. However, the image tag
tends to be an exception, because it includes both a width and
height attribute. So let's go ahead and walk through, and I'll show you a picture of
the site when we're done. The first option would to be
just use the default image size. I have my image tag, and
I have my two required attributes. Source, where you can find the picture,
and the alternate text. The next option would be to
use the width in pixels, so in this case I've added the attribute
called width and I've hardcoded it. That's what you call it when you give it
a size that you want it to always be. And I've hardcoded it to 500 pixels. You might notice that I've only set
the width and I didn't set the height. See sobib. The browser will automatically figure out
how much it should adjust the height so it stays proportional to the width. The next option is to use width and
height. You do this if you wanna make sure
that your picture fits inside an exactly sized box. This is really nice for
sizing, but it doesn't always look the way you expect it to look,
and we'll see that in just a second. The last option, which may be your
best option, is to use percentages. In this case, if you notice,
I have width = 50%. What this means is, take how big
the picture was going to be, and reduce it by 50%. Now, as we get further on into programming
and CSS, you'll understand that it's 50% of what it should be, doesn't necessarily
mean the original picture size. It depends on if you're
inside a container. So here I've had each of the options,
the default, the width, the width and the height, and the percentage. So let's go ahead and
take a look at what that looks like. So what you can see here are those
four different options I had for displaying my image. Up in the top,
I have my default image size. This just happened to be how big
the picture was when I took it. One size down, and you can see this is where I've
hardcoded the width of the image. I set the width to 500 pixels. My house still looks perfectly nice,
and everything is proportional. The third option is the skewed image. This is where I hardcoded both
the height and the width, and I didn't really put much thought into how
they were going to act proportionally. So by doing this you can see
it's kind of squashed, and not the best looking picture. This last one is one I set proportionally,
and you can see that it's about half
the size of the browser window. What I want you to look at now is what
happens when I resize the window. So as I go here, you can see that
the first three pictures stay exactly the same size, but the bottom
one will actually grow or shrink. And this is the same if I make
it smaller and reload the page. So, thinking about different things along
this line is how you want your page to look when people might be looking at
a large screen, or on a mobile screen. It's something you wanna think about. The last thing I wanna point out to you,
that I'm gonna talk about in just a second, is this little tiny
picture that unfortunately, it's very hard to see and there's not
really a good way for me to blow it up. But I want to talk to you about
adding images into the title bar. So if you wanna put a favicon
into the title of your webpage, it's slightly different
then using a regular image. Instead, this code must go into the head
section of your code, not the body. What you do is you will actually go in and you'll include a link saying
it's an icon type of link. We're using a PNG image. And then you put the link
to the image itself. Just as a side note,
you can't use JPEGs or GIFs for logos. It either needs to be a special
icon image or a .png. Finally, let's go back to
talking about alternative text, the attribute that you want
to add to all of your images. What is the purpose of this, and
why is it something we need? Well, what it does is it provides
a textual alternative to non-text content. So any time you have an image,
you wanna make sure that people who can't see the image can
still understand the content behind it. So it might be read by screen readers. Sometimes it's displayed in place
of images, so if your file breaks, you can still see a little note saying
what they're supposed to be seeing. Finally, it also provides semantic
meaning for search engines. So if you put really good
alt text into your page, it's gonna help search engines realize
what the content of your page is. So how do we create good alt text? There are really four things you
wanna look for right off the bat. You want to be extremely accurate. You wanna be succinct. We don't wanna be redundant. And we don't wanna include titles
like picture of or graphic of. So the first one, be accurate. It's pretty self-explanatory. Only put things that specifically define
the image that you're looking at. By be succinct,
that means don't go on and on. Really, it's supposed to be a quick kind
of idea of what the picture's about. When we talk about don't be redundant,
what we're saying is, don't include alt text that's
already in the content of the page. If you have the image, and
in a paragraph beneath it, you describe it in detail, don't put
that same content into the alt text. And finally,
the one of don't include picture of, graphic of, that really just goes
back to just being succinct. It is occasionally okay to
leave your alt text empty. So if you have images that are just
decorative, logos, things along that line, you can go ahead and just put alt
equals and then the double quotes. But it's very important that you don't
skip the alt attribute all together. The problem with going that route, is you
don't really let people know whether or not you were thinking
about the accessibility. They don't know if the alt text is
missing because it's non-informative or because you just forgot to put it in. Okay, so let's go and review some
of the things we know about images. One, file extensions
are incredibly important. You need to make sure they
match the file format. The file name for your image is
something that you're gonna want to keep very short and descriptive so
you can avoid using typos. And finally the file paths, or
where that whole long thing that you put in the source where
you have images/pictures/extension. You wanna make sure you are spelling
those correctly as well. If you can do these three things,
it'll make it easier for you to successfully use images. And for right now, let's go ahead and
just style the height and width right in the HTML code itself. Even though I often talk about separating
content from style, it's very common practice to go ahead and incorporate
those two when you're doing images.