Automate Image Compression in CI/CD

By Gaurav Bhowmick

Manually compressing images before every deployment is tedious and error-prone. Here is how to automate it so every image that enters your repo gets optimised automatically.

Why automate. Developers forget to compress images. Designers upload 5 MB PNGs. Marketing adds unoptimised screenshots. Without automation, image bloat creeps in over time. A CI/CD step catches every oversized image before it reaches production.

Tool choices for CI/CD. Sharp (Node.js) is the fastest and most actively maintained. It wraps libvips and handles JPEG, PNG, WebP, AVIF, and TIFF. ImageMagick is universal but slower. Squoosh CLI (by Google) is good but less maintained. For most pipelines, Sharp is the best default choice.

GitHub Actions example. Create a workflow that runs on push, finds new or changed images, compresses them with Sharp, and either commits the optimised versions or fails the build if images exceed a size threshold. The threshold approach is less intrusive — it only blocks deployments with oversized images rather than modifying files automatically.

What to automate and what to leave manual. Automate: JPEG quality normalisation (compress to 80-85%), PNG optimisation (use oxipng or pngquant), format conversion (generate WebP versions alongside originals), and size validation (reject images over a threshold). Leave manual: art direction decisions, crop and aspect ratio choices, quality decisions for hero images.

Size budgets by image type. Hero/banner images: under 200 KB. Product photos: under 300 KB. Thumbnails: under 50 KB. Icons and logos: under 20 KB. Blog content images: under 150 KB. Set these as thresholds in your CI step and fail the build when exceeded.

Start simple. A single CI step that runs sharp-cli on all JPEG files at 80% quality adds about 30 seconds to your build and catches the majority of image bloat. You can add format conversion, responsive sizing, and AVIF generation later.

Frequently asked questions

Does image compression in CI slow down builds?

Minimally. Sharp processes images at 50-100 per second for typical web photos. A site with 200 images adds about 2-4 seconds to build time. Only process new or changed images to keep it fast.

Should I generate WebP in CI or use a CDN?

Either works. CI generation gives you static files with no runtime dependency. CDN generation is more flexible but adds cost and a dependency. For static sites (Next.js, Hugo, Jekyll), CI generation is simpler.

Can I use MiniPx in a CI pipeline?

MiniPx is a browser-based tool designed for manual use. For CI/CD pipelines, use Sharp (Node.js), Pillow (Python), or ImageMagick (CLI). These run headlessly in a server environment.

What about images from a CMS?

CMS-hosted images (WordPress, Contentful, Sanity) bypass your CI pipeline. For these, use the CMS built-in image processing, a plugin, or an image CDN that sits between the CMS and the user.

🔧

Try MiniPx — free, no signup

Compress, convert, and resize images in your browser. Nothing gets uploaded.

Open MiniPx →