Formats jpg gif png. Which image format is better - png, gif or jpeg? Graphics with monotone colors

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. An image format in relation to the Internet and a computer (by image I mean some kind of graphic information - photographs or drawings) is 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 made with different materials, different tools, different techniques. You can contact a photographer, artist or even a sculptor.

(To illustrate my words, I took portraits of V. Vysotsky)

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 in raster formats - they are the ones we 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 come across them: many electronic books and 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 is an example of a raster image and its part 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 don’t get upset and give up using 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. You can edit jpeg files in almost any graphics editor. During compression, the color of neighboring pixels is averaged. This causes loss 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 a large number of 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 is that gif files support transparency mode.

FormatPNG(Portable Network Graphics) – portable network graphics. The format was developed to replace the 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!

We all upload images, create photos, make “memes” to share on social media. Many people 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 be useful in order to better understand for what purposes to use one or another format. So let's begin.

Brief analysis of graphic file formats

1. JPG/JPEG/JFIF
2. TIF/TIFF

Raster vs vector

Before we get into the five selected file formats, it's good to know that there are two main graphics families: raster and vector, and all of the image file formats listed below are part of the raster family.

In raster graphics, an image is assembled from pixels, while vector graphics are assembled from paths called line segments.

File compression

Additionally, image file formats can be differentiated based on compression effects called compression. There are quite a large number of types of compression schemes, but the essence of their existence can be summarized into one task - to compress a raster file as efficiently as possible. There is no point in compressing 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 literally two times or more. But this almost always results in a loss in quality, since the main compression algorithm is to select several pixels and replace them with one or two similar in shade. A compressed file will never be an exact representation of the original, with some exceptions. Let's talk about this further. File compression is usually suitable for small photos and is not suitable for professional ones. drawings or high-quality illustrations, presentations.

Lossless compression is the same as the original file, since uncompressed compression is an exact representation of the original.

JPG/JPEG/JFIF images

Abbreviation for: Joint Photographic Experts Group - Joint group of photography experts.

File extensions: .jpg / .jpeg

The most common format among raster image files. Digital cameras save their images in this format. JPEG files use a lossy compression technique that can significantly reduce file size without significantly compromising quality.

Cons: This format is not protected from generational degradation. This means that every time you edit and save, the image quality will deteriorate with each new version of the file.

Applicability: opaque images, image capture devices (gadgets, cameras, action cameras).

PNG image format

Abbreviation for: Portable Network Graphics - portable network graphics.

File extension: .png

It's a free, open-source GIF alternative that supports 16 million colors, as opposed to GIF's maximum 256-color palette. This is the best file format for images that preserve the color source. The format is suitable for conveying the ideal balance of tone. The animated PNG file is available in APNG format. These files usually have a transparent background.

Cons: Best suited for large file sizes. The PNG format itself does not support animated graphics.

Applicability: Image editing, web images, images taking into account layers such as transparency or fading effects.

TIF file extension

Abbreviation for: Tagged Image File Format - a format for storing raster graphic images.

File extension: .tif / .tiff

A flexible and easily extensible file format capable of storing files with high color depth. These files have a transparent background. They are ideal for company logos.

Cons: 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 exchanging images.

File extension: .gif

Although GIF has a low compression ratio compared to most video formats, it is the most popular format among users for image animation.

Cons: 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 diagrams, logos, and animations that are more than 50% single color.

BMP image file format

Abbreviation for: Bitmap Picture - literally a format for storing bitmap images

File extension: .bmp

This format was developed by Microsoft and is designed for storing large, uncompressed files inside Windows.

Cons: This format does not use compression.

Applicability: The format's simplified structure makes bmp files ideal for Windows programs.

These are the most common image file formats used by users nowadays. Now that you know which one is ideal for a particular purpose, you can better understand which graphic file formats to use for yourself.

Image formats can be divided into three broad categories:

• lossy compression,
• lossless compression,
• uncompressed

Uncompressed formats take up the most data, but are accurate representations of the image. Raster formats such as BMP are usually uncompressed, although there are also compressed BMP files.

There are a few key factors you should be aware of...

First, there are two types of compression: Lossless and Lossy.

Lossless means the image is reduced in size but does not degrade the quality. Lossy means that the image is made (even) smaller, but at the expense of quality. If you save an image in Lossy format over and over again, the image quality will get worse and worse.

WITH indexed this means that an image can only store a limited number of colors (usually 256), which are chosen by the author of the image, with Direct, this means that you can store many thousands of colors that were not chosen by the author.

BMP- Lossless/Indexed and Direct

This is an old format. It's Lossless (no image data is lost when saved) but also virtually no compression, which means saving since BMP results in VERY large file sizes. It may have both Indexed and Direct palettes, but that's small consolation. The file sizes are so unreasonable that no one ever uses this format.

Okay: nothing really. There is nothing that BMP is superior to or not improved by other formats.

GIF- Lossless/Indexing only

GIF uses lossless compression, which means you can save the image over and over again and never lose any data. File sizes are much smaller than BMP because good compression is actually used, but it can only store an indexed palette. This means that there can only be 256 different colors in a file. This sounds pretty small, and it is.

GIF images can also be animated and have transparency.

Good for: Logos, line drawings and other simple images that need to be kept small. Only actually used for websites.

JPEG- Lossy/Direct

JPEG images were designed to make photographic images as detailed as possible, removing information that the human eye would not notice. As a result, the Lossy format and saving the same file over and over again will result in more data being lost over time. It has a palette of thousands of colors and is great for photos, but the lossy compression means it's bad for logos and line drawings: not only will they look fuzzy, but those images will also have a larger file size compared to a GIF!

Good for: Photography. Also, gradients.

PNG-8- Lossless/Indexed

PNG is a newer format, and PNG-8 (the indexed version of PNG) is a really good replacement for GIF. However, unfortunately, it has a few drawbacks: first, it can't support animation like GIF (maybe it can, but only Firefox seems to support it, unlike GIF animation, which is supported by every browser). Secondly, it has some problems supporting older browsers such as IE6. Third, important software such as Photoshop has very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colors, like GIF.

Good for: The main thing is that PNG-8 works better than GIF, supports Alpha Transparency.

Important Note: Photoshop does not support Alpha Transparency for PNG-8 files. (Damn you, Photoshop!) There are ways to convert PNG-24 to PNG-8 files while maintaining their transparency. One method is PNGQuant, another is saving your files using Fireworks.

PNG-24- Lossless/Direct

PNG-24 is an excellent format that combines Lossless encoding with direct color (thousands of colors, like JPEG). It's very similar to BMP in this regard, except that PNG actually compresses images, so it results in significantly smaller files. Unfortunately, PNG-24 files will still be much larger than JPEGs, GIFs, and PNG-8s, so you'll still need to consider whether you want to use it.

