Using the right Image formats

Image formats come in different flavors, .gif, .jpg and others. Both make ideal formats for two different purposes. .jpg is ideal for photo type images with a lot of color. It compresses very well producing a very small file size and keeping much of the original detail making it ideal for use on the web. Most image applications will have a sliding scale so you can adjust the quality, this scale is generally on a 1 to 100 scale with 100 being the highest quality. In general 90 will produce a nearly identical image. 75 is usually used for web images. The lower you go on the scale the smaller the file you will get but this also lowers the quality of the image. The one fault with .jpg is that due to the way it compresses artifact can appear especially on edges of contrasting color like text and this issue is exacerbated when when you slide the scale low. Here's a screenshot of this page saved at 90%, note how well the image in the upper left is reproduced. the text looks pretty good as well however the file size is 250 kilobytes:


Here's the same shot as 50% note the text gets halos around it but the file size has dropped to 124 kilobytes:



This is where .gif enters the picture which is an often overlooked format. .gif is an ideal format for images that do not require a lot of color such as scanned text documents or screenshots of web pages. If for example you took a screenshot the text it will be preserved perfectly and it will also produce a much smaller file if the image has a lot of large areas with the same color. Note the crisp edges on the text but the image in the upper left now has a layered effect, this is because gif only utilizes 256 colors and I have not used dithering. the file size is similar to the .jpg saved at 50%

Example? That shouldn't happen AFAIK. The original image is exactly what is uploaded so I really have no control over that, it is checked to make sure its valid file though. The thumbnails are generated byt the forum.