Original Image (above)

Optimized image (above) at different settings

A quick visual to explain what different optimization settings do for an image.  One of the challenges that web designers face is achieving the ultimate balance between a comforable sized image (kb) and a well optimized image. Some of the optimization options such as png aren't covered in the above visual, since the visual is to give a basic comparison between low-res and hi-res image optimization. Although some of the parts of the image appear crisp when optimized as a Gif (see green fur in first square in the upper right, compared to the pink fur), other parts of the image loose a lot of detail. What I haven't listed in the above image is the size of each segment in kb. The items that are the smallest in kb (on the left hand side) are also the items with the least image data. The pixelation of the first jpg is very obvious and the ideal would be to use either a Gif with 256 colors or a jpg at 80% as an optimization option.