Although PNG-24 allows thousands of colors when compressed, they are not intended to replace JPEG images. A photo saved as PNG-24 will likely be at least 5 times larger than an equivalent JPEG image, adding very little to the apparent quality. (Of course, this may be a desirable result if you don't care about file size and want the best quality image you can.)

Like PNG-8, PNG-24 supports alpha transparency.

I hope this helps!

Usually they are either:

No losses Lossless compression algorithms reduce file size without losing image quality, although they are not compressed into a small file as a lossy compression file. When image quality is considered higher than file size, lossless algorithms are usually chosen.

Lost compression Lossal compression algorithms exploit the inherent limitations of the human eye and discard invisible information. Most lossy compression algorithms allow you to change quality levels (compression), and as these levels increase, the file size decreases. At the highest compression levels, image degradation becomes noticeable as "compression artifact." The images below show noticeable artifacts from lossy compression algorithms; Select thumbnail to view full-size version.

Each format is different, as described below:

JPEG JPEG (Joint Photographic Experts Group) files are (in most cases) a lossy format; DOS file name extension is JPG (other OS may use JPEG). Almost every digital camera can save images in the JPEG format, which supports 8 bits per color (red, green, blue) for a 24-bit total, creating relatively small files. When it's not too high, compression doesn't noticeably degrade image quality, but JPEG files do suffer generational degradation when repeatedly edited and saved. Photographic images may be better saved in lossless JPEG format if they are re-edited, or if small "artifacts" (defects caused by the JPEG compression algorithm) are unacceptable. The JPEG format is also used as an image compression algorithm in many Adobe PDF files.

TIFF TIFF (Tagged Image File Format) is a flexible format that typically stores 8 bits or 16 bits per color (red, green, blue) for 24-bit and 48-bit totals respectively, using either TIFF or TIF file names. TIFF's flexibility is both a blessing and a curse because no reader reads every TIFF file type. TIFFs are lossy and lossless; some offer relatively good lossless compression for bilevel (black and white) images. Some digital cameras can save in TIFF format, using the LZW compression algorithm for lossless storage. The TIFF image format is not widely supported by web browsers. TIFF is still widely used as the standard photograph file in the printing business. TIFF can handle device-specific color spaces, such as CMYK, defined by a particular print ink set. ​​

PNG The PNG (Portable Network Graphics) format was created as a free, open-source successor to GIF. The PNG file format supports truecolor (16 million colors), while GIF only supports 256 colors. A PNG file is different in that the image has large, evenly colored areas. The lossless PNG format is best for image editing, while lossy formats such as JPG are best for the final distribution of photographic images because JPG files are smaller than PNG files. Many older browsers do not currently support the PNG file format, however, with Internet Explorer 7, all modern web browsers fully support the PNG format. Adam7 adaptation allows early preview even if only a small percentage of the image data is transferred.

GIF GIF (Image Interchange Format) is limited to an 8-bit palette or 256 colors. This makes the GIF format suitable for storing graphics with relatively few colors, such as simple charts, shapes, logos, and cartoon-style images. The GIF format supports animation and is still widely used to provide image animation effects. It also uses lossless compression, which is more effective when large areas are a single color and is ineffective for detailed images or faded images.

BMP The BMP (Windows bitmap) file format processes graphics files in the Microsoft Windows operating system. Typically, BMP files are uncompressed, so they are large; The advantage is their simplicity, wide acceptance and use in Windows programs.

Use for web pages/web applications

Below is a quick overview of these image formats when using them with a web page/application.

PNG works great in IE6 and above (requires a small CSS patch to make it work transparently). Great for illustrations and photographs. JPG is great for online photos. GIF is good for illustrations when you don't want to go to PNG BMP should not be used online in web pages - wastes bandwidth

Since others have covered the differences, I'll please use.

TIFF is commonly used by scanners. It makes huge files and is not really used in applications.

BMP is uncompressed and also makes huge files. It is also not used in applications.

GIF has been used all over the internet, but has been disliked because it only supports a limited number of colors and is proprietary.

JPG/JPEG is mainly used for any photo quality, but not for text. The lossy compression used tends to produce sharp lines.

PNG is not as small as JPEG, but it is lossless, so it is good for images with clear lines. It is widely used on the Internet now.

Personally, I tend to use PNG wherever I can. This is a good compromise between JPG and GIF.

JPG > Joint Photographic Experts Group

1 JPG images support 16 million colors and are best suited for photographs and complex graphics

2 JPGs do not support transparency.

Png > portable network graphics

1 It was used as an alternative to the GIF file when GIF technology was copyrighted and required permission to use.

2 PNGs allow for 5-25% more compression than GIFs, and with a wider range of colors. "PNGs use two-dimensional interleaving, which makes them load twice as fast as GIF images."

3 An image that has many colors or requires advanced variable transparency, PNG is the preferred file type.

GIF > Graphics Interchange Format

1 Reduces the number of colors in the image to 256.

2 GIFs also support transparency.

3 GIFs have the unique ability to display a video-like sequence of images called an animated GIF.

4 If the image has multiple colors and doesn't require any advanced alpha transparency effect, GIF is the way to go.

SVG > Scalable Vector Graphics

1 SVG is an XML-based web standard that describes both static images and animations in two dimensions.

2 SVG allows you to create very high-quality graphics and animations that do not lose detail as their size increases/decreases.

These names refer to different ways of encoding pixel image data (JPG and JPEG are the same thing, and TIFF might just wrap the jpeg with some extra metadata).

These image formats may use different compression algorithms, different color representations, different ability to carry additional data other than the image itself, etc.

For web applications I'd say jpeg or gif are good enough. Jpeg is used more often due to its higher compression ratio, and gif is usually used for light animation, where flash (or something similar) is more of a kill, or places where a transparent background is required. PNG can also be used, but I don't have much experience with this. BMP and TIFF are probably not good candidates for web applications.

About the PNG format. Brief test drive

• Web design

Be careful, there are a lot of pictures! Everyone is clickable.

PNG

So what are the advantages of the format?

• Full support for alpha-transparency. Allows you to make areas of the image transparent and translucent.
• High-quality compression algorithm without loss of quality. Similar to LZW, but a little more efficient.
• Possibility of interlaced scanning, and (unlike GIF) both vertically and horizontally at the same time.
• Built-in gamma correction. Allows you to attach display settings to an image, so that on different monitors the image is displayed exactly the same as the author’s.

Since PNG-24 uses a full color palette, it's difficult to compare it to GIF. PNG-8 with its index palette is more similar here. Here are some screenshots for comparison:

Practice (as well as the opinion of colleagues) shows that GIF compresses simple small images better. But when it comes to large images, GIF still remains behind.

In addition, another rather big advantage: in fact, contrary to popular belief, PNG-8 can also use a full alpha channel, like PNG-24. Photoshop just doesn’t support it, so Sergei Chikuenok from Lebedev’s studio recommends using Adobe Fireworks, which is what I decided to do (A little about that).

And in this battle, if we don’t need transparency, PNG loses, so to speak, in the “middle market segment”. Although, if you link the ICC profile to JPEG, the difference in volume becomes unnoticeable. My measurements were taken on JPEG 100%. And with lower quality (with a difference that is not particularly noticeable to the eye), the comparison, unfortunately, becomes even sadder.

In general, take a look for yourself:

UPD In general, the results depend significantly on the image itself: PNG compresses gradients and solid areas better, but for photographs JPEG gives the best compression. Although, they say (it’s hard to believe it myself), in large photographs PNG is the leader here too - this was just checked in the process of converting screenshots for the article (PNG versus JPEG-70% - a gain of one and a half times).

Life after Photoshop or compress further

Google and download - . The program, about 1.5 MB with a minimum number of settings, allows you to run (including in batch) PNG files with compression.

On a package of icons (90 files with a transparent background without any special bells and whistles), the gain in volume averaged about 10-15%. Not particularly impressive, of course. But for the example files discussed above, the compression percentage ranged from 10% (large poster without transparency) to 72% (translucent rectangles). So, it’s worth a try, especially since working with the utility does not take much time.

In addition to PNGOut, there are many other programs that I don’t want to review in detail right now:

• OptiPNG - does not have a graphical shell and works from the command line. According to unverified data, the compression percentage is lower. UPD but its users claim the opposite.
• Pngcrush - I haven’t tried it myself, they say “it tries to optimize the file in all available ways,” but the main thing is not “how it tries,” but “how it optimizes.”
• and a number of utilities that simply clean out service garbage from files.

Adobe Fireworks

I did not look at PNG-24 and PNG-32 in detail. As far as I understand, in their terminology 32 is with an alpha channel, and 24 is without. According to preliminary estimates, Photoshop copes with this task better.

But PNG-8 broke all my (and most of my colleagues) stereotypes. The final file is much smaller than GIF and there is full support for transparency in two ways: alpha and index transparency. The only drawback compared to PNG-24 is the index palette, although it all depends on the needs. My personal opinion is PNG-8 in most cases does both GIF and PNG-24.

PNG vs GIF in AF, although Fireworks doesn’t work very well with the usual GIF-JPEG by default (I haven’t played with the settings). But even in comparison with Photoshop's result, the difference is in favor of PNG:

And here is all the variety of PNG-8 - for this it is worth installing Adobe Fireworks:

For comparison: the same file, thanks to the efforts of Photoshop, weighed 3,188 bytes versus the now obtained 450, that is, 6 times more.

Verdict

For transparent design elements, you should use PNG-8 (less often PNG-24, when the PNG-8 palette is not enough to save the image without loss).

For photographs and complex graphics, JPEG continues to be the leader due to its powerful image optimization capabilities. Although in some cases PNG-8 may be sufficient - as before, with GIF, bold experiments are the key to success. UPD But for really large images, JPEG still loses.

UPD I’m really not an expert and the review was written on my knees, as evidenced by the epithet “brief”; perhaps not the best examples. Therefore, thanks to everyone who took an active part in the discussion, especially

Hello everyone on the blog. In general, in this article I want to dispel the myth about the two data extensions for pictures, jpg and png, the best of them has not yet been found. The thing is that both, depending on the application and the texture itself, can affect the speed of the site and optimization. What puzzled you a little? Then read on.

What are the differences between the two formats png and jpg?

It’s like a picture and what’s wrong with that, but it’s all about the colors. The jpg format is the most common because compared to others:

1. It weighs less (but this is a controversial issue, we will see later).
2. Easily compressible.
3. High number of colors in the rendering.

The most common format is png-8 in website development, because compared to its brother png-24, they have a huge difference in file size, so the second one is used very rarely.

The main difference between the two formats is that jpeg is stationary and you can’t extract colors from it in order to remove unnecessary ones, and thereby reduce the volume of the picture, and that jpg does not have a transparent background; this format does not support it.

I destroy myths.

The most important myth of all website builders is that you should never use png, this is just nonsense, images of this format can be compressed and optimized better than jpg, many times with the right approach.

How to choose the right format?

Look, for example, let me take a picture of our Russian flag.

I will consider all operations using the example of Photoshop, it’s easier this way. I specifically chose a large size and low color, only three colors, and now I want to save it, look what’s happening, first I’ll take the jpg format.

But what if I save it as png.

The size has decreased by almost 6 times. I didn’t do anything, I just set the minimum number of colors, it’s just super, I think. This method is suitable for those who do not care about color rendering, like on my blog, all the screenshots are taken exactly this way, I set the colors to a minimum so that it is readable and everything is fine.

This is the moment that needs to be scanned; this applies not only to websites. The size on the hard drive is not rubber, my mother’s photos and pictures for work generally take up 246 gigs, and she wonders why there is so much space and not enough space. You just need to use my method and that’s it.

Of course, if the picture is multicolored with many colors and shadows, then png will not help, and then I recommend using

• Review all the images on the blog and choose which format is better, jpeg or png, to use for different types of pictures. Even those that have already been compressed and optimized, because they can be cut down even more without losing quality.
• When writing new articles, evaluate this moment, I know that it will take more time, but