Using Images

Quick reference

• 00:04 In this video, I want to talk about images.
• 00:06 Images are pretty easy to do, we just need an image tag.
• 00:10 And this is what an image tag looks like, img src=, and that's it.
• 00:17 There is no closing tag for an image.
• 00:19 This one closes itself so you could put this little forward slash if you want,
• 00:23 I don't think you even really need to do that.
• 00:25 Sometimes I remember, sometimes I don't.
• 00:27 Like a link that we talked about in the last video,
• 00:29 we need to point this somewhere.
• 00:31 And src, that's the path where the image is located.
• 00:35 So we don't have any images here.
• 00:36 It's a good idea to separate your images out from your directory structure.
• 00:41 And we do that by, let's right-click here and create a new folder.
• 00:45 And I'm just going to call this images.
• 00:48 Now we need to put an image in here so, I've got one handy on my desktop here.
• 00:53 You can just drag this over here,
• 00:56 put it over the images directory, and just drop it.
• 01:00 And you can see, boom, it showed up.
• 01:01 Right there it's listed, so that's kind of cool.
• 01:03 And it in Sublime Text, it's just as easy, right-click and
• 01:06 create a new folder, let's call this images.
• 01:09 And we can just come down here and right-click and
• 01:12 open the containing folder.
• 01:13 And you can see here's the images directory we just created, so
• 01:16 click through to open it.
• 01:18 And then you just want to drag your image into there, and now it's available.
• 01:25 So in order to access that, we need to reference the images folder,
• 01:30 and then the name of the actual file and it's hike.png.
• 01:35 It's a PNG file.
• 01:36 So if we save this and come back here and hit Reload,
• 01:39 we see this big huge picture of me hiking in the mountains outside of Las Vegas.
• 01:44 So that's just that simple.
• 01:46 If we right-click here, and click Open image in new tab,
• 01:50 we see here's where the image is sitting.
• 01:53 This is sort of the hard URL, right?
• 01:57 Okay, so this is really big.
• 01:58 How do we make this smaller?
• 02:00 Well, there's a size attribute.
• 02:01 We talked about attributes earlier, and it's height and width, right?
• 02:05 Right now, if I open this in a new web browser, if I put my mouse here and
• 02:10 hover it, you can start to see how big this file, it says 1024.
• 02:15 Actually, if we close out some of these, okay, so it makes
• 02:18 it a little bigger 1024x512, that's the size right now and that's pretty big.
• 02:22 So to change the size, we just put
• 02:26 height="", width="", okay.
• 02:31 And then just enter in whatever values you want.
• 02:38 1024, let me grab my calculator, 1024 divided by 2 equals 512.
• 02:43 So let's change this to 512, I misspelled width, wouldn't you know, W-I-D-T-H.
• 02:49 And if it's 512 now, let's divide that by in half and say 256,
• 02:54 put that in there, click Save, click Reload, and whoa.
• 03:00 That does not look good, what happened here?
• 03:02 Oops, I switched these around.
• 03:04 This should be 256 and the width should be 512.
• 03:10 Okay, so that looks much better.
• 03:12 So that's the way to do that.
• 03:13 Now that was sort of by kind of hard-coding this in.
• 03:16 You don't necessarily have to do that, you can just put one.
• 03:20 If we hit Save, the web browser can figure that out and
• 03:23 it will scale it in the same way.
• 03:25 It will keep the same, it's called aspect ratio.
• 03:28 So I mean, we can change this to 100, and
• 03:31 it will shrink it down in the same aspect ratio.
• 03:35 Or we can hard-code it into something weird like 2000.
• 03:41 And the browser will stretch it but that looks really bad, right?
• 03:45 We get the scroll bar.
• 03:46 Personally, whenever I want to keep the same aspect ratio, I'll just use one of
• 03:51 these attributes like the height, and it will resize it in proportion basically.
• 03:55 Sometimes, you use these height and width things in order to resize it on the fly.
• 04:00 Personally, I would take this image into Photoshop and
• 04:03 resize it into the smaller size and then upload the new smaller sized image.
• 04:07 Just because if you want an image resized, why load that big image file?
• 04:12 It's got a large file size, it takes longer to load.
• 04:16 If you're just going to resize it down to a smaller size, you might as well resize
• 04:20 the actual image so it's a smaller image size, so it takes up less disk space.
• 04:24 It loads faster.
• 04:25 Not a huge deal because most people have broadband fast Internet, and so
• 04:28 it doesn't really matter.
• 04:30 But if you're optimizing your website for speed,
• 04:32 you might resize your images offline like that.
• 04:34 But either way, that's how you do it and it's very, very simple.
• 04:38 You can add a title to this, me title.
• 04:41 We talked about title attribute, Me Hiking, save it, click Reload, Me Hiking.
• 04:48 So that's images, pretty simple, pretty straightforward.
• 04:51 And in the next video, I want to talk about linking images.
• 04:54 So that's all for this video.

Lesson notes are only available for subscribers.