1
00:00:08,960 --> 00:00:12,210
Hi, today we're gonna be
talking about images.

2
00:00:12,210 --> 00:00:16,210
There are a lot of tags in HTML, and
most of them are pretty self-explanatory.

3
00:00:16,210 --> 00:00:19,500
But the image tag is one where
we really want to explore it,

4
00:00:19,500 --> 00:00:22,610
to make sure that you're using
it to the best possible purpose.

5
00:00:22,610 --> 00:00:25,140
So at this point,
you've heard of a lot of different tags.

6
00:00:25,140 --> 00:00:28,080
But images is one where you
really need to understand

7
00:00:28,080 --> 00:00:29,410
what the different attributes are.

8
00:00:29,410 --> 00:00:33,960
There are many different file
types that are supported by HTML.

9
00:00:33,960 --> 00:00:39,410
The most common are: JPEG, GIF and PNG,
and you're gonna see those quite a bit.

10
00:00:39,410 --> 00:00:41,780
There's also SVG and BMP.

11
00:00:41,780 --> 00:00:43,590
There are additional options.

12
00:00:43,590 --> 00:00:46,860
The most important thing is that
no matter which file type you use,

13
00:00:46,860 --> 00:00:49,450
you need to include
the different file extensions.

14
00:00:49,450 --> 00:00:53,840
That's the .jpg, the .gif, the .png.

15
00:00:53,840 --> 00:00:58,096
The additional thing to understand is
that when somebody looks at your page,

16
00:00:58,096 --> 00:01:01,828
every single image that you have on
your page must be downloaded, so

17
00:01:01,828 --> 00:01:03,890
size can really be a factor.

18
00:01:03,890 --> 00:01:07,160
If you expect that most of the people
viewing your page to be looking at it

19
00:01:07,160 --> 00:01:08,490
from a mobile phone,

20
00:01:08,490 --> 00:01:13,450
you might wanna think about using smaller
file sizes, because every single image

21
00:01:13,450 --> 00:01:17,399
requires an HTTP request in order
to be loaded onto the browser.

22
00:01:18,580 --> 00:01:21,650
So when we think about image sizes,
most people think of,

23
00:01:21,650 --> 00:01:24,970
just kind of,
the visual how big it is on the screen.

24
00:01:24,970 --> 00:01:28,100
But in computer science,
we talk much more about pixel sizes.

25
00:01:29,120 --> 00:01:30,120
By default,

26
00:01:30,120 --> 00:01:35,050
the browser's gonna open up your image
in the same exact size it's been saved.

27
00:01:35,050 --> 00:01:38,732
And it's really,
really rare that this size was optimal.

28
00:01:38,732 --> 00:01:41,320
You've probably all gone to a site
where you've gotten to it and

29
00:01:41,320 --> 00:01:43,670
the picture was really small and
you're not able to make it bigger.

30
00:01:43,670 --> 00:01:44,650
Or perhaps,

31
00:01:44,650 --> 00:01:48,235
what I find even more annoying, is when
the picture takes up the entire screen and

32
00:01:48,235 --> 00:01:51,660
you're forced to scroll around
trying to see the whole thing.

33
00:01:51,660 --> 00:01:55,790
So I'm gonna show you two quick
solutions for changing the image size.

34
00:01:55,790 --> 00:02:00,400
The first is to change the actual file,
and the second is use the width and

35
00:02:00,400 --> 00:02:02,120
height attributes for the image tag.

36
00:02:04,890 --> 00:02:07,490
Now, if you're going to use and
editor to change your file,

37
00:02:07,490 --> 00:02:11,860
what you need to understand is that
editors change those images permanently.

38
00:02:11,860 --> 00:02:14,060
This only works on what
I call local files.

39
00:02:14,060 --> 00:02:18,560
You can only change the pictures
that you have down on your computer.

40
00:02:18,560 --> 00:02:21,500
If you're trying to use an image that
you found someplace else on the web and

41
00:02:21,500 --> 00:02:25,430
you're linking to it,
you can't change the size permanently.

42
00:02:25,430 --> 00:02:26,760
So if you're using a Mac,

