Problems with Lossy Image Encoding

Monday, March 23rd, 2009 | Business | 2 Comments

On the web we work in many formats.  JPG, SVG, PNG, GIF, SWF … etc.  I know, they’re not all image formats.

Why don’t we just have 1 image type?  Because all images are different of course — and lend themselves to to certain formats.

There are two types of image formats:

  1. Lossy – An image encoding that is lossy means the final output, the encoded image, doesn’t have all of the information the original photo had.  This is why it’s better to keep original’s of photos from your camera, instead of just saving the JPEGs which may be 1/10th the size of a full image
  2. Lossless – This is the opposite of lossy, obviously.  An encoding that is lossless means it contains all of the information of the original image.  Frequently we don’t see much savings when we do a lossless compression.

Why do we use “Lossy” encoding when we have “Lossless” encoding at our fingertips?  It depends on the intent of a photo, but usually the human eye  doesn’t need all of the accurate original information.  For example, does it matter if the color you see in a photo is #236c2f or #236c2b?

Color Comparison

It doesn’t matter to us.  In an image, however, there are 4 shades in between the two colors.  If we can eliminate the need to differentiate between those 2 colors in a green scene, we may save as much as 25% of the file size!  Of course, that would be lossy — but we have dozens of other colors to optimize most likely.  

In Photoshop when we set the “Image Quality” we are merely saying how accurate we want the encoded image to be.

At that we have a few different image formats … some of which are better suited to different environments.

  • JPEG/JPG – Focused on handling “real world” scenes, designed for full-collor or gray-scale natural images.  This is lossy, but can result in extreme image savings with a relatively minimal visual degradation.  JPG doesn’t support transparencies.
  • GIF – Handles solid colors well.  Gif looks at an image and says “45 pixels of green.” This is better than saying “Green. Green. Green. Green. Green. Green …. Green.” 45 times.  Since this is entirely accurate, it is lossless.  The problem with GIF is that it has a limit of 256 colors (which was generous when GIF was invented by CompuServe in 1987).    Frequently when we do GIF encoding we tell it “8 colors” or “16 colors” which boils an image down to 8 or 16 colors.  This is lossy, as we aren’t allowing GIF to use the entire pallette.  It saves space, and usually performs very well.  GIF supports transparency and frame by frame animations.
  • PNG – Portable Network Graphics – Lossy / lossless depends on how it is used.  PNG is very flexible and can support truecolor, grayscale, and palette based colors (a la GIF).  Transparencies are supported additionaly alpha channels are supported (GIF doesn’t support alpha channels).  Frequently PNGs are used for vector assets as they look much cleaner than JPGs for vector assets, and are easier to work with transparancies
  • SVG – Scalable Vector Graphics – an XML based file format that is useful for scalable vector assets.  This means a 10×10 image looks perfect, while the same image blown up to 1000×1000 will also look perfect.  

So which image type should you use?

Normally the difference between JPG and GIF is fairly small, although it can be a dramatic difference if you get it wrong (especially on larger scale web deployments).  

It would help all web developers to learn how to properly use encoded images.  

We should NEVER open up a JPG and re-export it as JPG again.  

Want to know why?  Watch the video below of what happens, over time, when you open up a JPG and re-export it:

Generation Loss from hadto on Vimeo.

Tags: , , , , , , , , , , , ,

Illustrator Tutorial: Create a vector RSS Icon (a la web 2.0)

Thursday, February 19th, 2009 | Business, Tutorials | No Comments

Test IconNot being an artist or designer by default (I do some design by usually by applying formulas — I find a completely deterministic experince, a happier experience), I attempted to learn more about all those pretty graphics we see out there these days.  

I grew up in Photoshop, and have recently been “seeing the light” of Adobe Illustrator.  Don’t get me wrong, I’ve used Illustrator for quite a while, but I’m just now learning all the various tools that I need to know.  

See the icon in this article?  I made it.  All by myself.  Of course with the aid of an excellent tutorial:

Spoon Graphics BlogCreate a Vector RSS Icon with Illustrator

Tags: , , , , , , ,

Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter



prestashop theme

virtuemart template