Screenshoting for blog – choosing image format

There is easy way to make screenshot:

1. press PrintScreen button (near F12)
2. launch Paint
3. paste and save

However this way is bad (as many easy things are).

After starting this blog I had to rethink lots of stuff about making screenshots. It’s not about copy of screen anymore, it’s about making good visual aids for my posts while fitting it in limited screen space and optimizing for fast download speed.

Wide topic so I decided to make series on it, starting with this post on choosing image format.

There is lots of math and smart things behind image formats (end of post has final summary if you want to skip all details). For end user they boil down to few simple characteristics:

• Colors – the more colors format supports the better colorful images look.
• Compression – the better compression is the less size image occupies.
• Loseless/Lossy – after you save image in some formats it may lose some of the colors or details.
• Animation – formats that support this can actually have bunch of images inside of single file and make animation out of them.
• Transparency – some formats allow part of image to be transparent (escaping boring rectangular look :) ).

And as web is current target I must add:

• Browser support – not every browser might digest every single format you throw at it.

Windows Bitmap (BMP)

• Colors – good.
• Compression – none. Image is not compressed at all, resulting size is huge.
• Loseless – what you save is what you get.
• Animation – none.
• Transparency – none.
• Browser support – good.

Don’t ever use it for web. Images saved in BMP are multiply times larger than in any format with some compression.

Joint Photographic Experts Group (JPG, JPEG)

• Colors – good.
• Compression – excellent with lots of tweaking available.
• Lossy – depending on compression chosen there may be very small to very huge loss of quality.
• Animation – none.
• Transparency – none.
• Browser support – excellent.

This format is good choice for photos and such. But it is lossy so unsuitable for saving image while editing and for images with sharp lines and small details (such as screenshots of software). Best for photos and only for final save.

Graphics Interchange Format (GIF)

• Colors – bad. Image can only use palette of any 256 colors.
• Compression – decent. Very dependant on specific image.
• Loselles/Lossy – format is loseless but can’t handle lots of color details.
• Animation – excellent. Most popular and supported format for animation.
• Transparency – excellent. Most used format for transparency.
• Browser support – excellent.

Very old and widely used format. Pretty good for anything except photos and best for animation.

Portable Network Graphics (PNG)

• Colors – excellent.
• Compression – decent by default. Good with use of additional tools (following posts are going to have details).
• Loseless/Lossy – usually described as loseless (which is true). Trying to achieve better compression may come at cost of some details.
• Animation – none. Plans for adding animation exist but it’s all theory at moment.
• Transparency – excellent.
• Browser support – excellent in all modern browsers. Decent in IE6. Bad in anything older.

Excellent format for anything except animation. Adoption is slow because it’s unsupported in old browsers but it’s worth using. Most of images in this blog come in highly compressed PNG.

So these are main formats you encounter online. If you encounter BMP it is going to make exceptionally funny story. It made list only to remind – don’t ever use it online. Rest of formats are good and perfectly usable.

To sum it up:

	Photo	Screenshots	Animation
BMP	Bad	Bad	None
JPG	Good	Bad	None
GIF	Bad	Good	Good
PNG	Good	Good	None

You are asking why I did post on images without single image? Images in such guides are usually misleading reader into using what post author likes (even if it is not intentional). This is not series to promote how I do screenshots, this is series how to learn to do screenshots that fit your blog.

Stay tuned for next post in series that will cover actual process of making screenshot. :)

Next part of series – making a shot.