Basic understanding of web formats

There are only three graphic file formats that are used on the web: JPEG, GIF and PNG.

The most important thing to understand is when to use each type. JPEG, GIF and PNG use very different forms of encoding and compression of the data that give them quite different uses.

GIF and PNG files work best on text, text-art, cartoons, drawings, ilustrations, any art which needs transparent backgrounds.
GIF is limited in the total number of colors to 256 or less. PNG is more advanced and can handle true color images, but doing so significantly increases file size.

JPEG on the other hand works best on photographs. JPEG does not handle sharp edges and can produce artifacts due to his lossy compression.

But let’s learn more about each format.

GIF (Graphics Interchange Format)

The Graphics Interchange Format (GIF) is an 8-bit-per-pixel bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.

The format uses a palette of up to 256 distinct colors from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for more simple images such as graphics or logos with solid areas of color.

GIF images are compressed using the Lempel-Ziv-Welch (LZW) lossless data compression technique to reduce the file size without degrading the visual quality. This compression technique was patented in 1985. Controversy over the licensing agreement between the patent holder, Unisys, and CompuServe in 1994 inspired the development of the Portable Network Graphics (PNG) standard; since then all the relevant patents have expired.
[read more…]

JPEG (Joint Photographic Expert Group Image)

In computing, JPEG (pronounced JAY-peg; IPA: /ˈdʒeɪpɛɡ/) is a commonly used method of compression for photographic images. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10 to 1 compression with little perceivable loss in image quality.

JPEG is the most common image format used by digital cameras and other photographic image capture devices, and is the most common format for storing and transmitting photographic images on the World Wide Web.
[read more…]

Portable Network Graphics (PNG)

Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace the GIF format, as an image-file format not requiring a patent license. It is pronounced /ˈpɪŋ/ ping[1] or spelled out as P-N-G

PNG supports palette-based, greyscale or RGB images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).
[read more…]

Rules of thumb

Photos

Definetely use JPEG for web or other media that needs the smallest possible filesize while preserving the most of the quality.
Use true color PNG if you want maximum image quality. Unlike standard JPEG images, PNG compression involves no loss of image data, so there is no noise or artifacts.

Charts and diagrams, cartoons, ilustrations

For true color images containing text and sharp color transitions 24 bit PNG could turn out smaller, and will certainly provide the best quality. You can try JPEG, turn off chroma subsampling and play with a quality greater than 75. In some cases these JPEGs will be smaller.

For images with few colors (fewer than 256) try to decrease the number of colors using quantization and save as PNG. In some rare cases GIF is doing better in such situations, so try it sometimes.

For images with less than 64 colors don’t even try to use JPEG because PNG or GIF always works better.

Transparent images

Only GIF and PNG support transparency. For JPEG you can fill the desired region with the background color using a flood-fill tool and your favourite graphics editing program. This is recommended for photos with masked areas.

Don’t use alpha (variable) transparency if you don’t need it. Apply the same optimization techniques explained earlier.
Alpha transparency does not work in Internet Explorer 5.5 and 6. There is a workaround for webdevelopers though.

Animations

The only format understood nativelly by browsers to support animation is GIF.
It is limited though to 256 colors.

PNG format was originally devised at a time when there was no browser support for GIF animation, so animation was not included in the specification. Later, a separate animation format was devised with a whole host of advanced features – Multiple-image Network Graphics, or MNG. As it turned out, however, the arrival of other animation technologies such as Macromedia Flash took attention away from MNG format. More information about MNG can be found here.

The lack of sophistication in GIF animation can be annoying to users. Research into user reactions has shown that some users cover animations with one hand as they read the text on a page.

Posted in Optimization Tips
3 comments on “Basic understanding of web formats
  1. Hi Lucian, we use your software to help with our websites to reduce load-time and increase traffic conversion rates as visitors will spend more time on a website that doesn’t take ages to load! I wanted to give you a tip, I was looking for the guide on the Batch Image Optimizer, I noticed it wasn’t online and only within the software. I think it would help you attract new traffic if you also duplicated what is in the help file within the program and placed this here online 😉

  2. What a great article! I have tried to come up with a list before to share with my team but this is absolutely perfect. Thank you!

  3. Edmund says:

    To be the truth, I never really know what the difference among three type of graphics until reading this article. This is really helpful, and starting from now on, I will be more careful in determining the graphical type. Thanks…

Leave a Reply

Your email address will not be published. Required fields are marked *

*