Common images formats are GIF, JPG and PNG. There is also the WebP format, introduced later. What format should you use for your website and where ? To answer that question, read this article.
You should NOT use GIF today, except for animation (in that case, use sober animations). In all others cases, it can be converted to PNG, remplaced by CSS Sprites methods (if your GIF are very simples graphics) encoded in PNG, or can be converted to base64 (base64 code can be compressed by GZIP).
It's because you compare GIF with a TrueColor PNG. Convert your GIF files with ScriptPNG, you should get smaller files than GIF files. If your GIF is smaller, it's because you're trying to convert a file with a very low definition, with few colors. In that case, try to use CSS Sprites to combine multiple GIF images to one single PNG. You'll get a smaller file, and will save HTTP requests.
When you save a graphic file to GIF, your software will reduce the number of colors to 256. If the input image have more than colors than 256 and if you save it to PNG, TrueColor encoding is used (and colors are not reduced). Always save your PNG to PNG-8 format (Paletted), or convert your GIF to PNG to compare GIF and PNG correctly.
| GIF compared to PNG24 | PNG-8 | |
|
|
|
| GIF (256 colors) | PNG24 (6249 colors) | PNG-8 (256 colors) |
| 7353 Bytes | 17238 Bytes | 5924 Bytes |
On small graphics files, GIF can be better cause to the PNG ahead. But in Sprites usage, PNG should be better. All GIF in this case are smallest than all PNG, but in a combined one single file, PNG is better.
| Smaller GIF than PNG | CSS Sprites GIF and PNG | ||
|
|
 |
 |
| Five (5) HTTP requests | Five (5) HTTP requests | One (1) HTTP request | One (1) HTTP request |
| Five (5) GIF Files | Five (5) PNG Files | Sprites GIF | Sprites PNG |
| 577 Bytes | 797 Bytes | 523 Bytes | 470 Bytes |
In fact, PNG-8 binary
transparency is supported in Internet Explorer since version 5. Try to convert your GIF to PNG with ScriptPNG. You'll get an equivalent transparency, but with smaller file in PNG.
| GIF Binary Transparency | PNG-8 Binary Transparency |
 |
 |
