Transcript from the "Images Q&A" Lesson
[00:00:00]
>> Jen Kramer: Yes, Dylan?
>> Dylan: So in my source, on the web page, I see the alternative language. But since I see the photo, is it hidden?
>> Jen Kramer: Yes.
>> Dylan: Okay.
>> Jen Kramer: Yes.
>> Speaker 3: Can you actually ask that question again, after they're done?
>> Speaker 4: Sorry.
>> Jen Kramer: Yep?
>> Speaker 4: I'll take that one-
[00:00:14]
>> Jen Kramer: Hold that question, just a second.
>> Speaker 4: [LAUGH]
>> Speaker 3: [INAUDIBLE].
>> Jen Kramer: Yeah, cuz it's a great question.
>> Speaker 4: Cool.
>> Jen Kramer: Typo, typos will get you every time. When they make create a computer that fixes typos, it will be a beautiful day, okay. So Dylan, go ahead and ask your question one more time.
[00:00:33]
>> Dylan: Okay, since I see the kitten is the alt text hidden.
>> Jen Kramer: Yes, the all text is actually it is here. And doesn't display on the page, it displays only if it can't find this picture. So for example, let me break my kitten. I'll take a few characters out of my URL here.
[00:00:57]
Hopefully nothing exists at that website. So I'm deliberately trying to break my picture. Okay, so when you have a broken picture, look what happens. Right now I broke my picture. Okay, so right here on the website, it just says cute kitty cat. That's my alt text. Okay, so for people who can't see the picture, can't download it.
[00:01:21]
And for when we make typos and we blow things up, you may see something that looks just like that. Now, this may look different in some other browsers. Sometimes you see a broken image icon. So let me let's look at it quick here in Chrome and see what that looks like.
[00:01:38]
Yeah, so here in Chrome, over here on the side, see how we, actually, have a little broken icon right here? So that's an indication to you, as the web developer, that you did something wrong or something happened. The Placekitten website blew up, blew away, it's gone. That picture doesn't exist anymore.
[00:01:59]
You deleted it off your website and you forgot that you deleted a picture. It could be a lot of things that happened, but you need to look into your code and find out what happened. Does that make sense? Okay, yes.
>> Speaker 5: Is there a way to make the alt text show up like when you hover your cursor over the image?
[00:02:14]
>> Jen Kramer: Yes, there is. That is a great question also. Okay, so let me go back to my code, here. Let me fix it. Undo is your friend.
>> Jen Kramer: Okay, so, the question is, can we actually get this text to show, when you hover over the image? And that sometimes works, in some browsers.
[00:02:38]
Let me go back to Chrome, here. So, I'm looking at Chrome.
>> Jen Kramer: That says I'm an Android developer, AndroidPub. I wonder where that comes from. So sometimes in some browsers, that will do that, in other browsers it won't with the alt text. So here in Firefox, when I roll my mouse over the picture, it doesn't say anything.
[00:03:04]
Okay, so sometimes you have to add another attribute in order to make that work, and there is an attribute called the title attribute.
>> Jen Kramer: And sometimes this attribute will show when you roll your mouse over the picture. It depends.
>> Jen Kramer: Welcome to your world is front end web developers, not all browsers work the same way.
[00:03:30]
It is part of the world that we live in, is the reason that most front end web developers are bald.
>> Speaker 6: [LAUGH]
>> Jen Kramer: Pulled out all of our hair trying to figure out these two browsers. Okay, so if I do that, if I add that title attribute there, [COUGH]
and I refresh this.
[00:03:49]
So now in Firefox, I do indeed get the little text that shows up when I roll my mouse over, okay. And we'll see what happens in Chrome. It also says cute kitty cat.
>> Dylan: A lot of times when I have broken images, it's because I put the wrong file extension.
[00:04:11]
Instead of .jpeg, I accidentally did .png or instead of .png, .jpeg.
>> Jen Kramer: Yes, so, it depends on where you're getting the image from. Right now, I've just gotten the image right here off the internet. If you can also put up your own pictures if you want. If you put up your own pictures, they need to be in a certain format.
[00:04:31]
They need to be jpegs, pngs, or gifs. Those are the only three image formats that work on the web. I think that's in your notes. And it's easy to confuse those formats. So you type in that it's a PNG image, and it's actually a JPG image and it doesn't show.
[00:04:49]
>> Jen Kramer: All right, so let's go through just a couple of other items here. So, remember here, under the image tag, there it is JPG, GIF, and PNG. Those are the formats that will work on the web. Sometimes you'll also see a format called SVG which stands for scalable vector graphics.
[00:05:10]
These are two different kinds of images. Those of you who are familiar with graphic design and image illustration. You'll know that we have Photoshop images and Illustrator images, right. Photoshop images are called raster images. They made up a whole bunch of little dots called pixels over and over again.
[00:05:29]
That makes a picture, right? Those are the pictures you make on your camera. You also have those Illustrator images that are, they're math, basically, they're series of math equations that draw curves and so forth. Color things in. So, we have them on web as well. JPEG given PNG a raster images, series of pixels, SPGs or mathematical equations, and so occasionally, you'll see these used as images as well.
[00:05:55]
Advanced topic, that's all you get on that in this boot camp, all right? Look it up. And then as I went through already, the source in the alt text are the two very important attributes that you need. And you have an example here. Also note that I've given you links to where you can read more on this stuff.
[00:06:15]
So this is a link to the Mozilla Developer Network website where you can read more about the image tag as well. Okay, any questions on images? Yes?
>> Speaker 5: I was just wondering because of accessibility.
>> Jen Kramer: Yes.
>> Speaker 5: Is it becoming more of a standard to make better descriptions for the alt tag or people not really going that way?
[00:06:38]
>> Jen Kramer: Yeah. The alt tag is critical for for accessibility purposes. And the description should be very relevant to whatever the picture is. So historically, people have done all kinds of crazy things with alt tags. It should really, truly be a description of what that picture is. And in fact, cute little kitty cat is probably what we get [LAUGH] for the one that we just put in.
[00:07:02]
But you could you could write more about that if you wanted. We could say whatever kind of cat that is.