Finally understand PNG (2023)

Finally understand PNG (1)

Author: Christoph Erdmann (@McSodbrenner)

Last update: 06/06/2021

15 minute read

English version |German version

Finally understand PNG (2)

This article is the follow-up article ofI finally understand JPG, which I'd like to recommend to anyone who wants a more in-depth, but generally understandable introduction to JPG compression. However, this time I want to explain how a PNG works and show you at the end of the article how to reduce the file size of your PNGs using Compress-Or-Die (which I'll call COD in the rest of the article).

As in the previous article, I am going to simplify some aspects if it makes it more understandable, because the buzzword math bingo is of no use to anyone and very few who want to reduce the size of their image are mathematicians, but rather web workers. or specialists in digital advertising. .

In order to be able to compare the file sizes resulting from the use of different tools (compress-or-die.com, Photoshop, TinyPNG and Co.), I refer to the sectionComparable file sizesin the JPG article.

Now let's get started. Look at these two photos of balls:

(Video) How PNG Works: Compromising Speed for Quality

4.492 Mrd128.025B
Finally understand PNG (3)Finally understand PNG (4)

Both images look the same, have the same width and height, both are PNG, but the file size is significantly different. Because?

In the course of the article I will continue to work with this image and bring you closer to the subtleties that lead to this fact.

color depths

Most of his images are inRGB-Fabmodell(as in our example image) and therefore a pixel of your image consists of the three colors (or color channels) red, green and blue, each of which can have 256 hues. 256 increments, since each color in a pixel must be represented using 1 byte of memory. And a byte can represent exactly 256 values. With a memory consumption of 3 bytes, a full pixel can be represented (1 byte for red, green, and blue).

