How to reduce PNG file size without losing transparency

Transparent PNGs are perfect for cut-outs, but they can be surprisingly heavy. A single large product image can easily weigh more than a megabyte, and a page with a dozen of them will load slowly, especially on mobile data. Slow pages frustrate visitors and can hurt how your site performs in search.

The good news is that most PNGs can be made far smaller while keeping their transparency and looking identical to the eye. This guide covers the techniques in the order that usually gives the biggest savings.

Why PNG files get so large

PNG uses lossless compression: it shrinks the file without discarding any pixel data. That keeps edges and text perfectly crisp, but it means the file has to store every subtle variation of colour and transparency. Three things drive the size up:

• Dimensions. File size grows with the number of pixels. Doubling the width and height means four times as many pixels.
• Colour complexity. Photographic detail, gradients, noise and soft shadows are hard to compress losslessly.
• The alpha channel. A full alpha channel adds a fourth value to every pixel. Soft edges and semi-transparent effects add more variation for the compressor to store.

If you want a refresher on how the alpha channel works, read what a transparent PNG is.

Step 1: Resize to the size you actually need

This is the single most effective step and it is often skipped. If an image is shown at 600 pixels wide on your site, there is no reason to serve a 3000-pixel file.

A good rule is to export at twice the displayed size to stay sharp on high-density (retina) screens, and no larger:

Displayed width	Export width
300 px	600 px
600 px	1200 px
1200 px	2400 px (consider a smaller size for mobile)

Resizing a 3000-pixel PNG down to 1200 pixels alone typically cuts the file size by more than 80 percent, because the pixel count drops by a factor of over six.

Always keep your original high-resolution file as a master and export resized copies from it.

Step 2: Reduce the colour palette (lossy, but usually invisible)

A standard transparent PNG can store millions of colours. Most cut-outs, icons and illustrations look identical with 256 colours or fewer, as long as the tool is smart about choosing them and keeps the transparency.

This process is called colour quantization. It converts the image to a palette-based PNG (often called PNG-8) while preserving partial transparency. Savings of 50 to 80 percent are common.

Popular tools:

• pngquant: A free command-line tool and library that is the engine behind many online compressors.
• TinyPNG: A simple web tool built on the same idea. Drag in your files and download smaller versions.
• Squoosh: A free browser-based app from Google Chrome Labs that lets you compare the original and compressed image side by side and adjust the number of colours.

Quantization works best on graphics, icons and illustrations. Photographic cut-outs with smooth skin tones or soft gradients can show banding at low colour counts, so always compare before and after at full size.

Step 3: Run a lossless optimizer

After resizing and (optionally) quantizing, a lossless optimizer can squeeze out a little more by finding better compression settings and removing data you do not need, such as editing metadata. The pixels stay exactly the same.

• oxipng and optipng are free command-line tools that do this.
• Many image editors and export dialogs have an "optimize" or "smallest file" option that does a similar job.

Expect savings of roughly 5 to 25 percent on top of the earlier steps. It is small compared with resizing, but it is free quality-wise.

Step 4: Clean up invisible pixels

Two hidden sources of bloat are easy to fix in any editor:

• Empty margins. A large transparent border around the object still takes up pixels. Crop the canvas tightly around the visible object (leaving a few pixels of space if you need it for shadows).
• Hidden colour in transparent areas. Some editors keep colour information in fully transparent pixels. Optimizers such as oxipng have an option to clean these up, which helps compression without changing what anyone can see.

Step 5: Serve WebP to browsers, keep PNG as a fallback

WebP supports the same smooth transparency as PNG and is usually smaller, especially in its lossy mode. All modern browsers support it. If you control the HTML, you can serve WebP with an automatic PNG fallback:

<picture>
  <source srcset="/images/product.webp" type="image/webp">
  <img src="/images/product.png" alt="Red sneaker, side view"
       width="600" height="400" loading="lazy">
</picture>

Browsers that understand WebP download the smaller file; anything else falls back to the PNG. Our format comparison explains when WebP is and is not a good fit.

Many website platforms, CDNs and frameworks can do this conversion for you automatically, so check your platform's image settings before doing it by hand.

Step 6: Load images smartly

Even a well-compressed image slows the page if it loads at the wrong time:

• Add loading="lazy" to images below the first screen, so they only load as the visitor scrolls.
• Always set width and height attributes (or an aspect ratio in CSS). This stops the layout from jumping as images arrive.
• Write useful alt text describing the image. It helps visitors using screen readers and gives search engines context.

A practical workflow

1. Keep the original, high-resolution PNG as your master copy.
2. Crop away empty transparent margins.
3. Resize to twice the displayed size.
4. Quantize with pngquant, TinyPNG or Squoosh and compare at 100 percent zoom.
5. Run a lossless optimizer like oxipng.
6. Generate a WebP version and serve it with a PNG fallback.
7. Lazy-load anything below the fold and set width, height and alt text.

Example savings

For a typical 2400 × 2400 pixel cut-out of an object with soft shadows, a realistic sequence looks like this:

Step	Approximate size
Original PNG	2.4 MB
Resized to 1200 × 1200	650 KB
Quantized to 256 colours	190 KB
Lossless optimization	170 KB
WebP version	90 KB

Exact numbers vary from image to image, but the pattern holds: resizing and quantization do most of the work.

Summary

You rarely need to choose between a transparent image and a fast page. Resize first, reduce colours where it does not show, run a lossless optimizer, and serve WebP where you can. Your images keep their clean, transparent edges and your visitors get a faster site.

Need high-quality cut-outs to start from? Browse free transparent PNG images and download the original files to optimize for your project.