Actions

Portable Network Graphics (PNG)

Definition of Portable Network Graphics (PNG)

Portable Network Graphics (PNG) is a format for storing bitmapped (raster) images on computers. PNG was designed to be the successor to the once-popular GIF format, which became decidedly less popular after Unisys and CompuServe announced in 1995 that programs implementing GIF would require royalties due to Unisys' patent on the LZW compression method used in GIF. PNG is an improved replacement format that offers many new features, including unambiguous pronunciation, multiple CRCs for file integrity checking without viewing, an ultra-clever magic signature that can detect common types of file corruption, better compression than GIF (typically 5%-25%, but often 40% or 50% better on tiny images), non-patented lossless compression, major two-dimensional interlacing scheme support and more. The format also supports 1-, 2-, 4- and 8-bit palette modes as well as truecolor 8- and 16-bit grayscale modes with full alpha transparency in both formats. Additionally PNG supports “palette alpha” mode which effectively transforms a normal RGB palette into an RGBA gamut for cross-platform brightness


What factors should you consider when choosing a graphics format?

  1. Portable Network Graphics: Compatibility: When choosing a graphics format, compatibility considerations should be taken into account. Some formats are more compatible than others, such as Portable Network Graphics (PNG) which are widely supported by different platforms and applications. Other formats such as JPEG may not be as compatible and may require additional software or plugins to view them correctly.

Additionally, some formats offer better compression rates than others which can help reduce file sizes and save on bandwidth usage when sharing images online or in print materials. It is important to consider how much detail needs to be preserved in an image when choosing a format since some may not be able to retain the same level of detail as others.

  1. Portable Network Graphics: Encoding: Both Portable Network Graphics (PNG) and JPEG are image formats that can be used to compress images for web use. JPEG uses lossy compression, meaning that some of the image data is discarded during compression, resulting in lower-quality images. PNG uses lossless compression, meaning that all of the original image data can be recovered after compression.

JPEG is better suited for photographs with large amounts of detail since it can compress them more effectively than PNG. However, due to its lossy nature, it will introduce artifacts into images which become more noticeable as the level of compression increases. Conversely, PNG is better suited for drawings or other images with fewer details since it has fewer artifacts when compressed compared to JPEG.

  1. Portable Network Graphics: Compression: The compression rate of Portable Network Graphics (PNG) files is up to 50% better than that of GIF files. PNG files can achieve compression rates of up to 3:1, meaning that a file size three times larger can be reduced to one-third of its original size. Additionally, PNG files are capable of storing 24-bit images with transparency and 8-bit images without transparency.
  2. Portable Network Graphics: Size: When choosing a graphics format based on size, it is important to consider factors such as file type, compression method, and image quality. For example, PNG files are typically smaller in size than JPEG files due to their lossless compression method. Additionally, some formats such as GIF support transparency which allows them to be used for webpages with overlays or backgrounds that need to be transparently displayed. However, while some formats may provide smaller file sizes than others they may not always provide the best image quality. For example, JPEG images often lose some detail when compressed due to their lossy compression method which may not be noticeable for small images but become more apparent for larger ones.
  3. Portable Network Graphics: Quality: When choosing a graphics format, it is important to consider the quality of the image. Some formats such as JPEG and PNG offer various levels of compression, which can affect the quality of the image.