43
00:02:26,760 --> 00:02:30,410
there's built-in software called Preview
that you can use to change the size.

44
00:02:30,410 --> 00:02:33,800
And if you're using Windows, there's
also a built-in program called Paint.

45
00:02:33,800 --> 00:02:37,350
Either one of those gives you
the option to resize your pictures.

46
00:02:37,350 --> 00:02:40,590
However, just as a side note,
neither one of these are the best

47
00:02:40,590 --> 00:02:43,370
choice if you really want to get
into different image graphics.

48
00:02:45,030 --> 00:02:48,220
What most of us tend to
do is use attributes.

49
00:02:48,220 --> 00:02:50,180
Now, one of the things I talk about and

50
00:02:50,180 --> 00:02:54,500
everyone talks about is the importance
of keeping style and content separate.

51
00:02:54,500 --> 00:02:58,200
And I really try to encourage
people to not put any type of style

52
00:02:58,200 --> 00:02:59,750
attributes into their code.

53
00:02:59,750 --> 00:03:02,710
However, the image tag
tends to be an exception,

54
00:03:02,710 --> 00:03:05,450
because it includes both a width and
height attribute.

55
00:03:06,790 --> 00:03:08,080
So let's go ahead and walk through, and

56
00:03:08,080 --> 00:03:10,310
I'll show you a picture of
the site when we're done.

57
00:03:10,310 --> 00:03:14,180
The first option would to be
just use the default image size.

58
00:03:14,180 --> 00:03:17,730
I have my image tag, and
I have my two required attributes.

59
00:03:17,730 --> 00:03:21,070
Source, where you can find the picture,
and the alternate text.

60
00:03:23,740 --> 00:03:27,260
The next option would be to
use the width in pixels, so

61
00:03:27,260 --> 00:03:31,070
in this case I've added the attribute
called width and I've hardcoded it.

62
00:03:31,070 --> 00:03:33,980
That's what you call it when you give it
a size that you want it to always be.

63
00:03:33,980 --> 00:03:36,750
And I've hardcoded it to 500 pixels.

64
00:03:36,750 --> 00:03:40,230
You might notice that I've only set
the width and I didn't set the height.

65
00:03:40,230 --> 00:03:41,100
Гэвч зүгээр ээ.

66
00:03:41,100 --> 00:03:45,260
The browser will automatically figure out
how much it should adjust the height so

67
00:03:45,260 --> 00:03:46,690
it stays proportional to the width.

68
00:03:48,610 --> 00:03:51,340
The next option is to use width and
height.

69
00:03:51,340 --> 00:03:54,170
You do this if you wanna make sure
that your picture fits inside

70
00:03:54,170 --> 00:03:55,600
an exactly sized box.

71
00:03:56,790 --> 00:03:59,270
This is really nice for
sizing, but it doesn't

72
00:03:59,270 --> 00:04:02,970
always look the way you expect it to look,
and we'll see that in just a second.

73
00:04:04,560 --> 00:04:08,920
The last option, which may be your
best option, is to use percentages.

74
00:04:08,920 --> 00:04:11,870
In this case, if you notice,
I have width = 50%.

75
00:04:11,870 --> 00:04:16,940
What this means is, take how big
the picture was going to be, and

76
00:04:16,940 --> 00:04:18,830
reduce it by 50%.

77
00:04:18,830 --> 00:04:24,700
Now, as we get further on into programming
and CSS, you'll understand that it's 50%

78
00:04:24,700 --> 00:04:27,910
of what it should be, doesn't necessarily
mean the original picture size.

79
00:04:27,910 --> 00:04:30,240
It depends on if you're
inside a container.

80
00:04:30,240 --> 00:04:34,840
So here I've had each of the options,
the default, the width, the width and

81
00:04:34,840 --> 00:04:36,830
the height, and the percentage.

82
00:04:36,830 --> 00:04:39,410
So let's go ahead and
take a look at what that looks like.

83
00:04:39,410 --> 00:04:42,790
So what you can see here are those
four different options I had for

84
00:04:42,790 --> 00:04:44,390
displaying my image.

85
00:04:44,390 --> 00:04:47,210
Up in the top,
I have my default image size.

