Video: Understanding the PNG file format and its settings

While the GIF format was probably one of the first graphic formats ever used to transmit images over the web, there were a few legal battles in its history around who owned the compression algorithm that it used to make file sizes smaller. So there was another image file format that was created called PNG or Ping. The interesting thing about the PNG file format is that there are a variety of different types of PNG images. And it kind of allows you to pick the best of both worlds, meaning that it has some attributes of the GIF file formats, but it also has some attributes of the JPEG file format.

Understanding the PNG file format and its settings

While the GIF format was probably one of the first graphic formats ever used totransmit images over the web,there were a few legal battles in its history around who owned the compressionalgorithm that it used to make file sizes smaller.So there was another image file format that was created called PNG or Ping.The interesting thing about the PNG file format is that there are a variety ofdifferent types of PNG images.And it kind of allows you to pick the best of both worlds, meaning that it hassome attributes of the GIF file formats, but it also has some attributes ofthe JPEG file format.

So let's take a look at how we might export our files as PNG images out of Illustrator.I'm going to go back over here to the File menu and choose Save for Web &Devices, and I want to go down and click on this logo right here and choose tooptimize this as a PNG file.Notice that there is something called PNG-8 and PNG-24.And I had mentioned before that there is a similarity between PNG, and GIF, and JPEG as well.You can think of PNG-8 as closer to the GIF file format and PNG-24 as closer tothe JPEG file format.

So let's start off with the PNG-8 file format.Like a GIF file, it's limited to 256 colors and of course you can choosevarious ways to reduce the number of colors to those colors here.You can get smaller file sizes by actually reducing the number of colorsinside of the file.And in addition you could choose to have transparency, so you can choose onecolor to actually become a transparent color.However, I'm now going to hit the Spacebar to give me the hand grabber toolto move to this part over here, this slice with the image, and I'll select this slice.

And now instead of the PNG format, PNG-8, I'm going to choose PNG-24.Notice here that all those settings go away, similar to again the way that JPEG is.That's because PNG-24, which is 24 bit, is not limited to the number of colorsthat PNG-8 is like 256 colors.So it allows you to simulate something called True Color or Continuous Tone,where you get beautiful ranges of colors which are great for photography.However, there is another benefit to using the PNG-24 file format.Notice that over here it does allow you to use transparency.

Remember that JPEG did not have a transparent option, but here we do have transparency.If I did have some kind of an image that was not a rectangular shape, I could ofcourse use transparency to make, let's say, a background color go away, but thebeautiful thing about using PNG-24 is that the transparency that's supportedactually supports 256 levels of transparency.So that means you could theoretically create some artwork that has a soft drop shadow.And you could make that sort drop shadow have a transparent background, so thatthat soft shadow actually blends perfectly into any background or even on top of other photos.

Now, later on inside of this video title, we're actually going to see how we can do that.And how we can test to make sure that it looks great in a browser, but for now,you now know that you can actually create these PNG files using both PNG-8 andPNG-24 to export artwork out of Illustrator.One of the really interesting things to note about the PNG file format is thatit's supported by many different browsers and even applications.For example, Microsoft's Office can import images in the PNG file format andit's even the preferred way of getting artwork from Illustrator into, forexample, PowerPoint presentations.

Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design .

Here are the FAQs that matched your search "" :

Expand all | Collapse all

please wait ...

Q: In the chapter 5 movie, "Simulating the CSS box model," the author details the CSS box, but names the inner portion the margin and the outer portion the padding. This is reversed from what I’ve have seen elsewhere. Is this an error in the video?

A: This video does indeed contain an error where the author describes the margin and padding. The padding should be described as the area inside the border, and the margin the area outside the border.

Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.