Image Formats

There are two major types of image formats.

The ** bitmap images ** also called Raster, which are made up of many colored dots that make up a photograph or drawing.

The vector images are made up of instructions that determine the appearance of objects such as lines, circles, Bézier curves, etc. with which images are formed.

Difference between a bitmap image (Raster) and a vector image (SVG).

Yug, CC BY-SA 2.5, via Wikimedia Commons.

Color schemes

There are two major color schemes, additive and subtractive. Each of them has a different field of application and it is convenient to use each one in its field, to obtain the best results.

RGB additive color scheme

This scheme is called additive because it generates the different colors by adding light sources.

The primary colors from which all others are formed are red (Red), green (Green) and blue (Blue). From those three colors comes the name RGB.

This color scheme is used on monitors, smartphone screens, tablets, televisions, projectors, etc.

This scheme works based on the fact that the human eye has three color receptors (red, green and blue) that it uses to detect all the colors of the rainbow from a combination of all of them. Thus our eye perceives the color yellow as a combination of red light plus green light.

Secondary colors are formed by adding two primary colors:

Red + Green = Yellow

Red + Blue = Magenta

Green + Blue = Cyan

Red + Green + Blue = White

Absence of color = Black

CMYK subtractive color scheme

This scheme is called subtractive because it generates the different colors by reflecting white light, which contains all colors, except for some color that is subtracted with an ink. For example, yellow ink will reflect all the white light that reaches it, except for the blue color, which is subtracted or absorbed inside the ink.

The primary colors from which all others are formed are cyan (Cyan), magenta (Magent), yellow (Yellow) and black (Key) . If the inks were perfect, they could achieve black by adding them all together (CMY) but in practice it is easier and looks darker when using a specific ink to achieve black.

Secondary colors are obtained by mixing inks and therefore absorbing more than one color. Of the three colors that white light has (red, green and blue), the yellow ink absorbs blue and the cyan ink absorbs red. By mixing yellow and cyan inks, blue and red are absorbed, leaving only green as the final result.

This scheme is used for printing magazines, books, brochures, posters and all kinds of printing works. It is also the basis for color printers and oil paints, watercolours, crayons, etc.

Secondary colors are formed by adding two primary colors:

Cyan + Magenta = Blue

Cyan + Yellow = Green

Magenta + Yellow = Red

Cyan + Magenta + Yellow = Black

Absence of color = White

Color depth

Color depth refers to the number of distinct colors an image can display. The lowest color depth is that of an image that only works with 2 colors (black and white). The greatest color depth is that of an image that works with 16 bits for each of the three RGB tones. This results in a total of 281 billion different colors. Jpeg photographs (the most common) use a color depth of 8 bits for each RGB tone, giving a result of 16 million different colors.

1-bit color depth

2 colors.

This color depth is used for faxing, storing text, or simple drawings. The advantage it presents is that it takes up very little space.

4-bit color depth

16 colors.

8 bit gray color depth

256 shades of gray.

8 bit color depth

256 colors.

8-bit RGB color depth

16 million colors (256 shades of red, green and blue).

Color depth > 8 bit RGB

12 bit RGB = 68 billion colors (4096 shades of red, green and blue).

14 bit RGB = 4 billion colors (16384 shades of red, green and blue)

16 bit RGB = 281 billion colors (65536 shades of red, green and blue).

Schemes with a greater number of colors than 8 bit RGB do not present appreciable differences on a screen.

When an image is larger than 8 bit RGB, image editing operations can be performed with less loss of quality than images with fewer colors, which are not suitable for editing operations.

Bitmap formats

The following formats of bitmap images are made up of image pixels or dots that are stored one by one in the file until the image is complete.

JPEG (JPEG)

The JPEG (Joint Photographic Experts Group) format, created in 1992, is an image file format used to store photographs in a compressed format. This file format is lossy, which means that a certain amount of image information is lost when it is compressed, especially in small details, generating a noise called "artifacts". For that reason it is not a good option to save images of drawings, text, etc.

Photograph stored in JPEG format.