However, some formats such as BMP do not provide any compression options and therefore offer higher-quality images than those that are compressed.

  1. Portable Network Graphics: Support: The Portable Network Graphics (PNG) format provides support for a variety of options, including:
    • Support for transparency and alpha channels.
    • Support for lossless compression.
    • Support for variable bit depths, ranging from 1 to 32 bits per pixel.
    • Support for gamma correction and color space transformation.
  2. Portable Network Graphics: Ease of Use: When evaluating the ease of use of a graphics format, it is important to consider the factors such as file size, transparency support, compression type, and quality. For example, the PNG format provides better compression than the JPEG format but it has limited transparency support. On the other hand, JPEG format offers better quality than PNG but produces larger file sizes. Additionally, JPEG does not support transparency so images with transparent backgrounds cannot be saved in this format.
  3. Portable Network Graphics: Interoperability: The interoperability factor for Portable Network Graphics (PNG) is high due to its open, non-proprietary nature. The specification is available for free and has been implemented in a wide range of software and web platforms, making it easy to exchange and view PNG images across different systems. Additionally, the standard has been updated several times since its initial release in 1996, offering increased compatibility with newer technologies such as web browsers and mobile devices. Furthermore, the developers behind PNG have worked hard to maintain backward compatibility with older versions of the specification so that users can continue using their existing images without issue.
  4. Portable Network Graphics: Preset Styles: The preset styles for Portable Network Graphics (PNG) are as follows:
    • Transparent: Allows the background to show through the image.
    • Matte: Adds a matte effect to the image, giving it a flat appearance with reduced contrast and saturation.
    • Gradient: Creates a gradient between two or more colors, allowing for a transition from one color to another.
    • Pattern Fill: This applies an existing pattern (such as stripes or dots) to fill in an area of the image instead of using solid colors or gradients alone.
  5. Portable Network Graphics: Palette Entries: The palette entries for Portable Network Graphics (PNG) are red, green, and blue values that are used to represent the colors in an image. When choosing a format for saving an image, you should consider the PNG palette entries because they offer more flexibility than GIF. Unlike GIF which can only use palettes with sizes that are multiples of two, PNG will store palettes in an optimal amount of space (i.e., a 129 color palette would take up 768 [256x3] bytes in a GIF but only 387 [129x3] bytes in a PNG). This allows you to save space when needed while still retaining enough entries for accurate color representation.
  6. Portable Network Graphics: Optimizations: Portable Network Graphics (PNG) support a variety of optimizations to reduce the size and increase the speed of images. These include:
    • Lossless compression: reduces the size of images without losing any information, such as pixel color values.
    • Progressive rendering: allows users to see parts of an image before it is fully loaded, making it appear more quickly.
    • interlacing: divides an image into multiple frames and displays them in rows, allowing for faster loading on slow connections or older computers.
    • Adaptive filtering: adjusts the quality level based on viewing distance or other factors to optimize performance for each user's individual needs.
  7. Portable Network Graphics: Configurability: Portable Network Graphics (PNG) is a good choice for configurability due to their support for advanced features such as compression, transparency, interlacing, and animation. PNG also allows developers to define their own extensions which can be used to add even more customization options. Furthermore, PNG is widely supported by web browsers and other software applications making it easy to integrate into existing systems. Finally, the open-source nature of PNG provides developers with the flexibility of being able to modify or extend any part of the specification as needed without having to pay licensing fees or royalties.
  8. Portable Network Graphics: Scalability: Portable Network Graphics (PNG) is a scalable image format that allows for lossless compression, transparency, and support for a wide range of color depths. This makes PNG a popular choice for graphic designers as it provides high-quality images at a smaller file size compared to other formats such as JPEG.
  9. Portable Network Graphics: Color Depth: When choosing a graphics format, the color depth is an important consideration. The PNG format supports both indexed color and grayscale images as well as RGB color images with 8-bit or 16-bit data. This allows for greater flexibility in terms of image resolution and clarity, as well as a more accurate representation of colors. Additionally, the PNG format allows for chunks to be included for gamma and chromaticity data as well as a full ICC color profile for better maintenance of colors across different devices and platforms. Finally, the alpha channel feature allows for greater transparency control on a per-pixel basis in both grayscale and color images.
  10. Portable Network Graphics: Scalability: Portable Network Graphics (PNG) is a lossless image format that offers scalability comparable to other formats. It supports transparent, interlaced, and non-interlaced images of different bit depths and color types such as RGB and grayscale.

