So one of the things you're probably going to want to put in your articles and such are images. So first of all, images are added using the HTML image tag. It's a void tag. So there's no closing tag, you'd use the source attribute to tell the browser where to load the image from. And then there's also an alt attribute, which is used to give a description of the content. It's particularly great for screen readers in search engines, because they just can't access the content of the image otherwise.

But it is important that you add alt text to help make it accessible to anyone who has low or no vision. So you've got your image tag, your source attribute, in this case is zombie dot png. If it were in a different folder, you would start with you know, whatever that folder is, or the path to that folder, then zombie dot png. If it's in the same folder, then you can just use that. You can also pull something in from elsewhere using the full URL. If you had that as well.

The old text is just going to be text about the image in this case Alone zombies searching for his hoard. It's also important to know that you don't want to say like images or graphics, because that's already inherent in that it's an image, a screen reader is going to say that it's an image before it reads the alt text. You do a lot of things with size on images, there's height and width attributes that you can set to determine what the size should be. It is generally better to do it in CSS, which we'll get to eventually, but you can do it in in your HTML as well. So if you try to make an image larger, using the height, width, that you're going to degrade the quality because you're spreading the information over a larger area. It's kind of like if you have a human resistance, so fighting zombies, and you spread them too thin against the zombie horde, they're not gonna be as effective, they're not gonna do as well, because they're spread too thin.

You can make the image smaller, and we'll leave the quality intact, the problem is still gonna be the same file size. So if you have a 10 meg image, and you shrink it down, so it's only like 100 pixels by 100 pixels. It's going to look really small, but it's still going to take Whole 10. Meg's to download to look right. So it's often best to have the exact height and width of the image that you're using in order to prevent sort of over downloads or lower quality. And if you change the height and width just at random, without preserving the aspect ratio or without doing so, proportionately, it's going to squash or stretch the image, and it just doesn't look good.

Unless it's a zombie, then you can squash and stretch them all you want. As I said before, ideally the image should be its natural size to get the best balance between the smallest file size and best quality. Okay, so let's talk about the different types of images you can use on websites. First of all, there's GIF stands for graphic Interchange Format, and I pronounce it GIF. A lot of people on the internet would say that I'm wrong, but I would say that it's not graphics, so it's not GIF. It's GIF, but it's up to you as to how you want to, on which side you want to fall in that fight.

Gifts work in all browsers. They allow animation which is one of the reasons while they're still around, a lot of the animations you see on the web are often in GIF. Particularly up until recently, though, there's a lot of new stuff going on with CSS animation that allows those to be done natively, as opposed to just in GIFs. GIFs. also allow for transparency, which is helpful to the transparency isn't always as good. And sometimes it's a little crunchy or, or shows more of the edge than you want to.

It is a lossy format, meaning that when you save as GIF, you're losing information. So it's not keeping all the information so you're sort of degrading quality a little bit, but the benefit you're getting is that you get a smaller file size, which takes less time to download. So it's a balance between high quality or quality of image and size of image. gif works particularly well with large swatches of color such as logos or line art. jpg stands for joint photographic experts group. It works in all browsers does not allow for animation has no transparency.

Allowed for it. And it is also a lossy compression. But it is super great for photographs and does a much better job of compressing them than a gift does. And so it really shines and photographs and other complex imagery. png stands for Portable Network graphics. And it is sort of the newest of the standards, but still works in just about all browsers.

You have to go pretty far back to find a browser that doesn't work in it does not allow animations, but it does allow high quality transparency. So if you ever need transparency behind an image, you want to use a PNG. It is a lossless compression, at least at the PNG 24 the PNG eight is lossy. What's great about that is that you are keeping all of the the information there you're just sort of compressing it into a smaller box as opposed to getting rid of some of the information so that if it's smaller boxes speak it's algorithms are particularly good on the same thing that gifts are good on. things with large spots of color logos, line art, those sorts of things, but it can be used on it. SPG is probably the newest of these standards, or at least the one he was wanting to be standardized stands for Scalable Vector graphics.

It works natively in most browsers. But you can also use it within an image tag in older browsers. So it still works there as well. You can also use it as an image tag in more modern browsers. But natively sometimes has some better benefits like access to CSS and things like that. It supports animation and animation via CSS.

It also supports transparency. And it scales up and down without any loss in quality. svg graphics are what's called vector. And so they can be there. Similarly, again, more line art and logo sort of things. But you can scale them up and down without any loss of quality because they're based on math rather than on pixels.

Generally, a very small file size. He uses tags much like HTML, which is when I was talking about it being native. I'm talking about using the tags directly in your HTML, as opposed to importing an SVG file through an image tag or something like that. Again, best with line art logos, icons, those sorts of things. Now there is another tag that we sometimes use for images, not directly for images, but usually surrounding images. It's called the figure tag.

And it's mainly a container element for graphics, tables, charts, all those sorts of things. And it should be self contained but relate to the main content. So it's, I mean, this is particularly what you would see with different papers and things where you would have a figure that supports the data or, or shows the data, or supports the conclusions, etc, etc. So the figure element allows for that it's best used for descriptive information supports the text around it. And another element fake caption allows you to add a caption to the figure, okay, here's a live image tag. So we have image, we have our source.

This is where we're finding it from. We have our alt text. If we wanted to put this in a figure, we would just add the figure tag closing it with the figure Then if we wanted to say, add a caption, we could do that. Okay. All right, and then we have a figure. Let's move on to the next video.