Fundamentals of computer graphics. What are the graphic file formats?

IN hello seven. When publishing new article, the question often arises, what format should I use images in the article? In order to achieve the best result, you should select a raster image format.
In this article, we will briefly discuss the popular GIF and the JPEG format, and then analyze the PNG format, and dispel some misconceptions about the use of certain formats.

GIF (Graphics Interchange Format) image format

Most color images and backgrounds on the Internet are GIF files. This compact format is known for its small image files. GIF images, do not contain millions of colors, this figure is no more than 256. In addition, the GIF format supports animation, that is, using this format, you can do .

The GIF format has its own palette index. It contains a color palette index, up to 256, and for each pixel in the image, it has a corresponding color index. If you change the image and save it as a GIF, the image quality will not be lost.

As I already said, the GIF format supports animation, which, in Web times 1.0, was shown in the form of numerous flashing images, rotating icons, and thereby greatly irritated many users. In the more civilized era of Web 2.0, we still notice beautiful animation"Loading..." while waiting for the query results to refresh the page.

GIF also supports transparency, which is kind of boolean type transparency. A pixel in an image can be either completely transparent or completely opaque.

JPEG (Joint Photographic Experts Group) image format

JPEG has no limit of 256 colors. It can contain millions of colors, which is why it has high compression. This makes it suitable for photographs where high clarity, sharpness and quality are needed, so most digital cameras work exactly in JPEG format.

This format is lossy, meaning you will lose quality with each new edit, so if you plan to make a lot of edits, it is better to use a different format to store intermediate results. However, there are some operations that can be performed without loss of quality. Such as stretching the image, rotating it on an axis, or changing meta information such as comments that are stored in the image file.

JPEG does not support transparency.

When optimizing an image in this format, to obtain best results set compression to 50%. JPEG compresses the photo-quality graphics and color depth of more competing formats such as GIF, and also supports greater degree accuracy of color matching.

PNG (Portable Network Graphics) image format

This format was created specifically for the Internet to supplant the GIF format. The main advantage of the PNG format is that it supports 24-bit color and transparency.

PNG is lossless and comes in several forms, but for practical purposes it is used in only two ways:

2. PNG24 (full color)

PNG8, like GIF, has an image palette.

Let's compare the PNG8 format with GIF:

Advantages:

1. PNG usually produces a smaller file size;
2. PNG supports variable transparency;

Flaws:

1. There is no animation;

The second type of PNG, full-color PNG, can contain millions of colors, just like JPEGs. You may sometimes see names like PNG24 or PNG32.

PNG-24 combines the features of JPEG and GIF: it supports 24-bit color, retains transparency, and is therefore good for halftones. The image size is usually larger than JPEG. This makes the full-color PNG format ideal for applications where file size is not an issue, such as screenshots or graphical tutorials.

Let's draw a conclusion on the use of formats:

1. JPEG is the best format for photos.
2. GIF is best format for animation.
3. PNG8 - format for: icons, buttons, backgrounds, website graphics.

File formats are the basis for working with digital photographs. will tell you about all the main formats graphic files.

RAW.

A file format containing raw information coming directly from the camera sensor. These files are not processed by the camera's processor (unlike JPG) and contain original shooting information. RAW can be compressed without losing quality.

The advantages of RAW are obvious - unlike JPG, which was processed in the camera and already saved with data compression - RAW gives the widest possibilities for processing photographs and maintains maximum quality.

Note. Various manufacturers Photography technicians use different algorithms to create RAW in their cameras. Each manufacturer comes up with its own resolution for its RAW file - NEF - Nikon, CR2 - Canon...

JPEG (aka JPG).

This is the most common graphics file format.

JPG has earned its popularity due to its flexible data compression capabilities. If necessary, the image can be saved with maximum quality. Or compress it to the minimum file size for transmission over the network.

JPG uses a lossy compression algorithm. What does this give us? An obvious disadvantage of such a system is the loss of image quality every time a file is saved. On the other hand, image compression simplifies data transfer by 10 times.

In practice, saving a photo with minimal compression does not result in any visible degradation in image quality. That is why JPG is the most common and popular format for storing graphic files.

TIFF.

