How to Compress PNG Images Without Losing Transparency and Quality

Learning how to compress PNG images without losing quality has lots of SEO benefits. PNG (Portable Network Graphic ) is a popular image format used on the web. It is the best for digital images with transparency, sharp edges, text and line art, and those with a wide range of colors.

PNG images are known for their lossless compression, which means that the image quality and transparency are preserved while reducing the file size. The format is best for images that require a transparent background, such as icons, logos, and illustrations.

However, PNG files are usually larger compared to JPEG.  You may need to compress them further to reduce the file size.

Here’s how to compress PNG images without losing transparency and quality:

How To Make a PNG File Smaller Using an Image Editing Software

An image editing software gives you control over the optimization process. You can tailor the compression settings to match your needs while maintaining the transparency and quality of your PNG images.

Popular image editing software you can use include Adobe Photoshop or Gimp.

Adobe Photoshop

Here’s how to reduce the size of a PNG in Photoshop:

• Open the PNG image in Photoshop.
• Make a copy of the image (optional) before making changes. This way, you can always go back to the original if needed.
• Go to File > Export > Export As.
• Choose “PNG” as the format
• You will see settings for PNG export. To lower the file size, you can adjust the:
  • Image size: Ensure the dimensions match your original image and maintain the aspect ratio to avoid distortion.
  • Smaller file (8-bit): Converts the image to an 8-bit palette that will reduce the file size without affecting its visible quality.
• Click “Export” and save your PNG image.

Alternatively, use the “Save for Web” feature in Photoshop. To do this:

• Open the PNG image in Photoshop
• Click File”> Export > Save for Web.
• Adjust the settings.
  • Format: Choose PNG-8 or PNG-24, depending on the image. PNG-8 is suitable for simpler images with fewer colors (like logos or icons). It uses indexed color, which limits the color palette but keeps file sizes smaller. PNG-24 supports full transparency and a larger color palette, ideal for images with more detail and gradients.
  • Transparency: If your image has a transparent background, make sure the Transparency checkbox is selected.
  • Colors: Set this to a lower number (e.g., 256 colors) if the image doesn’t have a lot of detail. If you need higher color accuracy, you can increase this, but it will result in a larger file size.
  • Image Size: Adjust the Image Size (if necessary) to ensure it’s optimized for web use. If you need to insert it into a website, check the container where the image will be placed and verify the maximum width and height. Then, resize the image accordingly to fit within those dimensions without exceeding them.
  • Metadata: Set to None to remove unnecessary metadata in case you don’t need it, which can reduce file size.
• Always check the 2-Up preview to compare the original image and the optimized version to make sure the quality meets your needs.
• Click “Save…” to save the file.

GIMP

GIMP is a free and open-source image editor. If you’ve been wondering how to make a PNG smaller using GIMP, here are a couple easy steps to follow:

Step 1: Launch GIMP on your computer.

Step 2: Open the PNG image you want to optimize by going to File > Open then select the file from your computer.

Step 3: Go to File > Export As, and click the Export button.

Step 4: In the Export Image dialog box that opens, configure the settings.

• Compression level: Adjust the compression level to control the amount of compression. A higher value (e.g., 9) results in minimal compression with no quality loss. Lower values (e.g., 1) apply more compression, reducing file size but potentially affecting image quality.
• Interlacing: You can choose Adam7 for interlacing. Interlacing makes the image display more smoothly during loading but might increase the file size slightly.
• Save background color: Make sure this option is unchecked to preserve transparency in the image.
• Save IPTC data: IPTC data is metadata that contains information about the image, such as the photographer, copyright, description, and keywords. Make sure it’s disabled if you don’t need it to further reduce PNG size.

Step 5: Once you’re satisfied with the settings, click Export to save the optimize PNG image.

How To Compress a PNG File Using a WordPress Image Optimization Plugin

An image optimization plugin compresses images to reduce their file size. Many plugins offer both lossless and lossy compression options.

Lossless compression retains the original quality while reducing the file size. Lossy compression reduces quality slightly for more reduction in file size. To PNG compress an image without losing transparency and quality, use lossless compression.

Examples of image compression plugins for WordPress for PNG lossless compression include:

