My favourite is when people paste a screenshot into a Word document, save the word document, then send you the word document. Way to make me click more!

tommertron

Very enlightenment info

Thomasmrph

Excellent article. Another good tip is, if you use Paint to paste and save your screen shots, it will be even more beneficial to use PNG since Paint heavily compresses JPGs by default and you can't control the ratio.

The_Gas_Man

Here's what I've learned through my experiences editing Wikipedia:

If it is a photo or part of it contains a photo, use JPG. It has the most efficient algorithm for compressing complex color information. However, if it's not a photo, it may still be smaller, but the compression will be more obvious.

If you have a screenshot or a non-photographic image, usually use PNG. If there aren't many colors and there are stretches of the same color, PNG will work. It's a lossless format (or nearly lossless; correct me if I'm wrong), so it'll always look great, but if it's a photo with lots of data, it'll be huge. In addition, PNG supports a transparency layer.

In my experience, only use GIF if you must, and that is when there is animation involved. It's not lossless (like PNG) and its transparency doesn't work nearly as well as PNG (with GIF, pixels are either transparent or a color, in PNG there are degrees of both). The files may be smaller, but it's not so much smaller that I'd like to have reduced quality.

NEVER use BMP. I mean, most people see that as obvious, but I figured I'd mention it. Yeah, it's lossless, but so is PNG, and BMP doesn't have any compression, so your files are HUGE.

There's also SVG, which is to an image as a MIDI is to sound. It's not technically an image, but if you have an image with many straight lines and few colors, you can recreate it as an SVG. It can also be scaled as large as you want without it looking any worse. It also supports transparency and is beginning to support animation, but because of its nature, it's not yet as popular or widely supported as the other formats.

I'm pretty sure my facts are correct, but, of course, feel free to correct me if I'm wrong. Oh, and these are just my opinions as to what should be used when. Check Wikipedia (my main resource) for information and examples.

Platypus Man

I disagree with the article. Never use GIF over PNG. PNG was made to replace GIF and as such is superior. It's a matter of PNG vs JPEG, i.e. quality vs size (never PNG vs GIF).

ICEBreaker

Here's a great page explaining the basics of PNG in layman's terms. Once you go through the page (or just look at the illustrative photos) you would have gone a long way towards understanding photo formats, and I think you'll decide to save everything in PNG from this point onwards.

[nuwen.net]

ICEBreaker

@tommertron: That's the easiest way for the average Windows user to save a screenshot, unfortunately. I wish more IT departments would start putting a user-friendly screenshot utility on machines instead of WinZip.

Greg P

Summary:
[1] JPEG is for photos and large images
[2] GIF is for simple small pictures and text
[3] PNG is the best for everything, unless small size is more important than quality, then go with JPEG

Isn't that obvious? Not as informative as I would have imagined.

ICEBreaker

@L.Rawlins

I am one of them :) And he is right, Paint does compress PNGs better than JPGs. So to date, PNGs have been my choice over JPGs. But then I've never had to take screenshots of videos.

mskadu

The minor space saving from png to jpgeg is a MOOT POINT. With todays internet speed, you don't have to worry about keeping these images small. This article may have been worth something back in 1996.

monkeyboy

I choose PNG or JPEG depending on how many colors there are on the picture. More colors make PNG less efficient (ie closer to an uncompressed BMP). Anything with a gazillion colors will go as JPEG, as the quality loss isn't significant most of the time.

Alejandro

Hmm, am I the only one saying "Well ... duh!" on this one? Isn't it obvious that you should use JPEG for anything that has photographs in it, and PNG for any other screenshot (because of the sharp edges and contrasts?)