The TIFF format is very popular for storing images. It allows you to save photos in various color spaces (RBG, CMYK, YCbCr, CIE Lab, etc.) and with high color depth (8, 16, 32 and 64 bits). TIFF is widely supported graphic applications and is used in printing.

Unlike JPG, a TIFF image will not lose quality every time the file is saved. But, unfortunately, precisely because of this TIFF files weigh many times more than JPG.

Right to TIFF format at the moment owned by Adobe. Photoshop can save TIFF without merging layers.

PSD.

The PSD format is used in Photoshop. PSD allows you to save a raster image with many layers, any color depth and in any color space.

Most often, the format is used to save intermediate or final results of complex processing with the ability to change individual elements.

PSD also supports compression without loss of quality. But the abundance of information that may contain PSD file, greatly increases its weight.

BMP.

The BMP format is one of the first graphic formats. It is recognized by any program that works with graphics, format support is integrated into operating systems Windows and OS/2.

BMP stores data with color depth up to 48 bits and maximum size 65535x65535 pixels.
At the moment, the BMP format is practically not used either on the Internet (JPG weighs several times less) or in printing (TIFF copes with this task better).

GIF.

The GIF format was created in the early days of the Internet for sharing images. It can store lossless compressed images in up to 256 colors. The GIF format is ideal for drawings and graphics, and also supports transparency and animation.
GIF also supports compression without loss of quality.

PNG.

The PNG format was created to both improve upon and replace the GIF format with a graphics format that does not require a license for use. Unlike GIF, PNG has alpha channel support and the ability to store an unlimited number of colors.

PNG compresses data without loss, which makes it very convenient for storing intermediate versions of image processing.

JPEG 2000 (or jp2).

New graphic format, created to replace JPEG. For the same quality, JPEG 2000 file size is 30% smaller than JPG.

When highly compressed, JPEG 2000 does not break the image into squares characteristic of the JPEG format.

Unfortunately, at the moment this format is not very widespread and is only supported Safari browsers and Mozilla/Firerox (via Quicktime).

Hello, dear friends. Today we’ll talk about what image format is best to use on the site, what graphic file formats are available for the site today, and whether it is necessary to pursue new graphic formats.

I get quite a lot of questions like this; many of my students ask if they can use the new SVG and WebP formats, and where is the best place to use these images. Of course, you can use new formats, you just need to understand which format is best suited for what.

Today, images on a website are an integral part. From graphic design to images in articles, graphics accompany most sites on the web. But beauty comes at a price

Unoptimized images are one of the factors that slow down the site, as indicated by verification services.

Therefore, you will always have to choose which format to choose for the image. Its size and quality will depend on this. And to use smaller images without losing quality, you need to know a few things.

What images for websites do I use today?

All images for websites are divided into:

• raster (example - JPG, JPEG, GIF, PNG),
• vector (example - SVG).

Raster Images are made up of pixels that store color and transparency values. These formats include images in articles, buttons, icons and design elements. These images are popular among developers and website owners. Main disadvantage raster images– they don’t scale well.

That is, when the image size increases, there is a loss of quality.

Vector images consist of lines and waypoints. Image information is stored in mathematical rendering instructions, which allows such images to be scaled as much as desired without loss of quality.

All these images can and are used on modern websites. You just need to understand that before uploading to the site, !

Description of popular image formats for the site

From the description of these formats, you will understand where and which format is best used on the site.

JPEG

JPEG or JPG is one of the most popular image formats for websites. The format supports millions of colors, which gives it a leading position in the presentation of photographs and pictures on the site.

Images in this format are optimized quite well with virtually no loss of quality, which allows you to get a smaller file without visual loss of quality. It should be remembered that each subsequent optimization reduces the quality.

Files of this format are supported by all devices and browsers, which once again confirms its popularity and allows you not to worry about problems with display on websites.

The big disadvantage of this format is the lack of transparency. That is, it will not be possible to combine images in this format. For such tasks it is better to use the following format.

PNG

This format uses a lossless compression algorithm. In terms of the number of colors and level of transparency, it is available in two types: 8 and 24-bit. Both support transparency.

8-bit is not very popular, but 24-bit is widely used for various images on the site. Due to transparency, it allows you to create combined images. Often used to create animated buttons and icons where a transparency effect is needed.

