background preloader

Clever PNG Optimization Techniques - Smashing Magazine

Clever PNG Optimization Techniques - Smashing Magazine
Advertisement As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It’s a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG’s (PNG-24 in Photoshop), which doesn’t have any. This post describes some techniques that may help you optimize your PNG-images. You may want to take a look at the following related articles: Clever JPEG Optimization Techniques1 The boring part Before we dive into image optimization techniques, we have to learn some technical details about the PNG format. PNG was developed as an open-source replacement of the proprietary GIF format. Scanline filtering Here is how it works. As you can see, all identical colors spread vertically, not horizontally. Number 2 before each line represents applied filter, which is “Up” in this case. Image type

Make PNG transparency work in Internet Explorer | Web Tricks Directly inserting images in PNG format with transparency will leave you with a white spot when display in Internet Explorer. It makes your image looks ugly and this is really the last thing any web designer or webmaster would want on their website. Here’s a solution on how to solve this white spot and let the PNG transparency recovers. Let’s take a look at the difference of PNG images (with transparency) on both major browsers: Mozilla Firefox and Internet Explorer 6 Mozilla Firefox PNG with transparency blends in nicely with no problem Internet Explorer 6.0 Internet Explorer does not turn your transparency transparent, thus leaving you with a big ugly white spot. Solution Create a container to store your image. Next, create a <style> if you dont have one. The CSS codes above displays your PNG image in a <div>. Your IE should now give you a perfect blend like the picture below. Download working example. Author: Hongkiat.com

Making Internet Explorer use PNG Alpha transparency Deprecated This fix is deprecated and is no longer supported (meaning that I will not help you to get it working with your pages). It was only written to fill the gap while waiting for Internet Explorer to implement PNG alpha. Instead of using this hack, users of IE 6 should be encouraged to upgrade to IE 7. What is PNG? PNG is an image format that combines the best features of GIF and JPG/JPEG, the traditional and most common image formats used on the World Wide Web. JPEG format approximates the original picture, so the quality can be quite low, but it allows the images to be significantly smaller in file size than the equivalent raw image (pixmap or Windows Bitmap). What is wrong with the PNG format? Well, ... nothing. But this is what it should show: 'But you said you could make it work!' And I can! Using these filters this way means that no JavaScript is required, no browser detects are required and no conditional comments are required. (src='varyAlpha.png') To this: Result:

PNG Transparency in Internet Explorer - Solutions by PC Magazine Hats off to Bob Osola for simplifying a Microsoft workaround for a problem that aggravates Web developers: Internet Explorer's faulty handling of PNG image transparency ( ). The Portable Network Graphic (PNG) image format was developed by the World Wide Web Consortium as a better GIF than GIF many years ago, in response to Unisys's plans to exercise its intellectual-property rights over the format. Though Internet Explorer and Netscape have long included support for PNGs, the format hasn't been a runaway success, largely because IE doesn't always handle PNG graphics correctly. Web developers have complained for years about the problems. Microsoft's AlphaImageLoader uses DirectX components to produce the same transparency effect ( ). <DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400; filter:progid:DXImageTransform. Method='scale');" >

Related: