We all upload images, create photos, make "memes" to share on in social networks. Many post images without even thinking about which graphic file format is most suitable for a particular case. This article does not apply to raster and vector graphics professionals. For the rest, this brief analysis of graphic formats will not be superfluous in order to better understand for what purposes one or another format should be used. So, let's begin.
Brief analysis of graphic file formats
- JPG/JPEG/JFIF
- TIF/TIFF
Raster vs vector
Before we get into the five selected file formats, it's good to know that there are two main graphic families: raster and vector, and all of the image file formats listed below belong to the raster family.
In raster graphics, an image is assembled from pixels, while vector graphics are assembled from paths, so-called line segments.
File Compression
In addition, image file formats can be differentiated based on compression effects called compression. There are quite a lot of varieties of compression schemes, but the essence of their existence can be reduced to one task - to compress a bitmap file as efficiently as possible. It makes no sense to compress a graphic file, since its size does not depend on the scale, but on the number of paths in it.
Compression can very effectively compress images by a factor of two or more. But this almost always results in a loss in quality, since the main compression algorithm is to select a few pixels and replace them with one or two similar shades. A compressed file will never be an exact representation of the original, with a few exceptions. Let's talk about this further. File compression is usually suitable for small photos and not suitable for professional. drawings or high-quality illustrations, presentations.
Lossless compression is the same as the original file because uncompressed compression is an exact representation of the original.
JPG/JPEG/JFIF images
Abbreviation for: Joint Photographic Experts Group - Joint Photographic Experts Group.
File extensions: .jpg / .jpeg
The most common format among bitmap files images. Digital cameras store their images in this format. JPEG files apply a lossy compression method that can significantly reduce the file size without significant loss of quality.
Minuses: This format is not immune to generational degradation. This means that every time you edit and save the image quality with every new version file will deteriorate.
Applicability: opaque images, image capture devices (gadgets, cameras, action cameras).
PNG image format
Abbreviation for: Portable Network Graphics - portable network graphics. 
File extension: .png
This free open source GIF alternative source code, which supports 16 million colors, unlike GIF, which has a maximum of 256 colors. This is the best file format for images while preserving the color source. The format is suitable for conveying the perfect tone balance. Animated PNG file available in APNG format. These files usually have a transparent background.
Minuses: Best suited for large file sizes. The PNG format itself does not support animated graphics.
Applicability: Edit images, web images, images with layers, such as transparency or fading effects.
TIF file extension
Abbreviation for: Tagged Image File Format - a format for storing bitmap graphics.
File extension: .tif / .tiff
Flexible and easily extensible file format capable of saving files with high color depth. These files have a transparent background. They are perfect for company logos.
Minuses: Not ideal for web browsers.
Applicability: The initial stage of photographic files in printing. OCR software packages.
GIF file format
Abbreviation for: Graphics Interchange Format - a format for interchanging images. 
File extension:.gif
Although GIF has a low compression ratio compared to most video formats, this format is the most popular among users for animating images.
Minuses: The format is limited to 8-bit (256 colors) and is not suitable for photographic images or anti-aliasing.
Applicability: Graphics that require multiple colors, such as simplified charts, logos, and animations that are more than 50% one color.
BMP image file format
Abbreviation for: Bitmap Picture - literally a format for storing bitmap images
File extension:.bmp
This format is designed by Microsoft and is designed to store large uncompressed files inside the Windows OS.
Minuses: This format does not use compression.
Applicability: simplified format structure makes bmp files ideal for Windows programs.
These are the most common image file formats currently used by users. Now that you know which one is ideal for any purpose, you can better understand which graphic file formats to use for yourself.
Do you know the difference between JPEG, GIF, PNG and other graphic formats? When should I use one format or another, or which one is best for saving photos? Below you will find answers to all these questions.
In contact with
Lossy/Lossless Data Compression Algorithms
First of all, you need to understand the difference between lossy and lossless data compression algorithms. Lossless compression is a method of image compression that preserves its quality no matter how many times the file has been compressed and restored.
When using lossy compression, the image quality will decrease every time the file is compressed/decompressed. One of the undoubted advantages this method lies in the possibility of a greater degree of compression. For storing and editing photos, lossless compression is more suitable, however, if you need to send the image via e-mail or publish on the Web, it is better to use the second method.
.RAW
A file format containing raw information coming directly from the sensor of semi-professional and professional cameras. These files are not processed by the camera's processor and contain all the captured information in a "raw" form. These files can be larger than 25 MB. RAW files are great for editing, but because of their large size, they are not very convenient to store.
.JPEG (JPG)
This is perhaps the most common graphic format. It is usually used to publish photos and images with text on the Internet. JPEG is a TrueColor format, which means it can store images with a color depth of 24 bits/pixel. This format can display more than 16 million colors.
JPEG has earned its popularity due to its flexible data compression capability. If necessary, the image can be saved with high quality. When using a lossy compression algorithm, there is a loss of image quality with each save of the file. Shown below are high, medium, and low quality JPEG images.
JPEG with high quality (100). Size 113 KB
JPEG with medium quality (50). Size 59 KB
JPEG low quality (20). Size 27 KB
.gif
The GIF (Graphics Interchange Format) format does not please with color depth (8 bits). It can store lossless compressed images up to 256 colors. One of the features of GIF is animation support.
.png
This format was developed as a replacement for GIF. PNG stands for Portable Network Graphics. Unlike GIF, PNG has support for transparency gradations due to an additional alpha channel. Transparency is usually indicated by a checkerboard background, as seen in the image below.
Outwardly, PNG files practically do not differ from JPG images. PNG compresses lossless data. If transparency is important to you, it is better to choose this particular format.
File formats are the backbone of digital photography. will tell you about all major graphic file formats.
RAW.
File format containing raw information coming directly from the camera's sensor. These files are not processed by the camera processor (unlike JPG) and contain the original shooting information. RAW can be compressed without quality loss.
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 photo processing and retains maximum quality.
The note. Various manufacturers photographic technicians use different algorithms to create RAW in their cameras. Each manufacturer comes up with their own resolution for their RAW file - NEF - Nikon, CR2 - Canon ...
JPEG (aka JPG).
This is the most common graphic file format.
JPG has earned its popularity due to its flexible data compression capability. If necessary, the image can be saved with maximum quality. Or compress it to the minimum file size for network transmission.
JPG uses a lossy compression algorithm. What does this give us? A clear disadvantage of such a system is the loss of image quality each time the file is saved. On the other hand, image compression by 10 times simplifies data transfer.
In practice, saving a photo with a minimum compression ratio does not result in a visible deterioration 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 different color spaces (RBG, CMYK, YCbCr, CIE Lab, etc.) and with a large color depth (8, 16, 32 and 64 bits). TIFF is widely supported graphic applications and is used in the printing industry.
Unlike JPG, a TIFF image will not lose quality after each file save. But, unfortunately, it is because of this that TIFF files weigh many times more than JPG.
Right to TIFF format this 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 lossless compression. 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 OS Windows and OS/2.
BMP stores data with a color depth of up to 48 bits and a maximum size of 65535×65535 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 graphs, and also supports transparency and animation.
GIF also supports lossless compression.
PNG.
The PNG format was created both to enhance and replace the GIF format with an image format that does not require a license to use. Unlike GIF, PNG has support for an alpha channel and the ability to store an unlimited number of colors.
PNG is lossless data compression, which makes it very useful for storing intermediate versions of image processing.
JPEG 2000 (or jp2).
A new graphic format created to replace JPEG. At the same quality, the file size of JPEG 2000 is 30% smaller than JPG.
With strong compression, JPEG 2000 does not split the image into squares that are characteristic of the JPEG format.
Unfortunately, at the moment this format is not widely used and is only supported by Safari and Mozilla / Firerox browsers (via Quicktime).
Hello, dear readers of the blog site. Today I want to talk about raster graphics formats that were appropriate to use for images displayed on the site, and indeed.
We will look at Gif, which is popular now precisely because of its support for GIF animation, Jpg, which is very suitable for inserting full-color photos and, of course, Png, which allows you to create pictures with a transparent background and can serve as an excellent replacement for the previously mentioned formats. You can also read about half graphic and half text.
All of them are actively used in, but the subtlety lies in choosing the optimal format for each specific case so that the image quality does not suffer and its weight is minimal. I advise you to take the graphics from free services in the likeness and other similar ones, so that later there would be no problems with copyright infringement.
Raster graphics for the web in the face of GIF, Japeg and PNG
Now it is very difficult to imagine individual web pages without any photos, icons or pictures on them at all. By the way, the first browser that could show graphics was Mosaic (mosaic), which appeared almost simultaneously with the advent of .
Moreover, as I mentioned above, not all image formats are suitable for adding to the site, but only certain, maximum for this sharpened - Gif, Png and Jpg. Depending on the type of picture you want to add to the web page, you will need to choose one of the mentioned formats, which, in turn, belong to the so-called raster graphics.
By itself, it implies that the image on paper or monitor will be formed from the so-called single elements called pixels (color points). All pictures of any format related to raster graphics have some properties.
The size of the image is determined by such a concept as permission, which is horizontally and vertically, for example, 300 by 200. Sometimes, however, they talk about the total number of pixels in the picture, for example, camera manufacturers (12 Mega pixels, etc.).
With regard to the web, the physical size of a raster image can significantly depend on the size of the pixel (screen grain) of the device on which the user is viewing the web page. Images are also characterized by such a concept as number of colors used in it. For example, for Gif, only 256 colors are used, which are specified in one byte of information.
Well, besides this, these formats can use various color models, with the help of which all possible shades are formed. When we considered writing with you, we examined in some detail the principles of forming the RGB model.
One of the main disadvantages of raster graphics is the large size of the resulting images, even in the Gif, Png and Jpg formats used on the web. Naturally, various methods are used to reduce the resulting images. compression algorithms, which work both with and without quality degradation (lossy compression).
All this is very similar to the principles of operation of audio compression algorithms - MP3 compresses with losses, and, first of all, any transitions that are most likely not to be perceived by the human ear are removed. Such an analogy in the world of raster graphics can be jpg format, where information is compressed with losses. At the same time, the possibilities of visual perception of a person are taken into account and, first of all, those details that will not be particularly noticeable are removed.
But there are also lossless image compression algorithms - BMP, Gif and Png. BMP is most often compressed image, and here Gif and Png are losslessly compressed by removing repetitive and redundant information (it turns out something like archiving, but taking into account the features of raster graphics).
There are many graphic editors that can work with raster graphics (for example, the same photoshop or it), but for this you should use editors that are focused specifically on this, because only then you can get the most optimized pictures, which then will not create an unnecessary load on your hosting server when they are loaded into users' browsers.
Gif format - design elements and animation for the site
At the moment, almost all browsers support the three main raster graphics formats used for the web - Gif, Png and Jpg. Historically, GIF was the first to appear, and it was with the help of it that in the first browsers it was possible to add and display pictures and media information, which was primarily expressed in the so-called GIF animation.
The abbreviation Gif stands for Graphics Interchange Format - a graphics interchange format. Pronounced like gif, but the developers of the standard believed that it was correct to call it gif, but another name in the Russian interpretation took root.
Because it was developed a long time ago, and most users at that time had, oh, how small, then when creating it, they focused on the maximum reduction in the size of the resulting image (I wrote about this in an article about or).
In this regard, a Gif may include a palette consisting of with only 256 colors(it is also called an indexed palette). Those. an image converted to this format will always contain no more than 256 shades, and all other colors will be created on the basis of mixing (adjacent pixels from the base palette are cunningly selected so that the human eye at a distance would perceive them as the color needed in this place).
But, unfortunately, in practice, when converting full-color photos to GIF, a lot of artifacts come out (due to this very mixing), which make the photos unacceptable for posting on the web. Therefore, it is not used to display full-color pictures and photos on the site pages (Jpg or Png are most often chosen for this).
Gif-animation and its use on the Internet
With such a significant drawback, Gif should have sunk into oblivion long ago, but, however, it is still more alive than all living things, and images in this format can often be found on website pages.
The whole point here is that GIF format supports animation(the only one used on the web). Any animated and (including) that you are in in large numbers you can meet on the Internet, have the GIF extension.
True, for some time an alternative Mng format has already been developed, which adds the possibility of animation to Png, but its development and distribution is not going very fast. Therefore, if you do not take into account flash technology, all animation on the web is created on the basis of Gif and flash.
The essence of this animation lies in the fact that in the GIF container there is not one picture, but several at once, and the time after which these images will replace each other is specified there. In this case, it will be possible to loop the animation when the first frame starts again after the last frame.
There are specialized editors in which you can create gif animation. The main thing is to create the required number of pictures of a certain size, and then they are placed on the timeline and the interval for changing them is set.
As a result, it gets the same cartoon effect that we are already accustomed to seeing on web pages. Sometimes it even dazzles in the eyes from animated banners (read about how), emoticons, avatars. An example of GIF animation is the goblin from the page "" of my project.
GIF supports transparent background (almost)
But animation is not the only feature of this format. It may also support a primitive way of generating transparency for generated images. One of the 256 possible colors in a Gif is set to transparent and the background of the web page will show through it where this image will be located.
But the problem is that for any pixel in an image of this format, only two values are possible - transparent or opaque (two extreme states without the possibility of intermediate options such as translucent, a quarter transparent, etc.). Those. about the concept of an alpha channel (used in Png), in transparent GIF there is no speech. Because of this, there are difficulties with displaying a smoothly changing level of transparency.
But still transparent Gif is used on the web. For example, various markers used on web pages are often stored in this format. The background around the marker is made transparent and the background of the web page will show through it. For example, a marker with a gray background would look like this:
And this is how the same marker will look when replacing the gray background with transparent color when saving as GIF:
In order to form smooth edges with a drop in transparency in Gifs, go for one trick. In any graphics editor when creating an image in this format, you will be able to specify the so-called MATE color (otherwise it will use the default color, usually white).
The MATE color is mixed into the areas of the GIF where you want to create smooth edges with a drop in transparency, but all this will only look good on a web page background that matches the MATE you specified. But on top of another shade, this picture will look very unhealthy.
For which web graphics does it make sense to use the Gif format?
As I mentioned just above, in this format, pictures are compressed (transformed) without loss, but only if the original picture was 8-bit (only one byte was allocated for color encoding), i.e. contained 256 colors. If the source was full-color, then there will be a deterioration in quality when saving or converting to Gif, precisely because of the loss of some of the shades.
The compression (conversion) algorithm in Gifa works in such a way that it will best optimize the size of the photo with vertical color change (gradient). Those. it makes sense to use it to compress pictures, the color in the lines of which does not change much.
But when converting a photo with a horizontal or oblique gradient to Gif, the final image can turn out to be very large, for example, compared to the same Png. Well, besides this, unpleasant artifacts may come out.
In addition, this compression algorithm was patented at one time, and that is why intensive work began on an alternative Png 8, but at the moment the Gif patents have already expired. As a result, PNG turned out to be head and shoulders above GIF and continues to gain popularity among webmasters.
Jpg (JPEG) - low weight full color images
Jpg was designed to compress and store full color photographs. It is owned by the Association of American Photographers, which, in fact, is the abbreviation Jpeg - Joint Photographic Experts Group. Although this association itself says that this is an open format.
As I mentioned just above, it compresses images with loss of quality. The whole picture is divided into squares of 8 by 8 pixels, and then the compression algorithm starts working, which groups different simple shapes from these simple squares. All those differences in colors that the human eye is not able to notice are removed from the Jpg image.
Pros and cons of Japeg
By removing some of the information that will still not be visible to the naked eye, Jpeg sometimes allows compress full-color images tenfold without any apparent loss in quality.
But, on the other hand, even when choosing the maximum quality, you will not be able to save a photo in this format with exactly the same quality as the original. Losses are bound to, but not always visible to the eye without magnification.
You can check it yourself by taking some very high quality photo and saving it to JPEG with maximum quality dozens of times in a row. So it's better do not re-save to Jpg sources of the same format - there will be serious losses in quality due to the accumulation and overlapping of artifacts. Therefore, you should not save an unfinished image in JPEG, and then continue editing it - you will significantly lose quality.
Here is an example of such mockery (just a few re-saves in Jepeg format and you won’t look at the picture without tears):
But despite these shortcomings jpeg has become very popular especially after the appearance digital photography. Its main advantages are the possibility of fast, resource-intensive and very strong compression of full-color images. True, it is difficult to call this raster graphics format full-color, because. it does not quite cover the entire RGB palette, but this can be attributed to minor shortcomings.
Which images are best saved in Jpg format?
Jpg is best for saving photos with smooth transitions of brightness and contrast, but for saving something like drawings, texts and other photographs with sharp contrast transitions, it is very bad, and in this case the best option will use lossless compression in Png.
See how unsightly a screenshot of text in JPEG format looks (although with the same and even less weight in PNG format, the picture would not be distinguishable from the original at all):
Jpg (JPEG), as I mentioned, has the ability set quality resulting image by adjusting the compression ratio. When saving photos, which, for example, have a lot of sky, you should set the quality (compression ratio) of Jpeg close to the maximum (minimum compression) in order to avoid noticeable artifacts in this very sky.
And when saving photos with many details of different colors, the quality can be lowered (increased compression ratio) without fear of noticeable artifacts.
I mentioned that when saving in Jpg (JPEG), the entire image is divided into squares with a side of eight pixels. So, if you have the opportunity to choose the size of the resulting photo, then it is better to take a multiple of eight, because in this case, you will get slightly less artifacts, which will be especially noticeable in pictures with thin lines, etc.
Png - replacement for Gif and Jpeg, as well as a transparent background in Png32
Initially, Png was developed as an alternative to the then-proprietary Gif (no one from outside was allowed to develop it). The abbreviation stands for "portable network graphics", it was originally sharpened precisely for use on the web. This raster graphics format is completely open and is described on the W3C website.
Let me remind you that he is lossless compression format, which means you can safely save an unfinished image in Png, and then continue editing it without fear of getting additional artifacts, as was the case with Jpg.
Png8 and Png24 are full replacements for Gif and Jpeg
There are three variations of the PNG format, each of which is designed to perform its own tasks. The first two were originally created as an alternative to the already existing GIF and Japeg formats, and the third brought something to web graphics that had not been there before. But first things first.
Png 8- the figure eight indicates the bitness of the color and indicates that when saving a photo in PNG 8, only 256 colors will be used, by analogy with the Gif already described just above.
Those. it was designed as a full replacement for GIF and the results of image compression in these two bitmap graphics formats will be almost identical. Just like in Gif - here transparency is supported, but with an alpha channel.
Png 24- the number 24 means that for each pixel of the photo in this format, three color channels of 8 bits each (1 byte) are allocated, thereby realizing full-color image formation. That. with the help of PNG 24 you can transmit colors without distortion. Even Jpg cannot do this one hundred percent.
By saving the original image in Png 24, you get exactly the same photo, but its size will still be larger than when using Jpeg. But this, however, is not always the case. With large pictures that have sharp transitions, this format can even show best result than a Jeep of acceptable quality.
Those. as I mentioned just above, Jpeg is best for ordinary photos, but for images with text or where the quality cannot be degraded in any case, Png 24 will be indispensable. , which I use in articles, PNG 8 or 24 seems to me the best solution.
For example, the same screenshot with the text that you could see just above saved in Jpeg (though with low quality to emphasize possible artifacts) in Png will look like this:
But I usually save a full-color picture at the beginning of each article in Jeepeg, because the ratio quality / size speaks in favor of just such an option. Let me just say that there are different ways compressing images to Png format, and one of the best algorithms is used, in my opinion, in online service Puny Png .
Png 32 - full transparency with alpha channel
You probably understood by analogy that in this raster graphics format for one pixel it is possible to use as many as four bytes of information.
Three are responsible for the formation of a full-color image by analogy with PNG 24, but the fourth byte is allocated separately for the formation of an alpha channel, which allows using PNG 32 to obtain images with transparent background.
In it, you can specify a change in the degree of transparency without any MATE colors, which means that such pictures will look equally good on absolutely any web pages with any background. An example of such an image is the logo from the header of my blog:
It is probably clear that Png 32 is simply indispensable and has no analogues in terms of its capabilities.. By the way, the alpha channel can also be used in PNG 8, but, unfortunately, not all raster graphics editors will allow you to do this. Photoshop, for example, cannot do this, but Fireworks or Gimp can.
In addition, PNG 32 and 8 with an alpha channel have such a problem that it is not fully supported in the IE browser, starting from version 6 and below, and instead transparent background will be mixed grey colour, and Png 8 with an alpha channel will not be shown there at all. True, users have practically no such archaic browsers left, but still.
Good luck to you! See you soon on the blog pages site
You may be interested
HTML and CSS - why you need to know them and why knowledge of PHP and MySQL is needed, but to a much lesser extent
When creating sites at the layout stage, there is always the task of choosing one or another format for storing images. Images can be saved in any PNG, JPEG, GIF, and dozens of other formats, but which format to choose to transfer better quality With minimum size resulting image file?
Which file format to choose?
GIF format limited to 256 colors. This is a lossless format and when using it, minimal image compression is achieved. The GIF format supports animation (the only one of all formats) and transparency, but translucent images cannot be saved in it. Due to the features of the algorithm, it compresses very well images that have vertical lines (for the web, for example, these can be vertical dividing bars, monochrome icons, graphic dots, etc.). It can be used to store drawings, text and signs graphics in a small file size.
PNG format is a lossless compression format. In this format, there are 3 color channels per pixel (RGB - red, green, blue), thereby realizing full-color image formation without distortion. In terms of color quality, PNG may be superior to JPG, but the file size will also be larger. PNG format support different levels transparency (translucency). Due to the peculiarities of the algorithm, it compresses very well images that have horizontal lines. And when the task is to choose to save the file in GIF or PNG format, for cases where the picture is a primitive line, you should pay attention to the position of these lines - i.e. in GIF format it is worth saving images with vertical lines, in PNG - horizontal. PNG is good choice to store drawings, text and iconic graphics in a small file size.
JPG format is a format that has color loss. The algorithm of work in this format is such that it compresses images with gradients very well (the colors of the first pixel in the gradient and the last are preserved, and when the image is displayed, all intermediate colors between these points are calculated), which makes it useful for storing images in a smaller size than in BMP format. Photos, overflows, logos, backgrounds, etc. are best saved in JPG format.
Thus, when developing sites, you can achieve very good results in speed by choosing the right image storage format.