The JPEG file format can be used to store images in various color formats, including RGB 8-bit per color, CMYK, and YCbCr. The color depth of this format (8 bits for each color) makes it not a good option for editing photos. For this task it is much better to use the RAW formats of each photographic camera that have 36 or 42 bits per pixel.

The JPEG format does not allow you to define transparency in the image, so it is not a good option to insert cropped images.

Png

The PNG (Portable Network Graphics) format was created in 1995 as a lossless compression image format, that is, it does not lose any detail during image compression.

The PNG format is ideal for storing images of drawings or text since it is lossless so it will be stored without noise or "artifacts".

PNG image of a colored grid.

This format is also ideal for images with a transparent background, as each pixel can be stored along with a transparent color code that prevents the edges from showing through.

Although it can be used to save photos, it is not recommended because, being lossless, its size is much larger than JPEG images. If you want to save a lossless photo for editing, it's better to use the TIFF format.

The PNG format can save images with various color depths tailored to each application. With the black and white colors you can store images of text or the like with a very high level of compression. Grayscale images or full color images (RGB 8-bit per color) can also be stored.

The PNG format does not allow you to store CMYK colors adapted for printing on paper.

Gifs

The GIF (Graphics Format Interchange) format was released in 1987 by CompuServe and is widely used on the Internet for both images and animations due to its broad support and compatibility.

As a special feature, this is the only popular format that can save moving images or animations. Videos with photographic images appear heavily color faded because this format can only handle a 256-color palette, but this hasn't stopped it from being widely used.

The GIF format allows you to save drawings with transparency, but with worse quality than with the 24-bit PNG format.

The main application of the GIF format is to store small drawings and animations with or without transparency.

Zaqwerdx, CC BY-SA 3.0, via Wikimedia Commons.

TIFF

The TIFF (Tagged Image File Format) format was published in version 6 in 1992 and is widely used in the graphic industry and professional photography by its versatility and non-destructive compression.

It is a format that takes up a lot of memory when storing lossless photos, especially if a high color depth is used, with 16 bits for each color. However, these characteristics make the TIFF format highly appreciated in professional photo editing and scientific photography.

Raw

The RAW format.

Summary of bitmap image formats.

Format	Compression	Losses	Color	Transparencies	Motion
JPG	Yeah	Yeah	RGB 8 bit CMYK	No	No
Png	Yeah	No	256 colors RGB 8 bit RGB + Transparency	Yeah	No
Gifs	Yeah	No	Only 256 Colors	Yeah	Yeah
TIFF	Yeah	No	8-bit RGB CMYK	No	No
Raw	No	No	12-bit RGB	No	No

Format	Image type
JPG	Photographs.
Png	Drawings.
Gifs	Drawings. Images with movement.
TIFF	Professional photography. Scientific photography. Paper print.
Raw	Professional photography.

Comparison between JPEG and PNG formats

In the following images we can see the differences and the usefulness of each of the image formats.

When saving text or drawing images, it will always be better to use the PNG format, which will take up less size and give better quality.

PNG image file 6kb in size, no errors.

JPEG image file 7kb in size, with "artifacts".

PNG image file 210 bytes in size, no errors.

JPEG image file 11284 bytes in size, with "artifacts".

When it comes to saving photos, it will always be better to use the JPEG format, which will occupy less size while giving a similar quality. In reality, the quality of the JPEG format will be lower, but it will not be visible to the naked eye.

262kb size PNG image file.

JPEG image file 52kb in size.

Vector formats

The formats of vector images are made up of vectors, which are mathematical instructions that are given to the browser or editing programs for these graphics so that they can be displayed. These images can be scaled infinitely without losing resolution or quality.

Svg

El formato SVG (Scalable Vector Graphics) es un estándar abierto publicado en 1999 para definir imágenes vectoriales en dos dimensiones para la Web.

Stephen Winsor, GNU General Public License v3, via Wikimedia Commons.

PDF

The PDF (Portable Document Format) standard is a file format designed to create electronic documents that can be easily viewed and printed on any device.

Although they are not intended to be edited, they can be edited with some specialized tools.