In order to optimize images to achieve the best results, you need to choose the format of bitmap.
In this article, we briefly discuss the popular GIF and JPEG formats, and then analyze PNG and dispel some of the misconceptions about it.
GIF format (Graphics Interchange Format).
Most color images and backgrounds on the web are the files in GIF format. This compact format is famous for the small size of image files. JPEG images contain millions of colors, and the GIF images – no more than 256.
In addition, GIF format supports animation.
GIF format is a palette (also called as “indexed”). It contains a palette index colors, up to 256 and for each pixel of an image has a corresponding color index. If you change the image and save it as GIF, quality won’t be lost.
GIF supports animation, which, in times of Web 1.0, in the form of numerous flickering image, rotating signs, irritated many users. In a much more civilized era of Web 2.0, we still notice an animated “Loading …” while awaiting the results of the following query to update the page.
GIF also supports transparency, which is sort of a Boolean type of transparency. Pixel in the image either completely transparent or completely opaque.
JPEG format (Joint Photographic Experts Group).
JPEG don’t have a limit of 256 colors. That’s why can contain millions of colors, has great compression. This makes it suitable for photos, and in fact, most digital cameras in JPEG.
This is a lossy format, meaning you lose quality with each edit, so it’s best to store intermediate results in a different format if you plan a lot of fixes. However, there are some operations that can be performed without loss of quality. Such as image cropping, rotate or edit meta information, such as comments that are stored in an image file.
JPEG doesn’t support transparency.
When optimizing images in this format for best results set compression to 50%. JPEG compresses graphics of photographic quality and depth of color of better competing formats, such as GIF, and maintains a large degree of accuracy to match colors.
PNG format (Portable Network Graphics).
This format was created specifically for the Internet to drive out the format of GIF. The main advantage of PNG format – it supports 24-bit colors and transparency.
PNG is not a lossy quality, presented in several forms but for practical purposes it is used only in two ways:
- PNG8 and
- full color PNG24.
PNG8, like GIF, is a palette image. The terms “PNG8”, “PNG palette” and “indexed PNG” are used interchangeably.
PNG8 over GIF:
- usually gives a smaller file size;
- supports variable transparency;
- animation is not available
The second type of PNG, full-color PNG, can contain millions of colors, as well as JPEG. You can also sometimes find names as PNG24 or PNG32.
PNG-24 combines the features of JPEG and GIF: supports 24-bit color, preserves transparency and good for half-tones. Image size is usually larger than JPEG. This makes full-color PNG format ideal in cases where the file size doesn’t matter, for example, to screenshots manual or some printed materials.
Let’s make a conclusion, noting that:
- JPEG is the best format for photos.
- GIF is the best format for animation.
- PNG8 – the format for the rest: icons, buttons, backgrounds, graphics.