Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this movie, I'll explain how to save that same high contrast image as a PNG file. Ping can do everything that GIF can do. And, in fact, PNG can do it better because PNG has the advantage of generating smaller file sizes. However, PNG doesn't necessarily enjoy as wide a support as GIF. So even though all the major web browsers support PNG, a lot of websites out there don't support PNG. So if you're posting to a third party site, you'll need to figure out whether they accept PNG graphics.
If so, go with PNG for your high contrast art. If not, go with GIF. So, I still have Deke's Techniques 060.psd selected. I'll go up to the File > Save For Web. And I'm going to ahead and zoom in on my graphic again, just so I can keep an eye on it. And when I'm zoomed in this far, I can see the effects of that reduced color pallet. I can also see that my 64-color GIF graphic is going to consume 45K on disc.
I want you to bear that in mind because notice all these options that we discuss in the previous movie. When I switch from GIF to PNG-8, meaning that at most 8 bits of data will be devoted to each and every pixel. Nothing about those options changes, except for we lose the lossy setting, because you can't assign lossy compression to PNG. And again, it would rather defeat the purpose if you could. We did not see any shift in the appearance of the graphic, so I want you to keep an eye on this bottom image here.
I'll select GIF, and then I'll select PNG-8. And nothing about that image changes, because Photoshop is using the exact same mechanics to figure out the reduced color table and how it should be assigned to the image. What does change is that the PNG image will drop to 37K. So we just lost 8K for doing nothing more than switching a file format. All I have to do at this point is click on the Save button, and then accept the default filename here inside the Save Optimized As dialog box, by clicking on the Save button and we're done.
Now just for the record, PNG also offers the option of saving high color graphics without compression. So if I were to click on the top image once again, go up to the File > Save for Web. You'll recall that I went ahead and set this file to the JPEG format with a quality setting of high. Now, I'll go ahead and zoom in on the graphics, so we can see the effects of that compression. And it's not bad. We have a few artifacts showing up here and there, but it's looking pretty good. And our file size is between 47 and 48K.
If for some reason, you wanted to save a high color graphic like this one, a continuous tone photograph, for example, without any compression whatsoever, then you could switch to PNG-24. Now, PNG does not assign any lossy compression. It does assign lossless compression in order get the file size down to 221K. That's still a lot bigger than we were seeing with JPEG. So its only real advantage is that it supports transparency where JPEG doesn't.
And it doesn't just support one level of transparency that is a pixel is either opaque or transparent, the way it is with GIF and PNG-8, but rather you have the full range of translucency that's available to you inside Photoshop. But if your image is entirely opaque, as it is in my case, then you're better off sticking with JPEG. And if the compression is bothering you, then just go ahead and crank the quality all the way up to maximum, and you're still going to end up with a smaller file, 155K, where this image is concerned.
At any rate, I'm going to cancel out because of I've already saved this image. Just want you to know what your options are. So, remember, if nothing else, where high contrast graphics are concerned, the PNG-8 format gives you all the advantages of GIF, as well as smaller file sizes.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 49691 Viewers
117 Video lessons · 36965 Viewers
113 Video lessons · 81092 Viewers
65 Video lessons · 10283 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.