• ShortPixel Image Optimizer: Known for its simplicity and ease of use, it offers both lossy and lossless compression and supports multiple image formats.
• Smush: A popular plugin that offers both lossless and lossy compression.
• Imagify: Has three levels of image compression and is integrated with popular page builders and e-commerce plugins.
• EWWW Image Optimizer: Supports various file formats and has advanced options for developers.

To compress your PNG images with a WordPress plugin, you first need to install and activate the plugin. Configure the settings by selecting lossless compression and the level of compression. Note that higher compression levels result in some quality loss.

How To Make PNG Smaller Using Quantization

PNG or color quantization reduces the number of unique colors in a PNG image. This is done by simplifying the image’s color palette, which can result in a smaller file size.

As illustrated in the image below, the downside of PNG quantization is the distortion of boundaries in areas with gradual color transitions.

Error diffusion dithering (EDD), an image processing technique, helps resolve this problem as it computes the error between the pixel value and its nearest representative.

PNG quantization involves;

Reducing the Number of Colors

PNG images use a palette of colors to represent the image. Each pixel in the image is associated with a specific color from this palette. PNG quantization creates a smaller, optimized palette to represent the entire image.

Reducing Color Depth

Limiting the number of colors in the palette reduces the image’s color depth. The maximum number of colors in an image is determined by the number of binary bits defining every pixel’s color or shade. For example, you can save a 32-bit image as a 24-bit or 8-bit image.

Dithering

Dithering introduces patterns or noise into an image. Here’s an example of an image after dithering:

This creates the illusion of additional colors and smoother transitions between colors, which is useful when reducing the number of colors in an image to maintain quality.

Lossless and Lossy Quantization

PNG quantization can be either lossless or lossy. You can achieve greater compression, lose some quality, or preserve the original quality for lesser compression.

Transparency Preservation

PNG images can contain transparency (alpha) information. Effective quantization should ensure that transparency and transparency-related information are preserved.

---

So, while image compression reduces the file size of PNG images, quantization specifically reduces the number of colors in an image.

This process helps lower the image size without sacrificing quality, particularly for images with transparent backgrounds.

Unlike basic compression, quantization focuses on optimizing the color palette to retain only the most essential colors, which is particularly valuable when dealing with transparent PNGs.

Tools for PNG Quantization

1. ImageMagick (convert tool)
   • ImageMagick offers powerful quantization capabilities through the -colors parameter, allowing developers to control the number of colors in a PNG image. This tool is highly flexible and well-suited for advanced users, providing precise control over color reduction while ensuring transparency is maintained. Though it offers great customization, it is primarily designed for developers rather than typical end-users.
2. pngquant
   • pngquant is a powerful open-source tool specifically designed for lossy PNG quantization. It reduces the number of colors in the image while preserving transparency, making it one of the most effective tools for optimizing PNG files. The result is a smaller file size with minimal loss in visual quality.
3. GIMP
   • GIMP, the free image editing software, offers tools for reducing the color palette of PNG images. Using the Indexed Color Mode, you can quantize images to reduce the color depth while keeping transparency intact.
4. OptiPNG
   • While OptiPNG is known for its lossless optimization, it also provides basic quantization features. Though not as advanced as pngquant, it can still help reduce file size without losing transparency or image quality.
5. Squoosh.app
   • Squoosh is an online image optimization tool that offers quantization features. It can handle transparency and reduce color palettes effectively, though its primary focus is compression.

Convert to WebP

Depending on your compression needs, you can convert your PNG images into formats that offer better compression without compromising quality.

WebP is a modern image format that significantly reduces file size while maintaining high image quality and transparency. You can also use image editing software like Adobe Photoshop or GIMP. 

Alternatively, choose a WordPress image optimization plugin with features for converting PNG to WebP format.

Compress PNG Images for Web

Knowing how to optimize PNG images without sacrificing transparency and quality is essential for web developers, designers, and anyone who works with visuals on the web.

You can significantly reduce file sizes. It leads to faster loading of web pages, improved user experiences, and more efficient storage utilization.

The key to successful compression lies in striking the right balance between smaller file sizes and maintaining the quality of your PNG images.

To compress PNG images for the web, start by reducing the file size without losing quality. You can achieve this by using PNG size reducer tools like ShortPixel. It automatically optimizes PNG images by removing unnecessary data, making them lighter while retaining high image quality.

FAQs