Unlike other formats such as JPEG, PNG does not compress images so they can be reduced in size without losing quality. Additionally, PNG does not support animations or video clips like some other formats do.

  1. Portable Network Graphics: Alpha Channel: The alpha channel is a feature of the Portable Network Graphics (PNG) file format that allows for transparency in images. It enables users to specify which areas of an image are visible and which are not. The alpha channel allows PNG files to store information about the level of opacity in each pixel. This enables greater flexibility in how images are used, as they can be transparent or opaque depending on the user's needs. It also makes it possible to combine multiple images into one file while retaining individual levels of transparency for each one. Additionally, it can be used to create effects such as drop shadows or glass-like surfaces without needing additional software programs or special effects filters.
  2. Portable Network Graphics: Interlacing: Interlacing is a technique used to improve the quality of images when transferring them over a slow connection. It involves splitting an image into smaller sections that are interlaced, or layered on top of each other. The layers are then reconstructed by the recipient in order to create a clear image. When choosing a graphics format, it is important to consider whether it supports interlacing as this can help reduce artifacts caused by compression and provide better visual quality for slower connections. For example, PNG offers an optional 2-dimensional 7-pass interlacing scheme that is more sophisticated than GIF's 1-dimensional 4-pass scheme but reduces data compressibility more than simpler schemes.
  3. Portable Network Graphics: Bit Depth: When choosing a graphics format, bit depth is an important factor to consider. Bit depth refers to the number of bits used to represent each pixel in an image. The higher the bit depth, the more detailed and accurate the image will be. This is particularly important for images that contain gradients or large areas of similar colors, as it allows for smoother transitions between different shades and tones. For example, JPEG compression tends to lose detail in areas with large blocks of similar colors due to its 8-bit color palette limitation; whereas PNG files can have up to 16-bit color palettes which offer a more accurate representation of those tones. Therefore it is important that you choose a format with enough bit depth for your needs—especially if you plan on using it for complex images or photos where accuracy matters.
  4. Portable Network Graphics: Deflating: The deflation factor for Portable Network Graphics is 1/2, which means that each pixel of an image will be reduced in size by half. The original image size can then be restored using the inflation factor of 2. This allows PNG images to be optimized for web use without losing quality or resolution.
  5. Portable Network Graphics: Encoding Algorithms: The Portable Network Graphics ( PNG ) Specification (Second Edition) provides support for a variety of encoding algorithms, including:
    • Binary: This is the default compression method used in PNG files. It provides fast compression and decompression speeds without loss of image quality.
    • Adaptive Huffman coding (AH): AH is an adaptive algorithm that uses variable length codes to provide high compression ratios with minimal loss in image quality.
    • Lossless Predictive Coding (LPC): LPC uses predictive techniques to reduce the number of bits needed to represent each pixel while maintaining high visual fidelity.