86
00:04:47,210 --> 00:04:51,290
This just happened to be how big
the picture was when I took it.

87
00:04:51,290 --> 00:04:52,650
One size down, and

88
00:04:52,650 --> 00:04:55,740
you can see this is where I've
hardcoded the width of the image.

89
00:04:55,740 --> 00:04:58,540
I set the width to 500 pixels.

90
00:04:58,540 --> 00:05:02,470
My house still looks perfectly nice,
and everything is proportional.

91
00:05:02,470 --> 00:05:04,760
The third option is the skewed image.

92
00:05:04,760 --> 00:05:07,920
This is where I hardcoded both
the height and the width, and

93
00:05:07,920 --> 00:05:11,510
I didn't really put much thought into how
they were going to act proportionally.

94
00:05:11,510 --> 00:05:14,120
So by doing this you can see
it's kind of squashed, and

95
00:05:14,120 --> 00:05:16,130
not the best looking picture.

96
00:05:16,130 --> 00:05:18,450
This last one is one I set proportionally,
and

97
00:05:18,450 --> 00:05:22,000
you can see that it's about half
the size of the browser window.

98
00:05:22,000 --> 00:05:25,855
What I want you to look at now is what
happens when I resize the window.

99
00:05:25,855 --> 00:05:29,680
So as I go here, you can see that
the first three pictures stay

100
00:05:29,680 --> 00:05:34,760
exactly the same size, but the bottom
one will actually grow or shrink.

101
00:05:34,760 --> 00:05:39,710
And this is the same if I make
it smaller and reload the page.

102
00:05:40,780 --> 00:05:44,900
So, thinking about different things along
this line is how you want your page to

103
00:05:44,900 --> 00:05:48,860
look when people might be looking at
a large screen, or on a mobile screen.

104
00:05:48,860 --> 00:05:50,550
It's something you wanna think about.

105
00:05:50,550 --> 00:05:53,080
The last thing I wanna point out to you,
that I'm gonna talk about in just

106
00:05:53,080 --> 00:05:56,183
a second, is this little tiny
picture that unfortunately,

107
00:05:56,183 --> 00:06:00,030
it's very hard to see and there's not
really a good way for me to blow it up.

108
00:06:00,030 --> 00:06:03,260
But I want to talk to you about
adding images into the title bar.

109
00:06:03,260 --> 00:06:06,680
So if you wanna put a favicon
into the title of your webpage,

110
00:06:06,680 --> 00:06:09,840
it's slightly different
then using a regular image.

111
00:06:09,840 --> 00:06:15,130
Instead, this code must go into the head
section of your code, not the body.

112
00:06:15,130 --> 00:06:17,030
What you do is you will actually go in and

113
00:06:17,030 --> 00:06:20,380
you'll include a link saying
it's an icon type of link.

114
00:06:20,380 --> 00:06:22,270
We're using a PNG image.

115
00:06:22,270 --> 00:06:24,800
And then you put the link
to the image itself.

116
00:06:24,800 --> 00:06:29,450
Just as a side note,
you can't use JPEGs or GIFs for logos.

117
00:06:29,450 --> 00:06:32,584
It either needs to be a special
icon image or a .png.

118
00:06:34,010 --> 00:06:36,850
Finally, let's go back to
talking about alternative text,

119
00:06:36,850 --> 00:06:39,950
the attribute that you want
to add to all of your images.

120
00:06:39,950 --> 00:06:44,090
What is the purpose of this, and
why is it something we need?

121
00:06:44,090 --> 00:06:48,540
Well, what it does is it provides
a textual alternative to non-text content.

122
00:06:48,540 --> 00:06:51,470
So any time you have an image,
you wanna make sure

123
00:06:51,470 --> 00:06:55,760
that people who can't see the image can
still understand the content behind it.

124
00:06:55,760 --> 00:06:57,740
So it might be read by screen readers.

125
00:06:57,740 --> 00:07:01,810
Sometimes it's displayed in place
of images, so if your file breaks,

126
00:07:01,810 --> 00:07:05,510
you can still see a little note saying
what they're supposed to be seeing.

