JPEG, PNG, TIFF, BMP, GIF … it seems like there are too many image file
formats to keep track of. There are dozens of different formats created at
different times for different reasons.
In this video from an Ask Leo! webinar on
Photo Manipulation, I’ll review a couple of the common file formats that we see
and use every day and I’ll describe what they’re good at and when you would want to
Network line art (original) – png format
So, the last segment I want to discuss is file formats. File formats are a source of great confusion to a lot of people. It’s difficult to understand, sometimes, what the difference is between .tif and .nef and .png and .jpg and any of quite literally a hundred different file formats that are out there.
So, what I want to do is I want to discuss at least the conceptual level what the differences are between certain families of file formats and just touch on a little bit on why you would want to use some and not others. So in front of us, what I’m looking at are two files – one is a .nef file. NEF is a Nikon specific file format. It’s called a raw file format. As you can see, this 4K by 3K (roughly) picture is taking up 10MB of disk space and that’s because in the Nikon raw format, every possible bit of information about that picture is included in the file. Now, since it is a Nikon-specific format, that information is often specific to the Nikon cameras. It may, in fact, not even include red, green, blue kinds of color information, but all sorts of bizarre information, again, specific to potentially even the hardware in my Nikon camera.
On the other hand, it is by far the best possible format for retaining all of the information in an original photograph. I have my camera configured to only shoot, to only save photographs in .nef format. The implication then is that, since it’s a Nikon specific format, not every image viewer will be able to view it. FastStone happens to be one which I’m actually quite appreciative of, but I know that many others don’t including Windows own Photo Viewer, Photo and Fax Viewer, the Photo Gallery; they don’t support NEF format and in fact, I don’t believe they support any of the 50 to 100 raw formats for different camera manufacturers. So what that implies for me is that, before I do anything with this photograph, I need to change the format. Typically, all that really means is in an image editing or in this case, image viewing program, I load up the photograph as I have here, I go off to the side; I hit Save As and I choose a different file format. In this particular case, I’m going to choose jpg and I’m actually not going to make a single change to the photograph; I’m just going to save it in jpg format with the default quality here that FastStone has suggested here of 90.
When I now go back and look, you can see now that I not only have the original .nef format, but I also have this new .jpg format – significantly smaller. Lots of information has been lost – don’t get me wrong; there’s a ton of information in the .nef format that is not in the .jpg format. But it’s not information that is necessary to simply view the photograph. The information in the .nef enables advanced editing, advanced color manipulation, all sorts of different things. I can adjust the exposure; all sorts of really cool things if you’ve got Photoshop fired up. But for just viewing a photograph, .jpg is the appropriate choice. Now that leads me to .jpg itself.
JPEG is a file format that is specifically designed for viewing photographs; for viewing images; for viewing the moral equivalent of film. It’s very well tailored for handling gradiated, busy images that have just lots of things going on in them. This particular photograph is a good example in that there’s lots of… there’s actually lots of color; lots of shading; lots of edges; lots of – just lots of things going on. Even in this relatively simple program, .jpg is perfect for doing that.
Now, the downside of .jpg is it is a lossy compression. In other words, there’s not only technical data which was probably lost when I converted this photograph to .jpg, but there was probably also visual data that was lost. In other words, at a highly technical level, this picture may not be as sharp as the original. To be honest, I don’t know and to be honest, I don’t care. Because in reality, if you take a look at this picture, even if you take a look at it in full resolution, the picture looks great, it looks perfect. In fact, if this were to be printed on a piece of paper, it would actually look really, really good. So that’s all you care about and that’s why .jpg is such a good file format for this because .jpg is targeted at maintaining the visual aspects of the image that is being displayed.
Now, another format that is very common and in fact, came up in a previously mentioned question is the .png format. So, I’m going to look at that real quick. This is a .png image that I actually have on the website. It’s an illustration for one of my articles. You can see that it is roughly, you know, 8K in size; it’s 310 x 247. I’m now going to save this as a .jpg image.
So, now if we go back and take a look at the files we were playing with, here’s our original, switch_learned_incoming.png, 8KB; switch_learned_incoming.jpg; same size; different file format is actually larger; it’s 13KB. The issue is that .png files are… the .png file format is optimized for solid colors and straight edges. In other words, it’s great for illustrations, for clip art, for cartoons, for drawings, for anything that involves basically solid colors. Now, even in this particular picture, as I was choosing it yesterday, I noted that there was a little bit more than just solid colors going on here. If you take a look at each one of those computer screens, there’s a little bit of gradiated color there that the .png format probably had to work a little harder at to encode, but this solid white, the lines, that kind of stuff, it’s great at. The other difference about .png is that it has loss-less storage format. In other words, when I save my .nef to a .jpg, I mentioned that it’s very possible, very likely that some of the sharpness of the original photograph is probably lost, but it was so small as to be unnoticeable to the human eye. PNG doesn’t do that; .png gives you a pixel-for-pixel representation of whatever it was that was being saved in that format. That’s one of the reasons it’s so great for illustrations and for line drawings because as soon as you save a line in .jpg and in fact, let’s see if we can’t see that here. You can see if you look closely, you can see that the lettering for the text labels on these lines and the switch in particular; they’re kind of blurry. That’s not the same kind of blurry that you would see here. It’s probably difficult to see right now, but the blurriness is significantly less. Some of the blurriness is actually result of the zoom that FastStone has applied.
The bottom line though is that jpg images when they have lots of sharp; .jpg doesn’t do sharp edges very well at all, it does smooth like photographs. Sharp edges cause it to work harder and hence, it has to save more data to save the relatively equivalent information.
So, those are the two, I’m gonna call the two basic file formats that are worth knowing about – .jpg for photographs and images that have lots of colored gradiations and .png for line drawings, cartoons, illustrations, clip art, that kind of thing.
Now, somebody’s asking If you have time, please compare .jpg, .bmp, and .gif formats. So, .gif is really just, I’m going to call it just a predecessor to .png. It shares all of the characteristics of .png that I just mentioned and that is a loss-less format. Years ago, there was a patent issue around it that actually spurred the development of the .png format. PNG is open and .gif finally gave the patent and the patent on .gif has since expired. The one thing that .gif can do that I’m not aware of any other format doing is you can actually include animations in .gif format. So what happens is in a single file, you simply are able to include multiple images and specify that be able to be displayed in turn with a specific period between each image. So you’ll actually often see, heck, if you go out to any of the wall cap sites, the Cheeseburger sites, there’s often lots of things that people have been playing with by creating what looks like a simple static image that turns out to be a small animation. The other thing about .gif, particularly when it’s animated is, I believe is it’s limited to 256 colors, which means that the color quality isn’t quite as good as .png.
BMP is originally a Microsoft format that’s native to Windows. And in fact, you’ll find that a lot of Windows controls, Windows images that it carries around version to version are in .bmp format. It too is a loss-less format more targeted towards drawings and clip art kinds of things than it is to photographs. In general, I would recommend against using .bmp; sticking to .png and .jpg kinds of formats, specifically because .bmp isn’t always supported everywhere. That’s gotten much better over the years; .bmp has gotten more widely supported just because people have been using it anyway. But in general, you are much safer staying with things like .jpg and .png. Unless you have a specific reason not to.
Can FastStone make animated .gifs or if there is a free program that can make animated .gifs? I don’t believe FastStone can; I’ve never played with that aspect of it and off the top of my head, I don’t have a recommendation for a program that will make them for free. I know that the programs that I use, Camtasia Studio, which I use for recording screen captures, actually does do animated gifs and in fact, I have an example of one. If you go to my site, you’ll see this tab for the newsletter over here and in some number of seconds, that text is going to change. That’s because that image is in fact, an animated gif that I use in there to play with things. It will, in my particular case, to make this happen, I had to do a little bit of exploration within Camtasia and what you’re actually seeing there is Camtasia transitions: they have a scrolling transition, they have a fading transition, that kind of thing. But in Camtasia, you can, in fact, Save As a .gif.
I also use Sony Vegas from time-to-time and I believe that also allows for saving in .gif format, but I can’t say for sure. I know for a fact that there are some free tools out there, I just don’t know off the top of my head what those might be.
Well, with that then, I will wish you all a very good day and hope you’ll elect again to join me next month – first Sunday, I’m sorry second Sunday of the month for another webinar. I do suggest if you have the opportunity, you can drop me a line here at ask-leo.com/feedback. That is a great way to let me know what kinds of topics you might find interesting to be displayed or talked about in the next webinar. Other than that, thank you all for being here. I appreciate your attendance and have a great day!