Now if you have an 800 x 600 px image, this results in a memory consumption of 800 x 600 x 3 bytes = 1,440,000 B = 1.44 MB. This is also about the size of an uncompressed BMP image (and the size of A3.5" HD floppy disk...for those who can still remember).

If you wanted to describe color depth, you could talk about a 3-byte image. However, since there are color depths other than 1 byte per channel, the designation is 24-bit image (ie, 3x8-bit image). used for an image, because 1 byte consists of 8 bits. The color depth means the memory consumption of one pixel.

The other two color depths you'll come across when puzzled by the PNG image format are 32-bit and 8-bit:

APNG de 32 bitsSimilar to a 24-bit PNG, but also includes an 8-bit channel for transparency information (commonly called an alpha channel). Therefore, an image can also contain transparent areas in 256 gradations.

By the way, Photoshop doesn't show a selection box for 32-bit PNG in the "Save for Web..." dialog. You need to select "PNG-24" and check the "Transparency" box.

APNG de 8 bitsit works a little differently. Up to 256 colors with their information of red, green, blue and transparency are combined in one callPallette, and for each pixel only the position of the color in the palette is stored. So to store a pixel you only need 1 byte of memory for the position of the color in the palette. Then there's pallet storage. However, such an image is limited to a maximum of 256 colors, which is more than enough for most images that it makes sense to save as PNG. Therefore, this is the most significant color depth in PNG compression.

Here is a brief description of the three color depths:

PNG de 8 bitsPNG de 24 bitsPNG de 32 bits
palette pictureimagen RGBRGBA image
Maximum 256 colors16.8 million colors16.8 million colors + transparency

This is one of the reasons why the first PNG with the bullets is smaller than the other. The smaller first PNG is an 8-bit PNG, while the larger PNG is a 32-bit PNG.

We now know what color depths mean and how to calculate the file size of an uncompressed image, but the data still takes up a lot of space and needs to be compressed accordingly.

the compression

A PNG is compressed in three steps: pre-filtering, dictionary-based encoding via LZ77, and finally entropy encoding according to a Mr. Huffman.

Step 1 – Prefiltering

Data is best compressed when it is repeated as often as possible. So by pre-filtering you are trying to generate the same data from different data.

(Video) Hiding Information Inside of PNG

Let's look at the red values ​​of a 5x5 px image:

The red tones...... and its numerical representation
Finally understand PNG (5)Finally understand PNG (6)

On each row, you can use the "Sub" filter (one of 5 possible filters), which means we only remember the difference from the previous value. This step can be undone later so no data is lost. In our example, each line indicates that the "Sub" filter was used. Our save values ​​now look like this and can now be compressed much better:

The values ​​filtered by "Sub".
Finally understand PNG (7)

These filters, along with the internally used Deflate compression, are the reason why PNG is one step ahead of GIF and is therefore almost always smaller. And they offer an important tactic for optimizing PNG compression.

Each PNG algorithm has the thankless task of figuring out which filter is best for which row, in order to iterate over as much data as possible, it may no longer be similar to row 5. Which solution is better?

Finding the optimal filter for each line is a science in itself, which you could of course get close to with the raw power of the computer. filters are selected based on experience and assumptions. Some programs do this better than others.

Another option would be to adjust your image data to make the filters work better. So this is a lossy process, since the original image data can no longer be recovered.

For example, if you have a black area that is not really black, but instead consists of many almost black pixels with different intensity values, if you have an unfavorable situation in terms of compression equal black value for all pixels, you will see that your file the size is greatly reduced, although your eye sees no difference.

Step 2: Dictionary-based encoding with LZ77

LZ77is a lossless data compression method that attempts to find repetitive data streams. If the algorithm finds a previously used data stream in the file, it replaces it with a reference to the first stream: "Here, use the data stream that appears 1300 characters above and is 200 characters long."

Therefore, a PNG is excellent for storing repetitive data. If you have the same representation of objects in a PNG file, only the first screen will take up space. The others are provided to you free of charge.

If you're creating a PNG in COD, you've probably already seen the caption imagecompression view(Also affectionately called on a forumpredator vision). This image shows you how much memory was invested in a specific area of ​​the image. Bothcompression views for spherical images are as follows:

4.492 Mrd128.025B
Finally understand PNG (8)Finally understand PNG (9)
Finally understand PNG (10)Finally understand PNG (11)

Dark blue means that this area uses almost no memory, light blue means some memory, yellow means more memory, and red means a lot of memory.

In the first image we can clearly see that only the first appearance of the colored balls costs storage space. All the others were made available to you "for free" as their representations exactly matched the first ball of the same color.

And in the second image, you can now clearly see that the balls look the same, but actually neither ball corresponds to the other. Each ball must be stored individually Gradient and light noise over the entire image.

Beware of the sliding window

In fact, you must have run into something... why does the third red sphere take up memory when two identical red spheres have already been used in the image?

(Video) FROZEN | "In Summer" Song - Olaf | Official Disney UK

This is because PNG internally uses thedeflationalgorithmDeveloped in 1996 by Phil Katz, who used a 32 kB sliding window due to low storage capacity at the time. 32,000 characters are checked for repeating sequences. If the distance between two objects is too great, both objects are no longer recognized as equal and therefore each object is saved individually.

I can show you that by building aPuenteand coloring the ball red between the second and third balls as well.

4.492 Mrd$4,050
Finally understand PNG (12)Finally understand PNG (13)
Finally understand PNG (14)Finally understand PNG (15)

The third red ball disappears from thecompression viewand the file becomes even smaller.

Step 3: Entropy coding with Huffman

This is the final step of PNG compression. An attempt is made to represent each character with the smallest possible bit sequence to further reduce the file size. With some computing power it is possible to have some effect with this method. This is attempted, for example, when you set COD to "Extreme Compression". Otherwise, there is nothing important in this method for understanding PNGs.

7 tricks to reduce file sizes

Now I want to show you a few things to pay attention to in order to save as much file size as possible when creating PNG files.

1. Compress original data

Take care to compress the original data and not image data that may already have fallen victim to a non-PNG image compression algorithm.

8.494 Srd
Finally understand PNG (16)Finally understand PNG (17)

The source image here is a JPG, which produces artifacts that are "fatal" to PNG compression. Firstly, a lot of colors are generated, secondly, image patterns are generated that are not contained in the original and now also need to be saved.

Interestingly, it can also be seen in thecompression view, if an image has been converted to JPG, in this case thecompression view, as in this example, looks like a block (due to the 8x8 pixel grid of the JPG compression). If this is the case, try to keep the original image data.

The result should look more like this and be significantly smaller:

3.847 Mrd
Finally understand PNG (18)Finally understand PNG (19)

2. Cloning clean objects

In many graphics programs, it is not only possible to edit full pixels, but also to move objects by half a pixel. However, if you want to safely save a graphic of cloned objects as a PNG, the objects must be absolutely identical so that only the first object takes up disk space. Luckily you can see this in thecompression viewvery fast.

Be careful not to move, scale, distort, rotate, etc. accidentally repeat objects multiple times in your image (especially zooms that are not 100%).

3. Dirty transparency

"Dirty transparency" refers to areas of the image that are 100% transparent but still contain all the color information in the other color channels. This is often the case with masked images and wastes space with invisible image information.

Areas with 100% transparency are automatically cleaned up by COD, but improper masking with the brush can also leave areas with 98% or 99% transparency, which take up space because the original image content is still there.

The environmentlenaactually it should be transparent, but in thecompression viewYou can clearly see that some data is compressed there:

(Video) Can a simple NPC become self aware? - Wood Cutter

$36,948
Finally understand PNG (20)Finally understand PNG (21)

The adjusted image is 11% smaller with the same image print:

$32,990
Finally understand PNG (22)Finally understand PNG (23)

4. Use 8-bit color depth

Normally, the quality of an 8-bit PNG should always be sufficient. Therefore, the generation of an 8-bit PNG also defaults to COD. Your image will be reduced to a maximum of 256 colors. Missing colors are simulated byTremble.

Play around with the slider for the number of colors. Straight, flat images, such as logos, rarely need 256 colors. A good rule of thumb is to calculate eight additional colors for each color in the image so that thesmoothinglooks clean If a logo consists of the colors red, blue and black, setting the color slider to 24 should suffice.

5. Posterization

Posterization is the process of reducing color within an image. This makes sense because there are often more colors in an RGB image than the human eye can discern. Tonal separation now combines very similar colors into one. This only bothers when the colors really differ.

Because there are more of the same color values ​​in an image, PNG filters work better and the file becomes smaller. You can adjust this in COD using Quality Control for 24-bit PNG.

$156,83082.613B
Finally understand PNG (24)Finally understand PNG (25)
24-bit PNG at 50% quality.

6. Selective blur

Especially with grainy images with a bit of noise, it's useful to work with selective blur, which you can find in COD in the "Preprocessing" area. It ensures details stay sharp, but surfaces look blurry. PNG filters work best with the resulting clean surfaces, the image becomes smaller.

$156,830131.242B
Finally understand PNG (26)Finally understand PNG (27)
Slightly softened with selective blur.

7. JPG transparency

Normally, JPG does not support transparency. But using javascript can fix this error as long as the image is used in the web environment. Upload a transparent PNG to COD and you will get a transparent JPG and the corresponding HTML code to embed the image on your website. Especially with large transparent images like product images, the resulting image will be much smaller than a transparent PNG. It's even smaller than an 8-bit PNG.

47.219B$18,020$10,685
Finally understand PNG (28)Finally understand PNG (29)Finally understand PNG (30)
PNG de 32 bits.8-bit PNG with 256 colors.JPG with transparency.

And now we are at the end. If you have any questions, suggestions, requests or similardrop me a line.

Otherwise you can also experiment with the spherical image:

Open the ball image in the PNG compressor

Compare COD to the competition and see for yourself how good COD really is:

further reading

Did you like this article?

So please share it with others!

Facebook Gore Reddit

FAQs

Is PNG more clearer than JPEG? ›

PNG is a high-quality graphics format – generally higher in quality than JPEGs, which are compressed to save space. The PNG format uses lossless compression and is generally considered a replacement to the Graphics Interchange Format (GIF format).

What is a PNG good for? ›

What is a PNG file? Portable Network Graphics files (PNGs) are compressible and like JPEGS, can handle 16 million colors. They're mostly used for web graphics, logos, charts, and illustrations, rather than high-quality photographs, because they take up more storage space than JPEGs.

Are PNG files bigger than JPEG? ›

The trade-off with PNGs is that their lossless compression creates bigger files, since they retain much more information. They're generally larger than JPEGs and GIFs, use up additional storage space and potentially slow down the responsiveness of web pages.

Which is better quality JPEG or PNG? ›

The biggest advantage of PNG over JPEG is that the compression is lossless, meaning there is no loss in quality each time it is opened and saved again. PNG also handles detailed, high-contrast images well.

What is highest quality image format? ›

TIFF is the workhorse format for high-resolution printing, including art photography and other fine artwork. It's a lossless image file format that retains extremely high photographic quality for scanning and printing. However, TIFF file sizes are usually huge, making them difficult to share for general purposes.

What image format is best for quality? ›

Along with RAW, TIFF files are among the highest quality graphic formats available. If you're printing photos—especially at enormous sizes—use this format. You are making a high-quality scan. Using TIFF to scan your documents, photos and artwork will ensure that you have the best original file to work off of.

What are the pros and cons of PNG? ›

PNG: Portable Network Graphics
AdvantagesDisadvantages
Lossless compressionsNot suitable for print
Supports (semi)-transparency and the alpha channelRequires more memory space
Full colour spectrumNot universally supported
Animations are not possible
May 4, 2021

What are the disadvantages of a PNG? ›

The disadvantages of the PNG format include:
  • Bigger file size -- compresses digital images at a larger file size.
  • Not ideal for professional-quality print graphics -- doesn't support non-RGB color spaces such as CMYK (cyan, magenta, yellow and black).
  • Doesn't support embedding EXIF metadata used by most digital cameras.

Are PNG images safe? ›

According to cybersecurity company Avast, hackers now use steganographic embedding to compromise PNG files and attack high-profile companies and government agencies. Essentially, “steganographic embedding” is when malware is coded into an image file, and it's tough for antivirus and anti-malware software to detect.

What is the best size for PNG? ›

Some common image sizes are 640 × 480, 800 × 600, and 1024 × 768 pixels, which also happen to be common dimensions for computer displays. In addition to horizontal and vertical dimensions, a raster image is characterized by depth. The deeper the image, the more colors (or shades of gray) it can have.

Is PNG a high resolution? ›

png is a lossless compression file type, which means it can withstand compression into smaller sizes without sacrificing image quality. The high resolution of the original is maintained throughout the compression process, and once the image is unpacked and reverted to its normal size, the quality is the same.

What is the max size of a PNG? ›

But because of their fixed dimensions, BMP files generally won't exceed 4GB in size. There is no size limit to a PNG — they can easily be 140GB or larger.

Can PNG files be used for print? ›

Several file formats, including JPG, PNG, TIFF, and PDF, can work for printing.

Is PNG lossy or lossless? ›

Both PNG and TIFF files benefit from lossless compression, meaning that no matter how often you save, open, or resize them, they'll maintain their quality.

Is PNG higher quality than PDF? ›

png should be fine for small images. It's what all the android icons are anyway. PNG is a bitmap format, PDF is a richer format which may include vector data (including text). For scaling PDF is much better.

How do I make a PNG file higher resolution? ›

You can simply increase the resolution of PNG photos with Fotor.
  1. Open the Fotor photo editor and upload your PNG image.
  2. Find the "AI Enlarger" tool and apply it, Fotor will increase the resolution and quality of your image within seconds.
  3. Download your high-quality image in JPG or PNG format.

What image format doesn't lose quality? ›

TIFF (.

TIFF or Tagged Image File Format are lossless images files meaning that they do not need to compress or lose any image quality or information (although there are options for compression), allowing for very high-quality images but also larger file sizes.

How many pixels is a good quality photo? ›

Hi-res images are at least 300 pixels per inch (ppi). This resolution makes for good print quality, and is pretty much a requirement for anything that you want hard copies of, especially to represent your brand or other important printed materials.

What are some issues in PNG? ›

These include: (1) weak governance, (2) economic inequality, (3) vulnerability to climate change and limited adaptive capacity, and (4) intercommunal and gender-based violence.

Is PNG best for logo? ›

The best file format for a transparent background is PNG. If you're using your logo for any digital purpose, choose PNG files–and go with SVG or EPS files if you're sending your logo to a designer for tweaks and edits.

Does PNG allow transparency? ›

The GIF and PNG formats also both support transparency. If you need any level of transparency in your image, you must use either a GIF or a PNG. GIF images (and also PNG) support 1-color transparency. This basically means that you can save your image with a transparent background.

Do PNG images degrade? ›

Lossless Image Quality

The compression used when creating PNG results in no loss in quality, so the image can be saved, edited, and opened again and again without degrading over time.

Does PNG get blurry? ›

Your image may appear blurry due to a compression issue. Whenever you resize an image, text or graphic, you are also shrinking and enlarging the pixels of that image/text. While you shouldn't expect a loss in quality with minor resizing, any substantial resizing of JPG images will result in a visibly poorer image.

Can anyone open a PNG image? ›

The file format isn't patented, so you can open a PNG using any image editing software without the need for licensing.

Can a PNG file be malware? ›

A threat group tracked as 'Worok' hides malware within PNG images to infect victims' machines with information-stealing malware without raising alarms. This has been confirmed by researchers at Avast, who built upon the findings of ESET, the first to spot and report on Worok's activity in early September 2022.

Does PNG have copyright? ›

How Is Copyright Protected in PNG? Copyright itself does not depend on official registration procedures. A created work is considered protected by copyright as soon as it exists.

Why is my PNG so big? ›

A PNG format supports over 16 million colours and is best known for its alpha channel feature - transparency. For example, a logo with a transparent layer seamlessly blends with a website's background. PNG is a lossless compression format where the file size is significantly larger, taking up valuable storage space.

What is PNG format image? ›

What is a PNG file? PNG is short for Portable Network Graphic, a type of raster image file. It's particularly popular file type with web designers because it can handle graphics with transparent or semi-transparent backgrounds.

Does PNG lose quality when enlarged? ›

Remember that GIF and JPEG codecs are “lossy,” meaning some resolution will be lost when scaling images. PNG files, on the other hand, will not degrade in quality. Note that the quality can be lost when resizing or re-formatting bitmap files such as GIF, JPEG, and even some PNGs.

How many layers does PNG have? ›

A PNG file does not have multiple layers. It does have offset information for layers but that is the extent of it.

How do I know the resolution of a PNG? ›

Right-click on the image and then select "Properties." A window will appear with the image's details. Go to the "Details" tab to see the image's dimensions and resolution.

Is A PNG the same as a PDF? ›

The PDF is very different from the PNG. In fact, they're not even the same file type (PDF is a document, PNG is an image). However, sometimes a PDF will have media within itself that you'll want to use outside the document format.

What can read a PNG file? ›

How to open PNG files
  • Microsoft Paint (included with Windows)
  • Adobe Photoshop.
  • IrfanView.
  • FastStone Image Viewer.
  • XnView.
Jan 14, 2022

Can all computers read PNG? ›

There shouldn't be any problem opening or using the PNG file format on any operating system. It is a standard file type. You can open it with native computer image software, such as Windows photo viewer.

Which is better PNG or TIFF? ›

When printing or publishing commercial or professional work, use TIFF. For designs that require the use of photos that require transparency, PNG is recommended. For web designers and graphics artists who work with responsive websites, SVG is the preferred format.

Is SVG better than PNG? ›

PNGs and SVGs support transparency — so they're both excellent choices for online logos and graphics. It's worth noting that PNGs are one of the best choices for a raster-based transparent file. If you're working with pixels and transparency, PNGs are a better option than SVGs.

How much can PNG compress? ›

In size, you're typically looking at a 0-10% reduction. It's better than nothing, but if you're looking to heavily compress your PNG images, lossy compression or using WinZip are better ways to go.

Should I print PNG JPG or PDF? ›

Which has better quality — JPEG or PDF? PDFs will often be higher quality than JPEGs. This is because JPEGs compress images, leading to a loss in quality that you can't regain. Visuals saved as PDF are of very high quality and even customizable, making them the file format of choice for printers.

How do I convert a PNG file to high resolution PDF? ›

Open the folder where the PNG image is stored in a File Explorer window. Right-click the file and choose Print. In the Print Pictures window that opens, choose Microsoft Print to PDF. Choose the paper size, quality, how you want the image to appear, and how many copies or pages you want to save in the new PDF file.

Which is better JPEG or PNG or PDF? ›

The intent here was to make some key distinctions between these three common formats, namely that PNG is superior to JPG for retaining image quality in web uploads, while PDF, because it's secure and widely adopted, is better suited for electronically sending a variety of files over the Internet.

Are PNG images high resolution? ›

The PNG file format is widely used on websites to display high-quality digital images. Created to exceed the performance of GIF files, PNGs offer not just lossless compression, but also a much broader and brighter color palette.

Is PNG the highest resolution? ›

PNG format

This is why PNG is considered the best image format for editing, after RAW and TIFF formats. You can save the image in the highest quality even after editing and resave action. However, due to lossless compression, its file size gets large.

Does converting JPG to PNG improve quality? ›

In seconds, you can convert your JPG images to PNG format. PNG files offer capabilities such as transparency, faded edges, and higher quality compression.

What resolution should I make my PNG? ›

Ideal screen image resolution (detail an image holds) is 72 pixels per inch. If an image is less than 72ppi, it will appear fuzzy (what we call pixelated).

What is a good size for a PNG? ›

Some common image sizes are 640 × 480, 800 × 600, and 1024 × 768 pixels, which also happen to be common dimensions for computer displays.

How do I change a PNG to high resolution? ›

You can simply increase the resolution of PNG photos with Fotor.
  1. Open the Fotor photo editor and upload your PNG image.
  2. Find the "AI Enlarger" tool and apply it, Fotor will increase the resolution and quality of your image within seconds.
  3. Download your high-quality image in JPG or PNG format.

How do I know if my PNG is 300 DPI? ›

To find out an image's DPI in Windows, right-click on the file name and select Properties > Details. You'll see the DPI in the Image section, labeled Horizontal Resolution and Vertical Resolution.

How do I make a PNG image clearer? ›

How to sharpen PNG?
  1. Press START to launch Raw.pics.io app.
  2. Upload your PNG pics that you want to clean.
  3. Choose Edit in the left sidebar to open Raw.pics.io editing toolbox.
  4. Select Sharpen among all other tools on the right.
  5. Save your modified PNG pictures and find them in your downloads folder.

Is PNG readable? ›

The PNG format is both lossless and supports transparency, making it great for webpages. You can view PNG files in almost any graphic program, image viewer, and web browser.

When should you use a PNG instead of JPEG? ›

The general rule is to use JPGs for photographs, images that don't have a transparent background, and other memory intensive files. And to choose PNGs for graphics, files with transparent backgrounds, and other images where clarity and color vibrancy are important.

Videos

1. Understanding and Analysing Trusses
(The Efficient Engineer)
2. RUGBY LEAGUE - QUEENSLAND CUP 2023 - ROUND 1 - WESTERN CLYDESDALES VS PNG HUNTERS
(Elite XIII)
3. Faint [Official Music Video] - Linkin Park
(Linkin Park)
4. What Is A PNG File? - PNG Meaning Simplified! | tentononline.com
(Geoff Blake - TenTonOnline)
5. The Second Amazon: The Secrets of Papua New Guinea's Sepik River | Foreign Correspondent
(ABC News In-depth)
6. MINECRAFT REVEALING MY REAL VOICE! #shorts
(GE3T3E)

References

Top Articles
Latest Posts
Article information

Author: Rueben Jacobs

Last Updated: 09/04/2023

Views: 6332

Rating: 4.7 / 5 (57 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Rueben Jacobs

Birthday: 1999-03-14

Address: 951 Caterina Walk, Schambergerside, CA 67667-0896

Phone: +6881806848632

Job: Internal Education Planner

Hobby: Candle making, Cabaret, Poi, Gambling, Rock climbing, Wood carving, Computer programming

Introduction: My name is Rueben Jacobs, I am a cooperative, beautiful, kind, comfortable, glamorous, open, magnificent person who loves writing and wants to share my knowledge and understanding with you.