Join Justin Seeley for an in-depth discussion in this video Understanding web file formats, part of Photoshop CS6 for Web Design (2012).
- View Offline
When it's time to export our graphics for the web, we have a big choice to make. Which file format do I use? Well, the truth be told, it's up to you and your personal preference. But there are some loose guidelines that you can follow in order to make sure that your images look the best on a web. In web design, we deal with three basic file formats: JPEG, GIF, and PNG. JPEGs are great for smooth toned images with no transparency, meaning that there are no transparent or semi-transparent portions of the image whatsoever. This means that JPEGs are perfect for optimizing photographs, which have a ton of subtle gradations and a wide gamut colors.
JPEGs do not handle images with areas of flat color very well; this is better suited for GIFs and PNGs. GIFs are ideal for low, flat-color images like small logos icons and even rasterized text. GIFs are what call palette-based files, which means that their file size is determined by the number of colors contained within the GIF. While they do support transparency, they don't do it all that well in my opinion. PNGs are the true stars when it comes to transparent graphics. What do I mean by transfer graphics exactly? Well, let's take a look.
I have open here three files: one is GIF, one is a JPEG, and one is a PNG. Let me create a new document by hitting Command+N or Ctrl+N on my keyboard. And I am just going to make this about 800 pixels wide by about 500 pixels tall and I hit OK. Now I'm going to fill this with a color. It does not matter what color it is; just any color will do. So I am going to pick a neutral gray, kind of a dark gray, and then a hit Option+Delete or Alt+Backspace on my keyboard. Now let's say this is a background on a web site and I want to bring one of these images on top of it.
If I want one of these images to have transparency, I need to use something like a GIF or PNG, right? Well, let's see what the GIF looks like. I'll take this and all I am going to is just drag it out and drop it in. You see what happened? Nothing happened. Why is that? First of all, if I go back to that document, you'll notice the Background layer is locked. Normally, to unlock, it I'd double-click. But if you double-click here, it does nothing. That's because this is in an indexed file format. In order to get this into that other document, I have to go Image > Mode, and switch it to RGB.
Now I can drag it over and I'll hold on the Shift key, release my mouse, and release Shift key. Now you notice here that I do have some areas of transparency. It's not an exact square. However, it did not handle the drop shadow very well at all. So therefore, this is not the file format I want for this. So, I will throw that away. Let's drop the JPEG. Just drag that over, drop it in. And now I have really hard sharp edges all the way around it and absolutely no transparency.
Again, not what I am going for. So I'll just undo that with Command+Z or Ctrl+Z. Finally, lets check out the PNG. Take that drag it over and I'll drop it in. And that looks like it's just floating right there. There's nice edges around. The drop shadow looks perfect. So that is exactly what I needed to optimize this image with the transparency. So, it may take a little bit of trial and error when you're working with these web file formats, but my suggestion is you just export it out, go for the smallest file size you can, and then open these up and test them out.
If they look good to you, you should be good to go. If you start having problems like it did with the GIF and the JPEG then it's time to re-optimize it as something else. Now PNGs, like GIFs, are palette-based graphics as well, and they also tend to produce a larger file sizes, so you should be aware of that going in. Usually you can get the lowest file sizes out of a GIF or a JPEG, but the PNG is the only way to go when you're doing transparent graphics. In the end the choice is up to you, but my general rule of thump goes like this: JPEG is exclusively for photos, PNG is great for logos and big transparent objects, and I really only use GIFs if I have to.
As you continue to refine your workflow, you'll find scenarios for each one of these file formats, and hopefully now you understand how and why to use each one.
- Customizing a web workspace
- Decoding the mysteries behind screen size and resolution
- Coloring web graphics
- Using layers and layer comps effectively
- Working with transparency
- Creating wireframes on a grid
- Styling text
- Creating image sprites
- Optimizing images as JPEG, GIF, or PNG files
- Integrating with the rest of the Adobe Creative Suite