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.