png

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: , , , , , , , , , , , ,

How do I use transparent PNGs in IE6: Using AlphaImageLoader

Tuesday, March 10th, 2009 | Tutorials | No Comments

Internet Explorer is a tough beast.  It was very popular years ago.  Unfortunately, it’s still in use in out there.

This site, www.seangw.com, has a fairly technical crowd.  We still see approximately 3% of our visits from IE6 (Firefox is the most popular at 64%, then IE7 at 14%, Safari at 10%, then Chrome at 5%).  

I don’t believe IE6 should be supported anymore.  In many jobs, that isn’t our decision to make.  We can recommend ignoring IE6 specific issues, but should do so intelligently:

  • Identify the current IE6 audience (knowing it will probably decrease over time)
  • Approximate the cost of supporting IE6 (depends on what you are trying to do)
  • Present the pertinent information to the client, and let them make an informed decision
  • You should tell the client what you feel, but make sure they understand the difference between emotion and facts

Note: If your client makes $1,000,000 online every year, ignoring that minor 3% audience means possibly ignoring about $30,000 in revenue.  Math is enlightening sometimes.

At that, you are here, and STILL want to do transparent PNGs in IE6.  

How to implement transparent PNGs in IE6
It’s pretty standard the method for implementing transparent PNGs in IE6 by now.  

This method is for implementations in CSS (you are using CSS, aren’t you?).  

Frequently I find myself making a quick browser detect for IE6 (since there are oh so many issues that only affect IE6).  I use basic IE conditional comments:

<body>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />

<!-- &#91;if lte IE 6&#93;>
<link rel="stylesheet" href="styleIE6.css" type="text/css" />
< !&#91;endif&#93; -->
</head>
<body>
</body>
</html>

There you go, now when you setup your styles in style.css and realize they don’t work in ie6, edit them in styleIE6.css to get them working again.

Assuming you defined a logo in style.css as follows:

#logo {
  width: 300px; 
  height: 150px;
  background: url(images/logo.png) no-repeat left top;
}

You will find that the PNG does NOT work in IE6.

The fix is easy, we tell IE6 to use the Microsoft DXImageTransform AlphaImageLoader to render the PNG. So we add an IE6 specific change ot the styleIE6.css file:

#logo {
  background: transparent;
  filter: progid:DXImageTransform:Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
}

There you go. It should work now.

The background: transparent thing tells the browser to ignore the originally defined background used in the original CSS document.

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


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template