Lessons

Lesson Info

Save Files as JPEG

Rule of thumb: whenever you are saving an image, the best way to save an image is saving it as a JPEG. This is what it's used for. The reason why is because JPEGs will allow you the full spectrum of color that the image was captured with, and so you're not compromising the colors, you can get the full image and the full range of colors, and that's the intent. So, I've got some options here and I've got some presets here; low, medium, high, all this other stuff, and then quality of my JPEG. And people say oh I always want a really good quality JPEG. It's like, okay, but here's the deal. You're gonna be looking at this on a website or a mobile device or a tablet, and I'm gonna be seeing this at exactly the size I'm going to render it. So most people don't go and zoom in on a web graphic to see how much better it looks, because we know when we zoom in on something on our phone, it gets more pixelated. So I wanna make sure I work with this at 100%, and I can see here that I'm actually at 1...

00% and down here in the corner I'm actually looking at it at actual size. So this is how it's gonna appear on my website. And the higher I rank the quality here, the larger my file is going to get. Now, back in the day when we had dial up modems when all this came out, this was a huge deal. It's still a big deal, but I wanna make sure that I get the best quality so people are like I'm gonna ramp it up to 100%. Well I'm gonna show you a really quick and easy way to find out what the best quality is going to be and the fastest speed. 'Cause if you're doing lots of these web graphics knowing what you have for file size and quality is really important. I'm gonna zoom in on both of these. I'm never gonna do this, only to show you how it's happening. So to the left is my original and to the right is my JPEG saved with highest quality. Now I'm gonna set the quality down to zero, and you can clearly see what's called JPEG compression lines. Every single JPEG that you save always has compression lines. JPEG is a lossy format, which means whenever you save it as a JPEG, you're losing information. And people love JPEGs because you can take a 50 megabyte JPEG, save it, and it comes out to be a two megabyte JPEG. Well, what happens? Well, it gets compressed. The problem is is that there is no way to save it as a regular JPEG without losing some quality. You can't take a large file, cram it into a small space, and not have some sort of loss or damage to it. Once you save this file and you get these JPEG compression lines, there is no getting the original file back. It's just like taking a piece of foil, wrinkling it all, and then trying to smooth it back out again. You'll never get it quite smooth enough. It just doesn't happen. So, I wanna save this to be the best quality but I have to keep in mind too, what it's gonna be used for? So if I look at this really large, yes it looks horrible. And the way a JPEG saves size is it goes and it tries to group large groups of color together. The more you compress it, the more these large groups of colors become assimilated and it starts just putting in one color in a very large square. Less pixel color differences and the more continuous color, the smaller it's going to be. So it's like, oh this is horrible quality. Well, it is when you zoom in on it, but when I zoom out here, you can see that there is definitely some loss of detail right here. So I'm going to go ahead and bump up the quality. And here's another little trick if you didn't know, you can just in Photoshop, you can scrub on any one of the words and that's to change the value right there. So I'm gonna set this up to about 30, someplace around there. No magic number, I just do that. I'm gonna compare the one on the left to the one on the right, and I'm gonna look at the detail, and I'm gonna get it to the point where it looks pretty good, and I'm not gonna go any further. Most people are like, oh I want the very best. Well, it's interesting because we have these presets here; low, medium, high, maximum quality. Well, when you have low quality of maximum quality, maximum quality doesn't mean that you're going to get like the most gorgeous image ever, that just means the maximum quality that JPEG will allow. You are still compressing the file. The more you compress the file, the more you destroy it, the worse it looks, but the smaller the file size. Makes sense. So even with maximum quality here, you are still compromising it a bit. In a lot of cases, most people never see it. But I'm gonna put this in here regardless of what medium quality actually means. I put in the quality so that when I look at this I see the detail in here and I look at this, and it's like okay, you know, I can't see the difference. Well, if you're in Photoshop doing this and you can't see the difference, the chances are virtually no one else is gonna see the difference either. So my 830K file that started out, is now 15K right there. Now I can go in and I can up the quality all the way to like 60 and it makes no noticeable difference on the screen, but I have now just doubled the size of my image, and if there's no noticeable difference, now that file takes twice the size and twice the time to load. So, what do I need to do with this? I need it to get to the point where it's going to be fast enough to load, and look good. So, you don't have to pay attention to these labels that you put on here. Dial it in until it looks good and you can no longer see the difference between your original and your JPEG, and you're done. You're ready to go. And then once you save that, you now have your image ready to go for a JPEG. JPEGs, great for images. This is exactly what you wanna save them as. JPEGs are horrible for graphics, type, and also logos, thin lines, and large areas of color. So with this I can go ahead and I can save this, and if you wanna preview this you can click on the preview button here and you can look at it a browser right there, and you can specify your browser or in this case I'm just going to save my file and there it is. I'm gonna save it as a JPEG, and I'm gonna save that. If I wanna see what my file actually looks like, I can go to any open browser here, go under File, Open, and I can actually open my file right in a browser, and that's what it looks like. And if it looks good there, this is exactly how it's going to look on other people's devices. Easy way to test it. Super easy. So, that's what I can do when I save a JPEG. Got a question? First of all, just awesome because I don't know about you guys but I am always still asking myself, like, what do I save my images for for my website? And I know that my sizes are larger than that, like 100, 150K, and they load slowly. So, can you just reiterate again that difference between low, medium, high, and then the slider itself? Absolutely. And what I'm hearing you say is that we don't need to pay attention, so we can leave it at low or medium, because are they both effecting the file size or is just one overwriting the other? So, basically the low, medium, high, monikers are actually connected with the numbers right here. So maximum quality means the quality is set to 100, okay? So very high, 80%, high is 60%, medium is 30%, and low is 10%, okay? So these are great presets, but along with presets, once you know what you're doing. Presets are great to start with, but really these are just labels, okay? And these are all relative. And so if you can't see the difference between high quality and medium quality, you could call this bacon for all I care, you know, as a name, because I have to throw bacon in there, but what is the biggest thing is making sure that the quality looks good on screen, okay? The label that you put to that, you can call it whatever you want. Every image is gonna be different because you're gonna have a lot of fine detail, or you're gonna have a lot of areas of color, or you're gonna have a sky where you just got a nice gradient blend that you could probably put this down to a quality of 10 and still not see any different. But if you have a sharper image with a lot of detail, and you've got something with a you know, short focal length, and you got like a piece of electronics shot really close, you may wanna go a little higher in the number right there. So this is, I won't say arbitrary, but it's just a label and that's all it is. Yeah? Thank you for reiterating that. I did have a question that came in from online, and it says the detail of the saved JPEG is not noticeably different from the original, but the color of the chili pepper is definitely different, however, this seems to be true at all the different resolutions. Can you explain what's goin on there? So, the color is not going to drastically change on the compression. It will somewhat because what happens when you adjust the quality way down, you'll see, and I'm gonna zoom in here to show you this, when I adjust the quality here you'll see that the detail changes. So, you are going to get somewhat of a perceptible color shift, not because the red is actually changing color, but what's happening here is that it's actually kind of grouping pixels together, so some of those pixels that are kind of close to each other, are now being assimilated into one group. So, while it's not specifically going in and changing the color, you are removing pixels, and you are shifting some of the pixels to now migrate toward. So you will see a bit of a color shift. So clearly you don't wanna go down this far, but when I look at it here, and I look at it here, I see a little bit difference in detail, you know, and it looks slightly different on screen, but color wise it isn't a hugely perceptible difference. Now, the color standard that we have when we save a JPEG is sRGB and that's the current standard. But keep in mind when you're trying to make something absolutely perfect color wise, you have no control over everybody else's monitors, screens, or tablets. And also everybody's perception of color is slightly different. So there's a huge different world about color correctness here, and that's a whole nother six day long convention. But yes, it does look like it's changing the color, absolutely. But it's changing the color because we are losing pixels the more we compress it, and then the colors are becoming more assimilated and more uniform. Jason, just a couple more things while we're on the topic of saving to the web because a lot of people, that's a main thing that they do and are excited to learn more and people are saying oh my gosh I've been doing this wrong the whole time. So if you're feeling like this, yay, we've just started the class, but again for posting to the web, and somebody's asking about the PPI, or DPI is the right way to go if you're just posting to the web? With HD screens is there any reason to save at a higher resolution and then on the image size people are wondering as well, down below, what you recommend. So, to answer both those questions, when you're dealing with a high resolution device there, the trick to a high resolution device is it's 72 pixels per inch, but it's actually twice the size. So, when you get a high resolution device, it's still 72, but the device then takes it and it scales it down. So that 72 pixel per inch at this size, when it scales it down, the resolution goes up because you're taking the amount of information and you're packing it tighter into a space. So a high resolution device is just displaying everything at half the size, and we'll talk about that when we get into using the export for screens, because that's a little bit different as well. So, and the other question was what's the actual correct size? Well you have the actual image size right here with your width and height of your pixels, so whatever you want that to be displayed as on your website, then you can go in and you can enter in the, you know, pixel width and height there. So if it's 400 pixels wide and 599 high, or 600 high, that's exactly what it's going to be when you open it up in your web browser. And that's completely dependent on what you want it to be in the file. You know, if you want it large or small than you just determine the size right there.