127
00:07:05,510 --> 00:07:08,990
Finally, it also provides semantic
meaning for search engines.

128
00:07:08,990 --> 00:07:11,470
So if you put really good
alt text into your page,

129
00:07:11,470 --> 00:07:14,580
it's gonna help search engines realize
what the content of your page is.

130
00:07:15,690 --> 00:07:18,150
So how do we create good alt text?

131
00:07:18,150 --> 00:07:21,270
There are really four things you
wanna look for right off the bat.

132
00:07:21,270 --> 00:07:23,660
You want to be extremely accurate.

133
00:07:23,660 --> 00:07:25,190
You wanna be succinct.

134
00:07:25,190 --> 00:07:26,870
We don't wanna be redundant.

135
00:07:26,870 --> 00:07:30,840
And we don't wanna include titles
like picture of or graphic of.

136
00:07:30,840 --> 00:07:32,340
So the first one, be accurate.

137
00:07:32,340 --> 00:07:34,110
It's pretty self-explanatory.

138
00:07:34,110 --> 00:07:38,820
Only put things that specifically define
the image that you're looking at.

139
00:07:38,820 --> 00:07:42,440
By be succinct,
that means don't go on and on.

140
00:07:42,440 --> 00:07:46,040
Really, it's supposed to be a quick kind
of idea of what the picture's about.

141
00:07:46,040 --> 00:07:50,140
When we talk about don't be redundant,
what we're saying is,

142
00:07:50,140 --> 00:07:53,500
don't include alt text that's
already in the content of the page.

143
00:07:53,500 --> 00:07:56,440
If you have the image, and
in a paragraph beneath it,

144
00:07:56,440 --> 00:08:01,200
you describe it in detail, don't put
that same content into the alt text.

145
00:08:01,200 --> 00:08:03,540
And finally,
the one of don't include picture of,

146
00:08:03,540 --> 00:08:06,195
graphic of, that really just goes
back to just being succinct.

147
00:08:07,990 --> 00:08:11,460
It is occasionally okay to
leave your alt text empty.

148
00:08:11,460 --> 00:08:15,640
So if you have images that are just
decorative, logos, things along that line,

149
00:08:15,640 --> 00:08:19,410
you can go ahead and just put alt
equals and then the double quotes.

150
00:08:19,410 --> 00:08:23,070
But it's very important that you don't
skip the alt attribute all together.

151
00:08:23,070 --> 00:08:26,660
The problem with going that route, is you
don't really let people know whether or

152
00:08:26,660 --> 00:08:29,820
not you were thinking
about the accessibility.

153
00:08:29,820 --> 00:08:34,030
They don't know if the alt text is
missing because it's non-informative or

154
00:08:34,030 --> 00:08:35,740
because you just forgot to put it in.

155
00:08:36,830 --> 00:08:40,410
Okay, so let's go and review some
of the things we know about images.

156
00:08:40,410 --> 00:08:43,080
One, file extensions
are incredibly important.

157
00:08:43,080 --> 00:08:46,260
You need to make sure they
match the file format.

158
00:08:46,260 --> 00:08:49,110
The file name for your image is
something that you're gonna want to

159
00:08:49,110 --> 00:08:53,120
keep very short and descriptive so
you can avoid using typos.

160
00:08:53,120 --> 00:08:56,230
And finally the file paths, or
where that whole long thing

161
00:08:56,230 --> 00:09:00,632
that you put in the source where
you have images/pictures/extension.

162
00:09:00,632 --> 00:09:03,330
You wanna make sure you are spelling
those correctly as well.

163
00:09:03,330 --> 00:09:06,110
If you can do these three things,
it'll make it easier for

164
00:09:06,110 --> 00:09:08,360
you to successfully use images.

165
00:09:08,360 --> 00:09:11,640
And for right now, let's go ahead and
just style the height and

166
00:09:11,640 --> 00:09:13,480
width right in the HTML code itself.

167
00:09:13,480 --> 00:09:17,410
Even though I often talk about separating
content from style, it's very common

168
00:09:17,410 --> 00:09:20,980
practice to go ahead and incorporate
those two when you're doing images.