JPG, PNG or GIF: How to Choose an Image Format for Screenshots

quiet an informative & useful tip…..

I used JPEG for all types of screen shot but after reading this, i’m sure to change my habit. Thanks :)

a few point u missed, PNG format is not supported by IE6, which still holds a significant portion of the browser market. I love PNG, but will wait for another year

Very useful information amit, thanks
I’m always using PNG format. Because of the image file size is low when compared to all other formats and it easy for email attachments

This is old news, however it’s a nice and concise post. 10x!

One question though – what about when the categories get mixed up, like capturing Firefox surfing to a Facebook page? It includes white space, text, and photos. PNG gives better quality, but JPEG gives smaller files. So does one have to make a choice between the advnatages/disadvantes of the two? And what about decreasing the compression quality of the JPEG? In general, is there a recommended compression ratio for JPEG that achieves an optimum between small files and good quality?

Nice Article…I Use PNG Formats mostly….

@DanyArcher (#6): Contrary to popular believe IE6 does only not support the alpha-channel transparency feature, everything else of PNG is no problem. See link .

I am afraid this article has missed a point, which happens to be vital. PNG is used for high quality images, while JPEG is used for photos where its lossy compression feature is valued. However, when does one use GIF instead of PNG? The answer is never (well almost never). PNG is superior to GIF under all circumstances, and as such there is no reason to use GIF ever. The exception is when the image is expected to be used on websites where the target audience are expected to use out dated browsers that do not support PNG.

Actually DannyArcher that is a pretty commonly held myth.
Normal PNG images works just fine in IE6.
(several of the images above are in PNG format and the page looks fine in IE)

IE doesn’t support one aspect of PNG: alpha-channel transparencies – which is a shame because it lets you have partially transparent images.
However JPG and GIF can’t do alpha-transparency either – so that is no reason favour them over PNG.

link

Well … duh?! I thought it was pretty obvious to use JPEG for anything with photos in it, and PNG for anything else. I guess the world still needs education ;-)

great article.. thanks for the info..

@JC Denton: which “out dated browsers”?

PNG has been supported in IE since v4 (released in 1997).
If you are trying to write sites for IE3 or less then PNG support is the least of your worries.

It’s worth noting that there are two types of PNG’s; those with 8-bits (and use a palette) and those with 24-bits plus alpha.

Of course alpha is completely useless for screenshots, but 24-bit PNG’s cover the full RGB range, were as 8-bit PNG’s only support 256 colours and usually use some kind of dithering.

However, for big images, the 24-bit PNG’s tend to compress a whole lot better than the 8-bits, plus you get exact colour reproduction.

Personally, I use PNG’s because I’ve always been a fan of the format, but at the highest quality, JPEG compression doesn’t contain enough artifacts to be a problem. So, really its entirely up to what you intend to do with the screenshot.

Personally, filesize doesn’t matter to me, because the screenshots Im taking are for storage purposes and not for reproduction. So, I chose 24-bit PNGs for perfect colour.

PNG images may seem large if saved with default settings (what most apps do). But if you use additional tools like OptiPNG that compress with different settings and choose smallest variant you can often considerably cut size without losing quality.

A lotta times when I try to screen cap a still from a video, the player frame shows up but not the captured video image. Any advice?
Cecil Suzuki
Gardena

Saving JPEGs is also dependent on the quality saved.. The examples used above look to be about 50% quality which will degrade the image quality substantially. I agree with the article pretty much all the way through but the images you have posted are definitely misleading due to the degraded JPEG quality.

>A lotta times when I try to screen cap a still from a video, the player frame shows up but not the captured video image. Any advice?

Computer can’t capture video in screenshot because it isn’t in screen. Is is kinda in another layer (performance issues and such). Some players are able to save frames from video.

I use Image Grabber II (I don’t think it has homepage, google it) which is app for this specific purpose.

It’s quite useful. Sometimes I don’t know why I pick JPG or PNG ( JPG almost times ) . I don’t care much, because its’ size is not damn bad. Well Thanks :)

Useful post. One question. What format to use when converting a group PowerPoint objects and converting them in an image using “paste special”?

they look like shit either way when you use ms paint to save them

Nice post.

Albeit it may sound logic for a person used to do these kind of stuff, it`s not so logic for ordinary people.

Sometimes when I want real good screenshot I select 100% quality JPEG or I go with PNG format even though the PNG is bigger in bytes.

Also, when dealing with big images and transparency, always go with PNG, instead of GIF or JPEG (this one doesn`t support transparency).

What about print? What have people found to have the best resolution for placing a screenshot into a print document? Such as when using InDesign.

I like PNG but recently I turned to JPGs due to file size issues.

as a web designer, I tend to use PNG for things that I absolutely want to look beautiful, like the header of my sites… on the other hand, ads, and icons, and lesser things of that nature, I stick to jpg because people tend not look at those so closely.

So my suggestion, header always PNG, jpg lesser parts of your page, gifs… whats a gif : P

Lastly, having a size-optimizer also helps. Some software lets you input the desired size in KB, and does its best to maintain quality but come close to that number.

Thanks! Now I’ll try something different from .jpg. :-P! Would like to know when to use BMP, though. :-?

Thanks for very valuable information. I always confuse to use whether png, jpg, or gif format for storing the image file.