The advantages of using Portable Network Graphics (PNG) formats

  1. High-quality and lossless compression: PNG is a high-quality and lossless image format due to its unique compression algorithm. It can compress photographic images more effectively than JPEG, resulting in smaller file sizes with no loss of quality. Additionally, PNG is lossless, meaning that it does not introduce any visual artifacts when compressing images as JPEG does. Furthermore, PNG supports transparency which allows for the creation of multiple layers in an image without any loss of quality. Finally, PNG's support for Exif data makes it ideal for storing images containing gradients or other types of complex data that need to be accurately represented without compromising file size or quality.
  2. Wide support across browsers and image editors: The PNG format is widely supported by graphics programs, including Adobe Photoshop, Corel's Photo-Paint and Paint Shop Pro, GIMP, GraphicConverter, Helicon Filter, ImageMagick, Inkscape, IrfanView, Pixel image editor, Paint.NET and Xara Photo & Graphic Designer. Additionally, some programs bundled with popular operating systems which support PNG include Microsoft's Paint and Apple's Photos / iPhoto and Preview.
  3. Support for alpha channels and transparency: The advantages of using alpha channels and transparency in PNG formats include:
    • Support for true color images, as well as the palette and grayscale formats provided by the GIF.
    • Ability to save, restore, and re-save an image without degrading its quality.
    • Gamma correction which allows tuning of the image's color brightness required by specific display manufacturers.
    • Support for partial transparency via single pixel values or alpha channels which can be added to any percentage of partial transparency desired.
    • Compatibility with multiple web browsers that support VA (Visual Arts) formats such as JPEGs or TIFFs.
  4. Wide range of color depths, from 8-bit to 24-bit: PNG formats offer a variety of color depths, ranging from 1 bit per pixel (bpp) up to 24 bits per pixel (bpp). The following table summarizes the permitted combinations of color type and bit depth: Color type Channels Bits per channel 1 2 4 8 16 Indexed 1 1 2 4 8 Grayscale 1 1 2 4 8 16 Grayscale and alpha 2 16 32 Truecolor 3 24 48 Truecolor and alpha 4 32 64 5. Lossless compression option for PNG8 files
    • Open your image editing software and select the PNG8 file you wish to compress.
    • Go to the “Options” tab or menu, then select “Compression” or “Quality” settings and choose "Lossless".
    • Adjust the slider until you reach a balance between file size and quality of your image; then save it as a PNG8 file with lossless compression enabled for best results.
  5. Improved support for animated images: The improved support for animated images in PNG formats allows for more sophisticated and efficient compression algorithms, such as the Adam7 interlacing scheme.

This allows PNG images to be clearer and easier to view sooner than GIF images, while still maintaining a high level of compressibility.

  1. Adoption by the Web Standards Group
    • The PNG specification was first issued as a W3C Recommendation on 1 October 1996 and updated to a second edition incorporating all errata on 10 November 2003.
    • This edition is also an ISO standard, ISO/IEC 15948:2003 (E), which means it is a mature document that is considered to contribute towards realizing the full potential of the Web.
    • Viewers for PNG are available on many platforms; there are an increasing number of content creation tools available; and modern browsers implement support for it also.
    • The Web Standards Group has adopted the use of PNG formats by publishing equivalent text as Portable Network Graphics (PNG) Specification (Second Edition) at https://www.w3c .org/TR/PNG/ in November 2003
  2. Ability to store metadata and chunks in the file: Storing metadata and chunks in a PNG file allows the file to be more versatile and future-proof. By dividing the image information into chunks, it allows programs encountering ancillary chunks that they do not understand to safely ignore them. Additionally, by giving each chunk a four-letter type/name (with the case of the different letters indicating its purpose), it provides backward compatibility as well as forward compatibility with newer versions of PNG files. Furthermore, by allowing specific chunk types (such as IHDR) to be identified as "critical", it ensures that decoders can read and render PNG files correctly even if they don't recognize certain chunks. Finally, by allowing certain chunk types (such as PLTE) to only appear in specific color modes (3 for indexed color), it helps maintain consistency across images with different color modes while still allowing for flexibility in how those images are stored on disk or transmitted over the web.
  3. Improved support for gamma correction and color space: The PNG format supports gamma correction and a color space that allows for 24-bit RGB, 8-bit indexed color, grayscale, and 48-bit RGB images.

This provides better support for images retrieved over the internet as well as flexibility in terms of color space and bit depth to suit different needs. Additionally, the inclusion of an alpha channel allows for transparency information on a per-pixel basis in both grayscale and color PNG images.

  1. Adoption by major graphics editors such as Photoshop and GIMP: The PNG format is widely supported by graphics programs, including Adobe Photoshop, Corel's Photo-Paint and Paint Shop Pro, GIMP, GraphicConverter, Helicon Filter, ImageMagick, Inkscape, IrfanView, Pixel image editor, Paint.NET and Xara Photo & Graphic Designer. Some programs bundled with popular operating systems which support PNG include Microsoft's Paint and Apple's Photos / iPhoto and Preview. Additionally, Fireworks (formerly by Macromedia ) uses PNG as its native file format allowing other image editors to view the flattened image without extra metadata for use on web pages, etc.