Images in PNG format can be optimized and edited many times - it will retain the original quality.

The format is also supported by all browsers and devices, ensuring it can be displayed on any screen.

The quality of the images looks better than JPG, but the file weight will be larger. This must be taken into account when placing files on the site.

GIF

It is an 8-bit format that supports 256 colors, transparency and animation. Due to the support of a small number of colors, the file weight is also minimal.

The format is not suitable for photographs and images with a wide range of colors.

But it is widely used in creating banners, buttons, icons, and so on.

In modern websites this format is used less and less.

Next, let's talk about relatively recent SVG formats and WebP, which are not so popular, but are gaining popularity and support, and are perfectly suited to the requirements of loading speed and website adaptability.

SVG

It is an XML-based vector file format. The format began to gain popularity quite recently, as previously it was poorly supported in browsers. And due to display problems, no one was in a hurry to use it.

Today SVG is supported by everyone modern browsers. But problems with display still occur.

This format is most often used for simple images, such as logos, design elements and so on. Not suitable for photographs.

The SVG format is lightweight, highly scalable, providing crisp images on any screen resolution, supports animation, can be controlled via CSS and placed in HTML, reducing the number of requests.

WebP

Open format source code, developed by Google specifically for the Internet. Today, YouTube uses video thumbnail conversion to WebP.

The format provides superior compression and supports transparency. It combines the advantages of JPG and PNG formats without increasing the file size.

But, despite the advantages of the format, it is not supported by all browsers, for example, IE, Edge, Firefox and Safari.

There are ways around these restrictions, but they prevent the format from being used everywhere.

Conclusion

Friends, I hope I explained everything clearly, and you now know which image format is best to use on the site, and why I do not insist on using one particular format, but recommend an integrated approach.

Perhaps when WebP gains widespread support, we'll all switch to it and replace jpg and png on our sites.

Let's discuss in the comments what formats you use on your sites, what you like and what you don't like.

That's all for today, I'm waiting for your comments.

Best regards, Maxim Zaitsev.

Hi all! Everyone has seen pictures on the Internet with such a postscript as bmp, png, jpg or gif(or others)? For example, foto.png or foto.jpg. This graphic files of different formats .

I think I'm not the only one who has wondered what the difference is between these image formats? Let's try to figure it out.

What are image formats and why are they needed?

I won’t clutter the article with too many smart words. Moreover, I myself do not always understand their meaning. Image format in relation to the Internet and computer (by image I mean some kind of graphic information– photographs or drawings) are a way to store and, accordingly, transmit pictures as an element of information.

This is a kind of tool, material or method with which you can save your favorite picture to your computer or transfer your photos from your camera to your PC. In general, it is a way of encoding information.

Let's take a non-computer example. Let's say you decide to preserve your bright image for posterity and order your portrait. But portrait is different from portrait. It can be done different materials, different instruments, different techniques. You can contact a photographer, artist or even a sculptor.

(To illustrate my words, I took portraits of Vladimir Semenovich Vysotsky, may those who find this inappropriate forgive me)

The photograph can be black and white, color, digital, paper, or in slide form. An artist can make your portrait with paints, pencil, ink, on paper, on canvas, on the wall. A sculptor can make a portrait from plaster, marble, wood, metal...

In general, there are countless options. But any of them will be your portrait.

Same thing with image formats– there are many options.

But they can all be divided into two large groups– raster and vector. But no, there is another group - mixed, or complex, where would we be without them in the modern world :)

We are more interested raster formats– these are the ones you most often encounter. But a few words need to be said about other groups.

Vector images are based on geometric shapes– points, curves, circles, polygons. Vector images can be enlarged without losing quality. Examples of vector files – svg, cdr, eps. But, to be honest, I have not encountered such formats.

Complex formats, as the name suggests, have features of both vector and raster images. The most famous example of this format is files pdf. Surely everyone has encountered them: many e-books and the documents are stored in PDF format.

Raster images

Most common image formats –jpg (jpeg),gif,png,bmp. All of them belong to the raster group.

Raster images, upon closer inspection, consist of small squares - pixels. Therefore, unlike vector images, raster images lose quality at high magnification.

