How to Compress HTML5 Banner ZIP Files (2026)

Most oversized HTML5 banners are oversized because of their images. Compress the PNG and JPEG files first, then trim the code, then deal with the file count. The free HTML5 Banner Compressor does the image step inside your browser: drop the ZIP, pick a preset, and download a smaller ZIP with every file name and folder left exactly where it was.

1. Know which limit you are compressing toward

There is no single number. Each platform measures something different, so check the booking before you start cutting quality.

The IAB figures are recommendations for publishers, not an upload check, and they count what loads before the page's load event. Heavier assets can load later as subload: the IAB allows twice the initial weight there. The full per size list is in the banner ad sizes chart, and the Google Ads rules behind the 600 KB figure are in the Google Ads HTML5 validator guide.

2. Find what is actually heavy

Drop the ZIP into the HTML5 Banner Validator first. It reports the ZIP weight against the selected platform, the file count and any file type the platform refuses, so you know whether you have a weight problem, a count problem or both. The compressor then lists every image with its original size, its new size and the percentage saved, which shows at a glance which two or three files carry most of the weight.

3. Compress the images

This is what the Banner Compressor does to a ZIP, step by step:

• Recompresses every PNG, JPEG and WebP through the browser's canvas encoder at the quality you pick. The presets are Low (90% quality), Balanced (80%, the default) and High (65% quality with a 75% downscale). A custom slider goes from 30% to 95%.
• Keeps the original whenever the new file is not smaller, so a well optimized asset never gets worse.
• Keeps every file name, folder and format. A PNG stays a PNG, so clickTag code and the image references in Adobe Animate, Google Web Designer or hand written manifests keep working.
• Drops camera metadata as a side effect. Canvas output carries no EXIF block.
• Removes macOS junk such as __MACOSX, .DS_Store and ._ files, which only add to the file count.
• Rebuilds the ZIP at the highest DEFLATE level and shows whether the result is under the Google Ads 600 KB limit.

One thing the quality slider cannot do: browsers apply the quality setting to JPEG and WebP only. A PNG is encoded again without loss, so it shrinks only when the browser's encoder beats the original file or when you downscale it. If a large PNG is a photo with no transparency, exporting it as a JPEG from your design tool usually saves far more, but then update the reference in the code.

4. Downscale only what is safe to downscale

Many banners ship images at twice their display size for sharp screens. Scaling those to 75% or 50% can halve the weight, but only when something else fixes the size the image is drawn at. When you choose a scale below 100%, the compressor reads the HTML, JS, JSON and CSS in the ZIP and leaves two kinds of image at full size, recompressing them for quality only:

• Sprite atlases. Images named like an atlas or a sprite, Adobe Animate spritesheets listed in ssMetadata, and CreateJS or TexturePacker sheets that define frames. Shrinking an atlas makes every frame read the wrong region.
• Images drawn at their natural size. CreateJS and Animate manifest bitmaps, an <img> with no width or height, and a CSS background with no background-size. Shrinking these shrinks the layout.

After a downscale the compressor shows a Preview before you ship notice with the number of resized images. Open the new ZIP in the validator and watch every frame before trafficking it.

5. Trim what the compressor does not touch

GIF, SVG, HTML, CSS and JavaScript files pass through unchanged. These are the manual wins:

• Libraries: on Google Ads, load CreateJS and GreenSock from Google's hosted copies instead of bundling them. A hosted file is outside the ZIP, so it does not count toward the 600 KB. The allowed URLs are in the Google Ads allowlist.
• Fonts: font files are not an accepted Google Ads file type at all. Use Google Fonts, or convert headline text to SVG or an image.
• SVG: run logos and icons through an optimizer such as SVGO, or inline small ones in the HTML.
• Code: minify JavaScript and CSS with Terser and cssnano, and delete console logging and unused classes.
• Adobe Animate: delete unused library symbols, hidden frames and embedded audio before publishing. The Adobe Animate section of the clickTag guide covers the publish settings.
• GIF: fewer frames and a smaller colour table. The animated GIF guide explains the 150 KB and 30 second rules.

6. Get under the file count

Google Ads allows 40 files, CM360 and DV360 allow 100. Combine small images into one sprite sheet, merge stylesheets and scripts into one file each, and delete source files, previews and anything the banner never references. CM360 asks for the HTML file plus the files it references and nothing else.

7. Mistakes that cost a rejection

• Converting to WebP. It is smaller, but WebP is not an accepted file type on Google Ads, CM360 or DV360. The validator flags it as an unsupported format.
• Zipping the parent folder. The compressor keeps your structure as it is, so a banner with index.html in a subfolder stays broken. Zip the files inside the build folder, not the folder itself.
• Shipping without a second validation. A downscale can move a layout without breaking any rule. Validate and preview again before you send the ZIP.