Also, the excerpt in this post from the article is *very* misleading (actually, it's down right wrong!). The article *does not* say 'Always use JPEG'; instead, it says 'If you have pictures in your screenshots, you should always use JPEG (otherwise use PNG)'.

Shame on you Lifehacker to replace key parts of articles with '...', thus changing the article completely!

Remko Tronçon

Good article , I'd only use gif / jpg if i were stuck behind a slow connection, png is much "smoother/nicer" and todays 90kb isn't much, and it's also nice to have a "non blury" screenshot if you have to look at it for a while (jpg when "too" compressed looks awfull IMO). I've never used bmp either, I was even shocked to see some use/recommend that as the default format for desktop wallpapers, guess we all have our habbits

julien

@The_Gas_Man: If you use Paint to paste, edit and save your screenshots then this article is already falling on deaf ears!

[www.getpaint.net]

L.Rawlins

Oops, I retract my previous statement about Lifehacker incorrectly citing articles. I only read the quote, didn't read the rest of the article. Truly sorry about that. I still find it a bit misleading to only cite that part of the article though ;-)

Remko Tronçon

The key here is not about file size; these documents are insignificant with any of the mentioned formats. The primary concern for most people that work on these images is that PNG is LOSSLESS and supports transparency. (see [en.wikipedia.org])
The real damning fact is that JPGs are LOSSY (not my word), and worse yet, progressively lossy; each time an image is saved it suffers the loss of data through the compression again. Most better-quality cameras use a raw format instead of jpg specifically because of this.

amishsniper

Tip for Outlook users:

If you paste a screenprint into a HTML formatted mail message, the image will be sent resource-friendly JPG (less than 100k.)

However, if you paste a screenprint into a Rich Text formatted message the image will be sent as a mailbox-crushing BMP (about 2 MB.) I'm not aware of any workaround built into Outlook to fix this.

If you have to use Rich Text (calendar and task items are all Rich Text, for instance) first save the screenprint as an image file using your tool of choice and then attach it. (As noted above, Word is NOT an image file!)

Added tip - if you're sending a new or reply message, check the top of the message to confirm the format (HTML, Rich Text, Plain Text.)

RevWaldo

I've found that IrfanView works great for dealing with screenshots as it will grab right from the clipboard. So you can hit "Print Screen" or "Alt+Print Screen" and then open Irfanview and hit ctrl+v (or paste button) to have it imported. Then you can resize, quick edit, and save it in any format you like. Can even control the compression level on PNG and JPEG.

Insomnic

@Insomnic: If you're using Irfanview, it has a built-in screenshot capture utility that gives you several options for what you want to capture. :) No need to use the PrtScrn/Clipboard method at all.

PapaGamer

@Insomnic: Irfanview is a fantastic little program.

Magnakai Haaskivi

I try 'em all and see which comes out the smallest for web use. JPEG may be smallest for photos, but I've found PNG makes for smaller files when making line drawings in Paint, for ex. If you constantly revise a graphic file, I find BMP best. If you use a lossy format, the picture gets fuzzier with each edit and save.

Capone

@Remko Tronçon: I'm not sure you characterized that well, "contains a photograph" could mean a small [photographic] icon plus a lot of solid colors and text. Solid colors and text look HORRIBLE in JPG files unless you waste a lot of space on bumping up the quality. I'd say use JPG only if you're doing something thats ENTIRELY photographic.

Harlan

Pardon me.. again I have to stress on ac'tivAid: It has one of the most comprehensive screenShot functions available! :D
Try it! Its completely free and open source!

The ac'tivAid-extension is called ScreenShots and after enabling it you have it available on the Print-key as usual. But with a lot of improvements: Save to file if wanted. use JPG, PNG, Gif, tif or even bmp if you like. Start with a programm (like paint or ftp-upload script..) embed cursor...

ewerybody

@L.Rawlins:
@The_Gas_Man: If you use Paint to paste, edit and save your screenshots then this article is already falling on deaf ears!
[www.getpaint.net]

Paint provides all the features I need, and this article has absolutely nothing to do with what program you end up pasting your screenshot into. I'm happy that open source software makes you feel empowered, but keep it to yourself.

The_Gas_Man

I just take a screenshot and paste it into paint, then save it as a JPEG.

benjgvps

@ICEBreaker: I don't agree with the article myself either.

I totally agree with what ICEBreaker mentioned on his summary.

chareverie

With FastStone Image Viewer, just alt-PrintScreen, then open (or switch to FastStone) Ctrl-V to paste the image, and have full editing capabilities. Better yet, there are many screen capture options built right in that eliminate cropping and most editing. I usually resize (keeping 72 dpi) and save all to jpeg, since size is very important in a graphic intensive web page. I may try to compare PNG on some pages with these ideas. FastStone is my everyday favorite for 95% of all graphic work since they added the draw and text features!

deanes

As a digital scrapbooker, this was a "duh" article for me, but there was a time when I wondered what was the difference, so I'm sure it's helpful to many! And I'm definitely sending it on to family members.

Now, how about an article of the etiquette of scaling DOWN your photos when sending them via email. The inlaws still think I need to see the original photo to get the idea of what they are talking about (and these are computer literate people too!).

wickedcupofjoe

PNG transparency is not well supported by some legacy web browsers, so using GIF is often the appropriate solution.

And for those of you who want to say, "Who uses legacy web browsers?" I'll respond with, "Most people who are using old computers." The vast majority of consumers don't upgrade operating systems or browsers.

As of June 2008, 37% of people on the Internet are using Internet Explorer 6.0 (source: TheCounter.com) which doesn't handle PNG transparency correctly.

Deprong Mori

It is very ignorant to suggest that any single format is superior to any other single format. It changes based on size, content, and usage.

GIF and PNG are lossless and both support transparency however PNG has weak transparency support in IE5.5+ and only with a script up till IE7.

GIF can be animated where as PNG can not unless you use the none official APNG standard. GIF also has a 256 colors limitation. They can be any 256 colors but 256 distinct colors in the pallet is the limitation.

It's never a good idea to use JPEG for images smaller then around 50x50 because JPEG has an overhead of approx 20kb regardless of image size so you'll actually lose quality but take up more hard drive space in comparison to PNG which can take just bytes when there are only tens of pixels in the image.

Also for web developers it's a good idea to create tiled images and place them at the tile for icons in CSS.

DigitalisAkujin

I always used a simple rule
If it's a photo, i use JPEG
For screenshot i always use PNG

I almost never use GIFs

Pasha

You can use GIFs when the colors of the image are not gradient.
GIF images reduce the file size in this manner.

Albaraha

Dont use GIFs, your supporting an evil 90s era teleco.

CompuServ's actions with GIF are what caused PNG to be created in the first place.

On my website, the first thing i do when i get a picture on it is open up the terminal, and convert it to png/jpg.

If you have shell access to a webhost, just do this in the shell

convert image1.gif image1.png

Presto, no more craptactular gif.
If you want to free up some space, just do rm image1.gif.

Anyone who is experienced with unix knows these, but some people do not.

Paradox460

agree with a lot of commenters here. e.g. pasha. Screenshots typically have smaller size if saved as png. jpg is better at gradient handling etc. But screenshots don't always have gradients and, on an average a png of a screenshot is smaller than jpg.

amrich

There are specific reasons to use either format, it's not as cut and dry as all this.

-For images comprised of mostly flat areas of color (no gradation) GIF is best for quality/filesize ratio.

-For images with lots of gradients (photos etc) JPEG or PNG is best, the important difference being this: JPEG's utilize lossy compression to get their remarkable small filesizes so each successive time you save the same file you lose some image quality. After a few saves the image looks blurry and washed out. If you only intend to save the image once or twice and if you don't intend to resize the image larger then JPEG format is just fine. Otherwise stick to PNG's which are lossless and retain FULL image quality no matter how many times you save.

-Transparency is another quality only GIF's and PNG's have, the difference being that GIF's can only store transparency information in binary format, 0's and 1's...thus a pixel can only be 0 (transparent) or 1 (opaque) meaning no gradual transparency. PNG's on the other hand allow smoother gradated transparencies.

Pro's and cons for each format, it's a matter of knowing exactly what you want to use your file for. Personally I always retain one master copy as a PNG or PSD file and save out to JPEG for web use. If I need to make edits or re-save I always go back to the PNG and make whatever changes I want before saving to JPEG.

gfxmaven

@amrich:

JPEG's do not "handle gradients better than PNG". They look identical on a JPEG's FIRST save. Every successive save after that and the JPEG will begin to look progressively worse due to it's lossy compression scheme. PNG's are also almost NEVER smaller than JPEG's..because they retain full pixel data they are almost always larger than JPEGS which discard data with each save. See my post above.

gfxmaven

For those who love to tweak images to size/quality perfection, Photoshop's "Save For Web" feature is invaluable. You can change formats, compression ratios, number of colors, blur, etc. live and see them all side-by-side.

longbourne

The comments have evolved away from the starting topic of saving screen capture images...but who cares?! :D

Outside of the screen capture department, I like PNG for the fact that I use Flash and Fireworks, and Flash and Fireworks saves vector data inside the PNG format, which vastly keeps the size of files down to itsy-bitsy sizes compared to JPEG.

gerrrg

One thing that makes a huge difference is the number of discrete colors in the image. For screen captures of Windows programs, you can usually lower the color depth to 256 colors or less without any appreciable loss in quality. Combine that with the PNG format's built-in lossless compression, and you will get much smaller files than with JPEG, and better quality as well. Obviously, this works much better for images that have large expanses of solid colors, such as screen captures, rather than for photographs or pictures with tons of gradients.

MichelangeloAntelope

I might have go for this tip back in 1995, but nowadays with the harddrive capacities and bandwith speed that actual and upcoming technologies offer i rather go for the best format that meets my needs, so i mostly go for png when i take screenshots.

RompeRatones