Image Formats & Resources

[00:00:02]
>> Sarah Drasner: You can't be a web performance expert without also being an image expert. This is a really true statement, if you think about it. Images are really heavy, they're a huge part of what we transmit on the web. This is the HDP archive, this is all of, it's a breakdown of what we transmit on the web on all sites.

[00:00:24]
So how much the average site loads, and what amount of content on average people do of each one of them. Look at images. Images is huge. That's a huge amount for each one of those. So if you want to reduce. But, create better performance for your site. Learning how to properly optimize images and work with images, is a really big piece of this.

[00:00:47]
So there's a number of sources to get free images from, so some free ones, Unsplash, Google Image License Search. I don't know if you know how to do this. Let's go do that really quick. So let's look at, look for a mountain. Go to images, and then, I go to tools, and then, I go to usage rights, and labeled for reuse.

[00:01:15]
So these are all of the things that are definitely licensed for me to use, so I can still use these and not have a problem. It's important that you do this, so that you don't accidentally take somebodyelse's image off of Google Image search, but that tool is really, really a nice one.

[00:01:35]
Great, Freepik is a good one, I think you have to give them your email, but you guys know how to give fake emails, right? [LAUGH] Freeimages, and Pexels, I think same kind of thing, there's free images, but you have to sign up or something. Low cost, creative market is great, adobe stock is good.

[00:01:56]
Costly, it's not that costly, but Shutterstock and iStockPhoto, if you're not gainfully employed somewhere, 50 bucks and a minch can kind of set you back, especially if you have to buy a whole bunch of them, or something. The thing though is, that there is a cost, right? So if I'm looking for something in Shutterstock and iStockPhoto, I can find that image really fast.

[00:02:21]
If I'm working for a big company, that actually makes sense for them to do, right? They don't want me, that they're paying way more than the $50 image, to spend three hours through looking through, Unsplash or Freepick. It's more cost effective for them to use something like iStockPhoto where they can get a subscription plan, and I can use that, because some people cost a bunch per hour.

[00:02:46]
So it really depends on if you're working for a company, or if you're not, or if you need to get something done really fast. Time is money. Raster and Vector. So there's a big difference between raster and vector, and you might have heard those two terms, but maybe, you don't know the difference between them.

[00:03:02]
Raster, imagine that you, again, we're always imagining a piece of graph paper. Imagine that you have a bunch of graph paper where you plot every dot of that graph paper, and you kind of encode it with a different color for each little square, that would be raster, and that's how we build up things like JPEGs and stuff.

[00:03:23]
And vector is really where you are giving it some mathematical commands, and allowing it to draw things for you, so it's kind of like more declarative, and it never loses resolution. So if you're working with a billboard or something, you probably wanna work with vector, so that you can, you're not crashing your computer, and you're working with a small graphic that can be blown up to any resolution, basically.

[00:03:49]
This isn't comprehensive, there's a couple things missing off of this, but it was, it's probably the most, it had the most amount of things on there. So raster images, the first three are things that you would deliver over the internet, the last three are not. So JPEG, GIF, PNG, we're gonna break down each one of these.

[00:04:09]
But the, photos, and things that have lots of gradients and tones. Especially, not programmatic gradients, not like from here to here, but like lots, like my face, or something. JPEG, GIF and PNG, PNG having transparency, while the others don't. GIF has transparency, too, but PNG is kinda better at gradient transparency.

[00:04:36]
TIFF, RAW, both being stuff that you might get out of a digital camera, and then, convert to one of the other, to kind of transmit that over the web. They tend to be larger files. And PSD is what we were just working in, there's also sketch format. So those are, kind of like for that program in specific kind of file formats.

[00:05:01]
Vector images, it doesn't say SVG in here, but it should, cuz SVG is Vector. PDF is not necessarily vector. EPS and AI are both things that you would kind of use within Illustrator, especially AI is only Illustrator. EPS can be opened and things like sketch.
>> Sarah Drasner: So JPEG, there is a thing that we use, a term that we use with JPEG called, lossy.

[00:05:28]
And the reason is that it does look like there is gloss in those image. So some of the way that we're gonna talk about these images, is what happens to them when they're too small. Like what happens to them when you reduce the quality of the image? So when you reduce the quality of the JPEG, since it's all of those little squares that are building up the image, the squares get kind of globbier, and bigger, and try to carry more surface.

[00:05:55]
And so, what you end up with, is an image that kind of deteriorates or falls over, so, the one on the left, might look really crisp, but it might also be too heavy to transmit easily over the internet with a certain amount of seconds, maybe, you load up a site, and it's just like, doh, ba doop, da boop, like that, and.

[00:06:14]
So you don't want that happening, you also don't also want those blocked by it. Again, we talked about that scale and cropping. You can use JPEG, and PNG, and things like that, for some of these background images, too. So not just the images, but placing them in the background, and pushing them back in space and have other content on top of them.

[00:06:39]
GIF or JIF, not JIF. [LAUGH] Is a different way, it kinda a similar to JPEG's in someways, because it's still blocking out little pieces. But it's really rather restricting it by the amounts of color that you're going to designate. So here is a color table we're creating this image with all of these little pieces of color, and we're using 256 colors, as you can see in the top there.

[00:07:09]
We can also make the image so much smaller by limiting the color, but you can see what happens to the image. It looks quite different, right? There's like a lot less information. It doesn't look like the same way that it's deteriorating as the JPEG though. The JPEG turns into those bits, the gift looks like it has less tone of variety, and less color is transmitted.

[00:07:36]
GIF's also have the amazing ability to communicate very important things, like this dog, [LAUGH]. All jokes aside, it is really important on the web, because of the way that you can kind of create tiny movies, that have all these tiny tonal varieties. GIFs, these kind of animated GIFs, are pretty heavy, though.

[00:07:58]
They're actually like really, really heavier things to communicate over the web. So paying attention to, if you do use animated GIFs, what compression you're using, is important. PNG, like I mentioned, has the ability for transparency, so if you wanna make some of those masks, we were talking about earlier when we're working in Photoshop, or something like that.

[00:08:19]
PNGs are a really good example of that,