How to use PNG file formats

  • Step 1: Determine file format requirements
    • Choose a PNG file that has a transparent background, with a minimum size of 500 pixels in width and 500 pixels in height.
    • Save the PNG file as an RGB format with 8-bit color depth per channel and interlaced or non-interlaced transparency settings.
    • Ensure that your image is free of any distortions or artifacts such as blockiness, banding or fuzziness when viewed at 100% zoom level on web browsers and mobile devices alike.
    • Save your PNG files in either JPG or JPEG format if they are larger than 1 MB in size so they can load faster on webpages without affecting quality too much (this depends on the type of image you're using).
  • Step 2: Compile a list of compliant browsers and applications
    • Identify the PNG file format you wish to comply with.
    • Research which browsers and applications are compliant with the PNG file format specification, including their versions and platforms they are compatible with.
    • Create a list of all compliant browsers and applications, along with their respective versions and platforms they support, for future reference when developing your PNG files.
    • Once you have compiled this list, check it against each version of your PNG files before publishing them online to ensure they will be compatible with as many browsers and applications as possible across different platforms or operating systems (OS).
  • Step 3: Make sure that all the necessary tools are available
    • Download and install an image editor such as Photoshop or GIMP.
    • Open the PNG file in your image editor and use tools such as select, cut, and paste to manipulate individual pixels or sections of the image.
    • Use filters to adjust lighting, color saturation, or other visual effects on your PNG file.
    • Save your changes once you are happy with the results and use a compression tool such as WinZip or 7-Zip to reduce the file size of your PNG image without losing quality.
  • Step 4: Create a workflow that maximizes the usefulness of PNG files
    • Choose the right format: When creating a workflow that maximizes the usefulness of PNG files, it is important to choose the correct format for each type of image you are working with. PNG is best suited for photos with line art, text images, charts, and logos.
    • Save as PNG: Once you have chosen the correct format, save your images as PNGs to ensure they remain high quality without losing any detail or color information in the process.
    • Reduce file size: You can also reduce the file size of your PNG files by using a tool such as OptimizePNG which will compress them without compromising quality too much (up to 50%). This will help make sure that your files are small enough to be easily transferred across different platforms such as email or web-sharing services like Dropbox or Google Drive without taking up too much bandwidth or storage space on end users' devices.
  • Step 5: Educate users on the proper way to use PNG files
    • If you are concerned about file size, use PNG-8 instead of PNG-24.
    • If the image has no transparency, use PNG-8 instead of PNG-24.
    • If the image contains transparency and will be placed on different colored backgrounds, use PNG-24 instead of PNG-8.
  • Step 6: Create content marked up with PNG formats
    • Create your content in Photoshop or InDesign.
    • Save the file as a PNG format, making sure to select “8-bit” as the compression type and “Interlace” as the optimization setting.
    • When saving your image, make sure that the “Masking” option is checked so that only certain portions of your image are transparent (invisible).
    • Export your file and make sure that it has a transparent background so it can be placed over other images seamlessly in any layout or design program like Word or PowerPoint without any extra work on your part..
  • Step 7: Promote the awareness of PNG file formats
    • Create a website to provide information about PNG file formats and their benefits. Include a frequently updated listing of Web browsers that support PNG (including plug-ins), helper applications, and content creation tools (both interactive editors and conversion tools).
    • Share stories about how the use of PNG has benefited people in real life or in certain industries.
    • Explain the importance of gamma and chromaticity features in improving cross-platform graphics, as well as the novel interlacing scheme which provides usable graphics faster than other formats such as JPGs without sacrificing quality at all resolutions up to 8 bits per channel (32 bits total).
    • Promote awareness by sharing links to articles written about PNG on social media platforms like Twitter or Facebook; writing blog posts on influential websites like Forbes or Huffington Post; sending out newsletters with tips on using PNG files correctly in different applications like Illustrator or Photoshop; posting videos demonstrating how it works on YouTube; etc.


What types of data are included in a PNG file?

PNG files can contain a variety of types of data, such as raster images, gamma and chromaticity data, full ICC color profiles, and transparency (alpha channel). The specification also supports indexed-color, grayscale and truecolor images with up to 48 bits per component (RGB) or 64 bits per component (RGBA).


How does data compression work in a PNG file?

Data compression works in a PNG file by first compressing the data using the DEFLATE algorithm. This algorithm takes into account the 2-dimensional image structure to further compress files by encoding differences between pixels, which will tend to cluster closer to 0 and thus be more easily compressed. After this step, a pre-compression stage consisting of predictive filtering is applied on each line of the image which can increase file size. Finally, an Adam7 algorithm is applied which applies lossy compression as it passes through seven separate filters for each line of data in order to optimize PNG compression efficiency.


What is the gamma value used in a PNG file?

The gamma value used in a PNG file is a measure of the brightness or intensity of the colors in an image. It is typically expressed as a number between 0 and 1, where 1 represents maximum brightness and 0 represents no brightness at all. The gamma value can be used to adjust the colors in an image so that they appear correctly on different displays with different levels of brightness. It also allows for greater control over how much transparency is applied to individual colors in a PNG file.


How does PNG use alpha values to create transparency?

PNG uses alpha values to create transparency in two ways:

  1. Single-pixel values can be declared transparent, which means that they will not be included in the final image.
  2. An alpha channel can be added (enabling any percentage of partial transparency to be used). This enables more complex effects such as partially-transparent overlays on top of an image or semi-transparent gradients.

When scanning for binary transparency, PNG recommends that this should be done before any color reduction or compression to ensure no unintentional pixel discoloration occurs due to compression artifacts or other processes that alter pixel data structures.


What types of filters are available for a PNG image?

PNG supports five filter types for its filter method 0: None, Sub, Up, Average, and Paeth. The None filter type passes through the raw data without any transformation. The Sub filter type predicts the value of each byte based on the values of previous neighboring pixels and then subtracts the predicted color from the actual value. The Up filter type also predicts each byte's value based on neighboring pixels but adds them instead of subtracting them from their actual values. The Average filter type calculates a mean of bytes A and B (to either side) rounded down if they are not equal; this means that it effectively ignores any differences between them when making its prediction. Finally, Paeth uses an algorithm developed by Alan W Paeth which is more efficient than other filters at predicting pixel colors close to edges between different regions in an image line or block (in terms of a 2D grid).


What is the file size of a PNG file?

The file size of a PNG file can vary significantly depending on how it is encoded and compressed. Generally, a PNG file with the same information (256 colors, no ancillary chunks/metadata) will be smaller than a GIF image. Depending on the file and compressor used, PNG may range from 10% smaller to 50% smaller than GIF but is rarely significantly larger.


How do web browsers support the PNG format?

  1. Check if your browser supports the PNG format by visiting the Comparison of web browsers (Image format support).
  2. If it does, check whether it handles gamma and alpha correctly by viewing a PNG image with both enabled.
  3. If not, find out which versions of Internet Explorer have problems with PNG support and try using a different browser until those issues are resolved (e.g., Apple Safari).


What is the PNG development group and what do they do?

The PNG development group is a team of volunteers who create, maintain, and support the PNG image format. The PNG development group works to improve the quality and features of the PNG image format. They publish updates to the specification document which details how to use the format correctly, as well as other related documentation such as zlib technical documentation. They also provide resources such as libraries and toolkits that enable developers to implement support for PNG in their applications more easily. Additionally, they maintain a list of applications that have native support for PNG images along with news about recent developments in their group. The group also organizes events such as conferences where developers can exchange ideas on topics related to PNG technology.


See Also

IT Standard (Information Technology Standard)