Web Graphics & Compression

Final Lossy Compression JPG Image

You can see signs of artifacts which is especially noticeable in the sky shown as coarse boundary box or cluster of pixels.  This is  caused by a lossy compression algorithm which discards data to reduce the size of the file.

artifacts
Jpeg compression artifacts

 

The following image is the result of a JPG image saved 10 times:

360wk12compress-lossy

JPG Example

360wk12export1

40% resize, 60% compression

360wk12export40-60

10% resize, 50% compression

360wk12export10-50

60% resize, 50% compression

360wk12export60-50

 

Final for web

JPG is good for photos and images with many gradations of color.  However some edge detail may look fuzzy.

360wk12export-final

GIF Example

Original GIF360wk12exportOrg

64 colors

360wk12export64color

 

16 colors, 60% dither

360wk12export16color60dither

 

final gif

GIF is best for line image with solid colors, does not do well with gradients.  However it does support transparencies.

360wk12export-final

PNG Example

25%, 8 colors360wk12export25p8color

 

 25%, 32 colors360wk12export25p32color64 colors

360wk12export64color

 

 

8 colors, 30% dither360wk12export8color30dither

 Final PNG

PNG format give you the best of both JPG and GIF because it supports full alpha transparency and is lossless compression.  Good for line image with gradients.

360wk12export-final

 

Advertisements

Leave a comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s