Lesson so last lesson we talked about how image work in combination with the browser. And in this lesson we're going to know the different about images like the extension of the image like for example, JPEG and more stuff. Okay. So let's start.
So the first one, what is a JPEG file? Well, probably you haven't seen this a million times, but probably you're, not worrying about what this is sound for just because sometimes we just be like. Okay.
So p you, you know, it's a PNG. So JP file, um and stuff like. That so the JPEG stands for the joint photography expert group, and we all know, probably this is a now probably it is a standard image format, which means that is an image that ends with the p, e, g, or uh, yeah, yeah, we're going to keep talking about that later, um.
So the term referred to a type of compression that make images files, smaller. Okay. So this is when things, um image come to a problem. So you create a website right? So when you create your website, you literally want to use image to make your.
Website look, fantastic. Okay, so you want to make your website. Looks awesome. You want to use these all these images.
However, probably if you use it like a really high quality image will definitely make your website, super slow. Okay. So your website might be slow. And guess what? As I mentioned in the last lesson, you got three seconds to combine your, you know, the user to stay in your website.
And I mean that if your website is not fast enough, we'll, certainly go just go back. Okay. So this is compared you. Know, it's a smaller compelling to, um, the raw files that are taken by high-end digital cameras, and I'm talking about lotto's. You know, this canon, which is probably half five dozen pixel or more we're going to talk about that later.
Okay. So the JPEG uses photo and complex graphic. What does that mean? It is, you know, it literally uses like format, because again, you want to use this type of image because they are smaller and okay and don't take me wrong. When I say that is smaller it, doesn't mean, um, I don't mean this, well, yes, I mean, the side, but I don't mean, like the the, um, how would you call that I would say how we look like the size like, for example, um it's, not like it's, going just like this it's, not like you're, changing like from big to a small. It is almost like you're changing the quality of the things.
And you make the picture smaller. Okay, um. This type of file does not support transparencies like, um. You will see the difference between that one and the PNG and the files smaller for more.
Efficient web pages as I mentioned before, and it's, not support for animation. So sometimes you have an image, and you want to animate it for whatever reason you know, depends on the website that you are creating so lets we'll go to the PNG file. So this one is down for portable, graphic format. It does support transference like you can see on the transparent background. We will see that as well. The transferring background is used a lot for logos. Okay.
So, you know, you have your logo and probably your. Logo is on top of a white or black background. And you want to show your logo on your website, especially like on the corner, like when you're going to a website, and they probably have the logo in this side on the left side on top. You want something to have like a transparent background.
You don't want something to pause it and then show you like the whole thing or with the background color, okay. So and again, it's great for tests and screenshots, just because when you take a screenshot and on your. Computer is literally like no background, it's faster and smaller. Okay, um.
As I mentioned before, you want to use the PNG for images with solid color logos. And you know if you have like a square and triangle and stuff like that, and again, just because you just want the shape you don't want to look like the entire background, and you'll probably be like. Okay. So what would be my background? Well, your website background will be using as a background to display the shapes or logo that you want to display.On your web page, okay.
So and again, um, this gives you the opportunity like to place your logo. Anywhere. You want without you have to go back and change the, um, the logo. The background, you know, the color of the background of the logo all right. So for example, if you have a logo, and it has a background red, and you have, I don't know, you have your website that has a white background.
Now you have your logo, which is had, which is on top of a red background. And your website has a white background. And you need to put that on top of that, but beside why your website is built, you know, it's using white and yellow and purple color, let's say. But now you're adding that red color on top of that, you know, it doesn't make any sense. So there are different type of PNG PNG, a PNG 24 and PNG, 32, um to be honest with you. It wouldn't it. It doesn't mean that because you use a 24 or 32 you're going to be going to, um, make your website, um, slow it just so like, uh, you know, um, it's like of type of flavor.
Okay, we're. Gonna get into that later as well. And finally is the as, which is the GIF, um files. They don't use this at the moment any more like uh, not everybody uses this anymore, um they're using it on cell phones.
Right? Do you know if you have website for you're using Instagram, if you any social media, you probably might see a session down there that is called GIF? And those little images is like three seconds of a little video. I will not even say you have three seconds something like that about three seconds, um, You know, for example, if you have any if you have one of those, and you want to show someone that probably you don't care something, and this is how you do it.
You know, you probably be like showing a GIF just doing this for three seconds, it's, not a video it's, just an image that has three seconds. Okay. So it is short for graphics, um, I mean, graphic interchange format, it is an image format. Of course, which means that is something that that is image that GIF, and it's represent images with up to 256. Different colors and you use so uh, decorate the quality of the image is not perfect again, um it's something that if you go ahead and see it on your phone, right now, it's something that will not look too clear it's, not that bad for the purpose of what you're trying to do, but it's also not good to just add it in your website and hope make it.
You know, hope to make your website. Look, beautiful, let's say, it would definitely take that, um that flavor, um out of your website. Right? So people don't use it. Anymore, they used to they used to use it a lot though, um, when probably they were doing math in, you know, some website that have some math operations.
And they were using this thing for just to represent some shape like jumping around, or just like adding numbers. You know, like you, if you add fours plus four, and then they get together and both is like eight. So you will use a GIF to show that. And it was supposed to look fun, though I don't know, probably it probably looked fun though, but yes, uh.
This. Is usually how you give some live to your website. So now let's, try, um, we're going to be trying some of these files here in the next lesson. And I hope you're enjoying this one.