| 11868 Bytes | 9391 Bytes |
Internet Explorer 6 -or precedent version- only supports PNG-8 transparency with alpha values equal to 0 or 255 (that's exactly what GIF does). It does not support Alpha Channel (used by PNG32, or GrayScale+Alpha), tRNS chunks with TrueColor / GrayScale, or PNG-8 translucidity (values which are differents than 0 or 255).
| PNG-8 Transparency | PNG-8 Translucidity |
|
 |
| IE6 Support | Not supported by IE6 |
Some software can store additional informations to PNG ahead. Some of them are storing the gAMA chunk, which specify a new value for gamma. Those values are interpreted by browsers, that's why you can get differents colors
in the restitution.
| GIF | PNG-8 with gAMA | PNG-8 without gAMA |
 |
 |
 |
| Original Restitution | Modified Restitution | Original Restitution |
To solve that problem, just optimize them with a tool which can delete all uneccessary chunks. ScriptPNG can do this, whatever the option choosen.
Back in old days, animated GIF were used a lot, as WYSIWYG editors. Today, Web has evolved. Animated GIF are considered as annoying, and are not recommanded for credibility or professionnal designs. If you want to use it, try to use a very soft animation.
| GIF | PNG-8 Animated (aPNG) |
 |
 |
| 3199 Bytes | 2372 Bytes |
PNG can be animated with aPNG format (non official), but you can see it only if your browser is compatible. To genere this format, just drag-and-drop your animated GIF to ScriptPNG. It will give you an equivalent aPNG. If you want to make it compatible with a maximum of browsers, choose GIF.
You can read everywhere you should use JPEG for photographies. It's true, JPEG is better than PNG to store those pictures, so do not use a 100% PNG
Website, and choose JPEG for that stuff.
| PNG | JPEG |
 |
 |
| 256 Colors | 256 Colors |
| 38238 Bytes | 8262 Bytes |
Encoded in GIF, we'll get a 96640 Bytes file, PNG is 38238 Bytes thanks to the GrayScale storage. But as you can see, PNG is not as good as JPEG, very efficient on photographies.
Sometimes you can use PNG32 (RGB+Alpha Channel) for your website. But if the background is a solid color, check if PNG transparency is necessary. Conserve the PNG if you want to change the background in the future.
| PNG32 | JPEG |
 |
 |
| 65420 Bytes | 18190 Bytes |
| Not Supported by IE6 | IE6 Support |
In this example, PNG is integrated to a fixed background (which is #fff). In that condition, PNG could be converted to JPG with integrated background to save space and enhance IE6 compatibility.
You can use that method to simule transparency with JPG, without using any ressources, and without using a real transparency method. In this example, PNG is very heavy because it contains in reality two representation in one single image. On mouse over it, it will change to transparent / translucid.
| Sprites PNG32 | Sprites JPEG | Sprites JPEG (Quality 80) |
| My Over Link with Sprites! | My Over Link with Sprites! | My Over Link with Sprites! |
| 129283 Bytes | 30365 Bytes | 16027 Bytes |
| Not Supported by IE6 | IE6 Support | IE6 Support |
JPG is not transparent or translucid. It's just the representation of PNG (captured) with integrated background. It gives the same effect than PNG, and saves a lot of Bytes.
This method allows you to combine JPG and PNG to create a PNG32 (client side) in a very fast process. Server loads the JPG file, and load the PNG image used as Alpha Channel base64 code.
| PNG32 | JPEG |
|
 |
| 65420 Bytes | 13436 Bytes |
To learn more about this hack, read Fake Transparency with JPG. This example has been performed by ScriptRST with 7 JPG and Alpha option. JpgQuality option was set to 90, and AlphaQuality to 100.
PNG can be used when JPG is not better. PNG is good for gradient colors, large area of solid colors, and simple graphics without artifacts. Unlike JPG, PNG is a very complex format with lot of characteristics which affects compression ratio :
Most of the time, PNG32 or JPG can be optimized lossy, meaning the restitued image is different as original. But those differences are often not visibles for visitors, and sometimes hardly visibles even if you check the image. To do a quick but efficient lossy optimization, try to use my Fast Image Optimizer tool.
Fast Image Optimizer can be tweaked. Just edit the FastIO.cmd file, and you can modify the value corresponding to what you want to do. Please note FastIO is not as powerful than ScriptPNG, which can optimize your PNG further after FastIO pass.
Fast Image Optimizer can reduce the number of colors in a PNG32 file with the PngQuality option. Default value is 70. When you drag-and-drop a PNG32 file on FastIO, it will reduce the number of colors in the RGB area and then will run a compression routine.
| Original | FastIO PngQuality 70 | FastIO PngQuality 40 |
|
 |
 |
| 24661 Colors | 9470 Colors | 4656 Colors |
| 65420 Bytes | 45394 Bytes | 35462 Bytes |
Most radical optimization than reducing the number of colors, more faster and more efficient, it's the PNG32 conversion to PNG-8 with alpha values. FastIO can do that by turning to 1 the option ConvertToPNG8. PNG-8 is using tRNS chunck to set transparency, giving the impression there is an Alpha Channel.
| Original | FastIO ConvertToPNG8 1 |
 |
 |
| PNG32 | PNG-8 |
| 13232 Colors | 248 Colors |
| 46890 Bytes | 12648 Bytes |
FastIO can convert your JPG by reducing the quality. You can set the quality with JpgQuality option. Default option is 80. It will reduce the output image to quality 80, then optimize it with several lossless JPG optimization. It will give you best size / quality ratio than your original files.
| Original JPEG | FastIO (Quality 80) |
 |
 |
| 256 Colors | 256 Colors |
| 76563 Bytes | 12255 Bytes |