Here's an example raster image and its parts under magnification.

Do you see how blurred the picture is when zoomed in?

But editing, storing and transmitting raster images is much easier than vector ones. This is very important for ordinary users.

You can work with rasters in such convenient and well-known editors as Adobe Photoshop and Paint.

Characteristics of raster images

One of the disadvantages of raster images is that such files are stored in a compressed form and when they are displayed on the screen or printed, it is impossible to restore the original appearance, the quality suffers to one degree or another. But often these losses are not even noticeable, so do not get upset and refuse to use raster graphics. Moreover, by and large, there is no alternative.

Most common image formats are definitely BMP,GIF,PNG, JPEG.

The first group includes BMP, GIF, PNG formats, the second – JPEG. Lossless compression is based on removing redundant information, while lossy compression is based on discarding information that human vision does not perceive.

What are the differences between the image formats bmp, png, jpg, gif

I wrote a lot, a lot above, but still did not answer the question in the title. I don't know if I can answer, but I'll try.

But first, a little illustration. I took one picture and saved it in a separate folder in several formats. The results are clear. Pay attention to the weight of images of different formats.

FormatJPEG (Joint Photographic Experts Group) is a joint group of expert photographers. That was the name of the company that developed this format. Perhaps the most common image format that everyone who has ever sat down at a computer has encountered. Edit jpeg files possible in almost any graphic editor. During compression, the color of neighboring pixels is averaged. This causes losses in quality. However, the quality of such images is not bad, even good when compared with some other formats.

In addition, jpeg files weigh little. They can easily be sent from phone to phone, by email or posted on the Internet. Also the small size allows you to store large number images.

FormatBMP (Bitmap Picture) – raster image. The image quality is excellent because the information is almost not compressed. But the size of such files compared to jpeg is huge.

FormatGIF (GraphicsInterchangeFormat) – graphic data exchange format. Very popular format. It allows you to save animated images. Although it is considered outdated. But judging by the popularity of gifs, this format will not disappear from the scene anytime soon. Of course, gif will not work for photographers - the number of colors in this format is very limited to 256. But on the Internet it is almost the main format. Another important plus - gif files support transparency mode.

FormatPNG(Portable Network Graphics) – portable network graphics. The format was developed to replace GIF format. There is even an unofficial decoding of the acronym as “PNG is Not GIF” - PNG is not GIF. This format not only supports transparency, but also translucency from 1% to 99%, which is a big plus. But PNG cannot store multiple images in one file, like GIF. Therefore, it cannot be used to create animated pictures.

Of course, I haven't talked about all image formats. But these are the most common. Therefore, I think my article was useful to you “What is the difference between image formats?bmp,png,jpg,gif".

If the information was interesting and useful, subscribe to announcements of articles on, and also share the article with friends on social networks. Social media buttons are below the article, subscription form is at the link above or in the form at the top left.

Good luck to you in all your noble endeavors!

Vector formatsVector format files are especially useful for storing linear elements(lines and polygons), as well as elements that can be decomposed into simple geometric objects (for example, text). Vector files do not contain pixel values, but mathematical descriptions of image elements. By mathematical descriptions graphical forms (lines, curves, splines) the visualization program builds an image.

Vector files are structurally simpler than most raster files, and are usually organized as data streams.

Examples of the most common vector formats are AutoCAD DXF and Microsoft SYLK.

WMF. This is a vector format that is used graphic programs Windows OS. This format is used to transmit vector images via clipboard in Windows environment. This format is accepted by almost all programs that work with vector graphics. This format cannot be used for raster images. Disadvantages: color distortion and failure to save a number of parameters that are set for images in graphics programs.

AI. Internal format Illustrator programs. Can open Photoshop program and besides, this format is supported by all programs related to vector graphics. This format is the best remedy when transferring vector images from one program to another. Raster graphic elements are lost in most cases when transmitted via AI format.

CDR. This is the internal format of the Corel Draw program. This format is very popular, as is the software package itself. Many programs can import vector files into Corel Draw formats. The CDR format also contains raster graphic objects. This format uses compression, and different compression is applied to vector and raster files.

Metafile formats

The most common metafile formats are WPG, Macintosh PICT and CGM.