Choosing Image Quality for your Blog or Website

Below are four versions of the same image.

The image remains the same size in each example, however the file extension changes in each version. I re-sized the image based on the width of my post page and provided information next to it.
Please notice the difference of the file sizes.

Why does this matter? 

The load time for your blog or webpage can be effected. Plus resizing the image for a mobile phone with a Blogger account is limited to 250K.
So the long and the short of it: the slower the load time - the more likely your visitor will yawn and move on.

Image Quality

Okay so now let us look at the quality of the images.
So do you see a big difference?
They vary but not dramatically. Maybe with a magnified glass you can see the difference with this size of image. However, your brain has already filled in all the blanks. It's an image of a sunset on a blog, it does not have to be super high quality for reproduction.

Therefore I would use the JPEG. 

--Please note, I may increase the quality of the jpeg if the image were larger and had more detail, but I more than likely would not go over 30 (medium using Photoshop's feature: save for web and devices).

Keep in Mind:

Large image + higher quality = larger file size.

	Bitmap Image Dimensions: 340w x 511h Size: 509K
	Format: JPEG Dimensions: 340w x 511h Size: 15.61K Settings: Quality is 15, Non-Progressive, Optimized on
	Format: GIF Dimensions: 340w x 511h Size: 67.8K Settings: Selective, 64 Colors, 88% Diffusion Dither, Transparency on, No Transparency Dither, Non-Interlaced, 0% Web Snap
	Format: PNG-8 Dimensions: 340w x 511h Size: 81.12K Settings: Selective, 128 Colors, 88% Diffusion Dither, Transparency on, No Transparency Dither, Non-Interlaced, 0% Web Snap