RankEngine
Your Shopify catalog probably has a few PNGs that seem harmless until you inspect the upload folder. A logo with transparency, a crisp product diagram, a screenshot, and a product photo may all carry the same .png extension, but they don't have the same compression needs. Running every file through one optimizer can preserve unnecessary color data, retain unused alpha information, or leave a photo far larger than it needs to be.
The practical answer to how to compress a PNG starts before the encoder. Choose the right pixel format, remove unnecessary chunks, resize to the actual display dimensions, and only then select lossless or visually lossy compression. If the asset is photographic, the best result may be replacing PNG with WebP or AVIF rather than compressing PNG more aggressively.
Table of Contents
- Why PNG Compresses the Way It Does
- Lossless vs Lossy and When Each One Wins
- Choosing the Right Pixel Format Before You Compress
- Compressing PNGs With Desktop and Web Tools
- Command Line and Batch Workflows With oxipng
- When WebP or AVIF Beats PNG
- A Practical Compression Checklist for Your Catalog
Why PNG Compresses the Way It Does
PNG compression is lossless, so decompression reconstructs every pixel exactly. The format uses a two-stage pipeline. First, PNG applies filtering, including None, Sub, Up, Average, and Paeth, to predict pixel values from neighboring pixels. The filter stores residual differences rather than repeating the full pixel values.
Next, PNG compresses those residual bytes with DEFLATE, which combines LZ77 back-references with Huffman coding. LZ77 looks for repeated byte sequences, while Huffman coding represents frequent symbols efficiently. The encoder isn't changing the visible image. It's searching for a more compact representation of the same information.
That design explains why an aggressive compression slider can't create unlimited savings. If the image contains many unique colors, complex gradients, or photographic detail, the residual data has fewer useful repetitions. A flat icon or interface screenshot usually gives the encoder much more structure to exploit.
PNG's format history
PNG's development also explains why it doesn't have a native lossy mode. The first draft appeared on 4 January 1995, the format was released on 1 October 1996, published as RFC 2083 in March 1997, and later standardized as ISO/IEC 15948:2004. Those milestones established PNG as a dependable transparent raster format for screenshots, graphics, and interface assets where exact pixels matter. The timeline is documented in the PNG format history.
Practical rule: Compression can improve the encoding, but it can't make photographic complexity disappear without changing the image or its format.
Palette size, alpha channels, dimensions, metadata chunks, and filter selection all affect the final file. Two PNGs with identical dimensions can therefore produce very different file sizes. The largest gains often come from reducing image complexity before DEFLATE runs, not from forcing the optimizer to search longer.
Lossless vs Lossy and When Each One Wins
The compression mode should follow the asset's tolerance for pixel changes. Lossless optimization preserves every pixel, making it suitable for logos, screenshots, line art, and transparent interface assets. Palette quantization changes pixel data, even when the difference is hard to see, so review it separately before publishing.
| Approach | Typical size reduction | Pixel-identical | Best for |
|---|---|---|---|
| Lossless recompression | About 10% to 40% | Yes | Logos, screenshots, icons, line art, transparency-critical assets |
| Visually lossless palette quantization | About 60% to 80% | No | Simple illustrations, selected screenshots, graphics with limited colors |
| More aggressive quantization | About 80% to 90% | No | Noncritical graphics where color shifts are acceptable |
These ranges are practical targets, not guarantees. Dimensions, color count, alpha structure, metadata, and the source encoder all affect the result. A file that already uses an efficient palette or chunk layout may show little improvement from another pass.
Match the mode to the asset
For a product logo with sharp edges, check whether palette reduction preserves its colors, then apply lossless recompression. Keep screenshots containing text pixel-identical whenever possible, because altered letter edges become obvious at full zoom. A flat illustration can accept quantization after a side-by-side review.
Use grayscale or an indexed palette when the image does not need full RGB data, and remove alpha from opaque assets. For binary transparency, indexed color with a transparency table may be more efficient than full RGBA. These format decisions often matter more than asking a lossless optimizer to search longer.
Photographic PNGs are the outlier. Their many colors and local details leave PNG with fewer repeated patterns to compress. Lossless recompression may reduce the file somewhat, but it does not correct the format mismatch. Replace PNG with a photographic format when the asset does not require exact PNG behavior.
Review the output at 100% zoom, not only as a thumbnail. Inspect transparent edges, text, gradients, and fine product details against the original. Halos around a cutout or banding in a gradient means the smaller file is not ready for a catalog.
Choosing the Right Pixel Format Before You Compress
A Shopify product image can remain large after optimization if its pixel format is wrong. Inspect the asset before running OxiPNG or another encoder. Decide whether it needs full RGB, alpha, or high channel precision first.
Start with the color model
A logo, icon, or interface graphic with fewer than 256 unique colors may suit an indexed palette. Converting it to an 8-bit palette PNG can make it 60% to 80% smaller, according to the practical benchmark in EZGIF's PNG compression guide. The reduction works best when the original artwork already fits the smaller palette, so check colors, antialiasing, and gradients before replacing the source.
Grayscale is another straightforward choice. A monochrome diagram, black-and-white product image, or wireframe does not need separate red, green, and blue channels. Use grayscale when color carries no meaning, and retain an alpha channel only when transparency affects the design.
Audit transparency and bit depth
Exports often include full alpha values even when an image is completely opaque or uses only transparent and fully visible pixels. Remove alpha from opaque assets. For binary transparency, an indexed PNG with a transparency table can use less data than full RGBA.
Choose the smallest representation that preserves the asset's actual visual behavior.
Check bit depth as well. If the export stores more channel precision than the storefront display requires, reducing it may save more than asking a lossless compressor to search harder. The PNG specification's chapter on image data describes how grayscale, palette, truecolor, alpha, and bit-depth choices affect PNG data.
Resize before encoding
Dimensions belong in the compression decision, not only in final cleanup. Halving both dimensions from 1000×1000 pixels to 500×500 pixels cuts the pixel count by 75% before any encoder optimization begins. Resize to the largest display size the storefront needs, while retaining a suitable source for other contexts.
A product cutout may require transparency and true color, while a small icon may need only a palette and binary alpha. Treat those as separate asset classes rather than applying one catalog-wide setting.
Compressing PNGs With Desktop and Web Tools
For a single file, a repeatable visual workflow is more valuable than a complicated preset. Keep the original, inspect the asset type, make the format decision first, and then compare the output before uploading it to Shopify.
On macOS, drag the file into ImageOptim and review the enabled PNG optimizers. On Windows, FileOptimizer provides a similar desktop workflow through its optimizer plugins. Browser-based Squoosh is useful when the designer or merchandiser needs an immediate visual comparison without installing software.
Use settings by asset class
Use lossless settings for screenshots and interface captures. If your browser tool exposes OxiPNG effort, use level 6 for assets where runtime matters less than final size, and enable palette reduction only after confirming that the screenshot doesn't depend on subtle gradients or color distinctions.
For logos, reduce the palette to 64 colors when the artwork can support it, then convert to indexed format. Review small text, diagonal edges, and semitransparent outlines. If the logo uses many colors or delicate antialiasing, retain true color and let lossless recompression handle it.
For product photos, don't quantize the PNG automatically. Keep the original color depth while cleaning unused alpha information, then test WebP or AVIF as the likely delivery format. The Shopify SEO app comparison can help teams place image work alongside broader store optimization tasks, but the file still needs visual verification before publication.
A short visual-diff walkthrough can make this review process easier:
Don't overwrite the source during experimentation. Export to a separate folder, compare the original and compressed versions at full size, inspect transparent edges against both light and dark backgrounds, and only then move the approved file into the Shopify upload workflow.
Command Line and Batch Workflows With oxipng
A Shopify catalog pipeline should set the PNG format and metadata first, then choose encoder effort. Palette, grayscale, alpha, and ancillary chunks often affect output more than raising the compression level. Once those decisions are correct, oxipng provides repeatable lossless recompression for individual files or batches.
Optimization levels from -o 1 through -o 6 trade runtime for additional search. -o 2 is a practical default for routine builds. The oxipng's command documentation describes -o 4 as about 6x slower than -o 2, with potential compression improvement of 5% to 10% beyond -o 2.
| Flag | What it does | Indicative savings over -o 0 |
Runtime per image |
|---|---|---|---|
-o 1 |
Runs a quick optimization pass | Baseline improvement | Fast |
-o 2 |
Tries additional filter and DEFLATE choices | Usually a small improvement | Fast enough for routine builds |
-o 3 |
Searches more compression combinations | Often a modest improvement | Slower |
-o 4 |
Performs a deeper search across filter types | Can reach the documented 5% to 10% gain over -o 2 |
Significantly slower |
-o 5 |
Expands the DEFLATE search further | File-dependent, sometimes slightly better than -o 4 |
Very slow for large batches |
-o 6 or max |
Uses the deepest available search | File-dependent, with diminishing returns | Reserve for selected assets |
Use -o 2 across a catalog when build time matters. Apply -o 4 or higher to logos, interface captures, and other files where a smaller download justifies longer processing. Measure representative assets rather than assuming every PNG will show the same gain.
Use chunk stripping carefully
Start with:
oxipng -o 1 --strip safe *.png
The safe option removes nonessential text chunks without indiscriminately deleting color and physical-information data. Avoid treating --strip all as a default. Removing iCCP or gAMA can change color rendering, while some workflows need those fields for consistent display.
For a batch pass, use:
find assets -name '*.png' -exec oxipng -o 4 --strip safe {} +
Run the quick pass across all assets, then reserve deeper recompression for files with measurable savings. Check important ancillary fields after processing. Changes to data such as pHYs can count as data loss in a benchmark, even when the visible image appears unchanged. Keep originals outside the output folder until the optimized files pass visual and metadata checks.
When WebP or AVIF Beats PNG
A photo-like PNG can remain oversized after excellent lossless optimization because the problem isn't a weak encoder. PNG preserves every pixel, and photographic detail creates a difficult residual stream. If transparency and exact pixel preservation aren't required, changing format is often the more effective decision.
For Shopify product imagery, test WebP first when the source is photographic and the storefront doesn't need PNG's specific behavior. Test AVIF when the delivery stack and browser support requirements allow it. The important distinction is operational: keep PNG for logos, badges, overlays, stickers, diagrams, and sharp transparent graphics, but don't force a product photograph into a format designed primarily for lossless raster fidelity.
Use a fallback strategy
A <picture> element lets the theme offer modern formats while retaining a PNG fallback for compatible rendering paths:
<picture> <source srcset="{{ image | image_url: format: 'avif' }}" type="image/avif"> <source srcset="{{ image | image_url: format: 'webp' }}" type="image/webp"> <img src="{{ image | image_url }}" alt="{{ image.alt | escape }}"></picture>
The exact Liquid filter behavior depends on the theme and image delivery setup, so test the generated URLs and response headers in the live storefront. Don't assume that every conversion preserves transparent edges or color management identically.
For social previews and storefront sharing, format choice is only one part of the result. Review how the image is presented in metadata and previews with this guide to social sharing images and Shopify SEO. A transparent brand mark may still need PNG even when the product gallery uses WebP or AVIF.
A Practical Compression Checklist for Your Catalog
Treat each upload as a small decision tree rather than a generic compression task. The workflow below works for a mixed Shopify catalog because it separates screenshots, logos, product photos, and transparent cutouts before applying settings.
Classify the asset. Mark it as a screenshot, logo, icon, product photograph, illustration, or transparent cutout. The class determines whether pixel identity, transparency, or photographic efficiency matters most.
Resize to the use case. Remove excess dimensions before encoding. A smaller pixel canvas gives every later compression step less data to process.
Select the pixel format. Use indexed palette PNG for suitable limited-color graphics, grayscale for monochrome assets, and truecolor only where gradients, photographs, or complex artwork require it. Remove alpha from opaque files and use a simpler transparency representation when the asset doesn't need full alpha precision.
Choose the compression mode. Keep logos, screenshots, and pixel-critical interface elements lossless. Approve palette quantization for graphics that can tolerate non-identical pixels. For photo-like content, test WebP or AVIF instead of repeatedly optimizing PNG.
Run the appropriate encoder. Use
-o 1or-o 2for routine batch work, then apply a deeper oxipng pass to selected high-value assets. Strip only chunks your storefront doesn't need, and preserve color-related information when consistent rendering matters.Sample before scaling. Pull a 10-image sample, compare visual parity at 100% zoom, record the size change, and inspect transparent edges and gradients. Promote the settings to the full catalog only after the sample passes review.
For operational monitoring, RankEngine's image alt text generator addresses descriptive image metadata, while its Shopify image-management view can track compression status and recorded size savings. Those are separate concerns, but both belong in the same publishing checklist because a smaller image still needs useful metadata.
Set practical catalog targets, then validate them against your theme, product type, and storefront layout. A thumbnail might need a much smaller delivery file than a primary image, while a transparent product cutout may justify a larger PNG than a decorative icon. Don't optimize only the source folder. Check the rendered Shopify pages, responsive variants, fallback behavior, and visual quality after deployment.
Automate the approved command in your theme deployment or CI process. New assets should be resized, format-checked, compressed, compared against an acceptance rule, and rejected when they grow unexpectedly or lose required color and transparency data. That turns PNG compression from a one-off cleanup into a repeatable catalog control.
RankEngine helps Shopify teams audit image compression status, review per-image size savings and action history, and manage related SEO checks in one workspace. Use RankEngine to connect image optimization with verified store changes, then make your approved compression workflow part of every catalog and theme release.