From the course: Photoshop: Tips and Quick Fixes

When should I create a GIF or a PNG file? - Photoshop Tutorial

From the course: Photoshop: Tips and Quick Fixes

Start my 1-month free trial Buy for my team

When should I create a GIF or a PNG file?

“

- When you're creating images for the web, you may consider two specialty formats; PNG or GIF. These work well when transparency is necessary. The GIF format can also be used for animation, but that's a different topic for another day. But why would you choose a PNG or GIF? Well, the benefits really come down to compatibility and quality. Let's open up two logos here that are both vector files. These are illustrator documents. Both of these have transparent areas. One has rich gradients in it. The other is really simple, black and white. Well, when I choose File Export, save for web, I'm given some choices. You'll notice if we save it as a JPEG, the transparent areas are filled in. So let's switch here to GIF. GIF uses fewer colors, but can really get the file size down. So in this case, I can go with very few colors and still recreate this file. Since it's a black and white logo, I'm going to go with eight to handle a little bit of gray scale. And I'll choose different methods here for dithering to help with the edges and the pattern. My preference is also perceptual. And this analyzes the file and creates a custom color table to best match the original. Now we've gone from 20 megabytes to 40 kilobytes. This is going to take virtually no time at all to download. You see tremendously small here. Let's go with something reasonable here like a cable connection and it's below a second for download. When we click save, it'll write the GIF file and we'll store that next to the original. Now let's go to the file with gradation. And we'll choose Export Save for Web. You'll notice that the GIF File starts to produce a lot of banding and other issues. So we can start to bump up the number of colors. Let's try 16. And it's better, but those subtle gradients just aren't getting handled quite as well. You see a lot of noise and patterns here. We can try diffusion but again it's creating a lot of noise. And so the subtle gray's here don't have enough colors to recreate. So this is where we have to start to deal with more colors. And as we pump it up, it looks better, but again, we're still seeing banding. Remember, the GIF format is an eight bit format. It doesn't have as much information to describe color. So it really tops out at 256 colors. And while that sounds like a big box of crayons, it doesn't always work. In this case, we're still seeing a tremendous amount of banding. We can play with the data and other choices here. But really the answer is switch. So right now we're at 235 kilobits, let's switch to the PNG 24 format which allows for more accurate color. Now, you'll see it works just fine. Now, the file size bumped up just a little bit to 373 kilobytes, but every color is accurately reproduced with the transparency data. That's because the PNG 24 instead of using eight bits total has eight bits for the red, the blue and the green channel. Leading to millions of colors instead of just 256 colors. So it really comes down to this, if you need the smallest file size go with GIF. If you need to produce animation, explore some of the GIF animation techniques that are available in the library. Or if you are just trying to get something that's really accurate for color, but you also need transparency, go with the PNG 24 format. This is going to give you more color and transparency. Now this format isn't compatible with some of the oldest web browsers on the planet, but it does work with just about everything these days and absolutely with other applications such as PowerPoint or Keynote when you need to create graphics with embedded transparency.

Contents