Optimize Angular Images — Before They Ever Reach Your Bundle
Compress the images in your Angular project before building — smaller bundle size, faster page loads, no build plugin overhead.
Quick answer
Drop your Angular project's src/assets image folder into TinyPixels before running ng build. It compresses every file in place, shrinking your bundle without adding a build-time image plugin.
How to compress images before an Angular build
Download and open TinyPixels
Free to install on Mac or Windows — no account needed to start.
Drop your src/assets folder in
Compress the images the Angular CLI will copy as-is into dist.
Convert to WebP or AVIF if needed
Get smaller output for hero images and illustrations.
Commit the compressed files
Your next ng build ships with no extra plugin overhead.
Why pre-build compression beats a CLI plugin
Adding image compression to the Angular CLI build pipeline means re-compressing every image on every build, adding time to your CI pipeline for work that only needs to happen once. Compressing images locally before committing them keeps ng build fast while still shipping optimized assets.
This matters most for enterprise Angular apps with many hero images, illustrations, and screenshots — exactly the assets most likely to be exported at higher resolution or quality than the page actually needs.
No build-time overhead
Compress once before committing — no plugin slowing down every CI run.
Direct impact on dist output
src/assets files are copied to dist as-is, so compression is directly reflected.
Bulk project processing
Compress your entire image folder in one pass.
Format conversion included
Convert to WebP or AVIF for even smaller bundle output.
NgOptimizedImage helps loading, not file size
Angular's NgOptimizedImage directive (available since Angular 15) improves how images load — priority hints, automatic srcset generation when paired with a loader, and warnings for missing width/height attributes that cause layout shift. What it doesn't do is touch the actual bytes of your source image.
NgOptimizedImage still serves whatever file you point it at in src/assets. A bloated source PNG gets all the loading-strategy benefits of the directive while still shipping at its original, uncompressed size — the two concerns are complementary, not overlapping.
Common mistakes with Angular project images
Assuming NgOptimizedImage compresses images
The directive optimizes loading behavior (priority, lazy-loading, layout stability) — it has no effect on the file size of the source image itself.
Adding a build-time compression step to the Angular CLI
Custom builders or webpack config overrides that re-compress images add time to every ng build — pre-compress once instead.
Not auditing assets referenced only in component CSS
Background images set via url() in component stylesheets are easy to miss during a src/assets audit but still bundle into the final dist folder.
Skipping WebP for enterprise dashboard graphics
Angular's template syntax handles WebP the same as any other format — there's no framework-specific reason to avoid it, even in older enterprise codebases.
Frequently asked questions
Does the Angular CLI compress images automatically?
No. The Angular CLI build process bundles and hashes assets in src/assets, but it does not compress image content by default. Images ship at whatever size they were added to the project.
Where should I compress images in an Angular project?
Compress images in src/assets before adding them to your project. These files are copied to the output dist folder as-is during ng build, so pre-compression directly reduces your final bundle size.
Do image compression tools slow down ng build?
Adding a build-time image optimization step to the Angular CLI pipeline adds time to every build. Pre-compressing images locally before committing them avoids this entirely, keeping ng build fast.
Can I batch compress my whole Angular project's images at once?
Yes. Drop your src/assets image folder into TinyPixels and every file compresses in one pass, ready to commit before your next build.
Shrink your Angular bundle today
Free to start. No credit card, no account, no cloud. See Pro pricing →
Related tools
Optimize Vue Images
Compress images for your Vue app before build.
Optimize React Images
Compress images for your React app before build.
WebP Converter
Convert any format to WebP locally.
Batch Image Compressor
Compress your entire assets folder in one pass.
Image Compressor Hub
Every format, platform, and framework in one place.
Optimize Next.js Images
Compress public assets before deploying Next.js.
Optimize Svelte Images
Compress images for your Svelte app before build.
Optimize Astro Images
Compress images for your Astro site before build.
Read more: Fix your Lighthouse score where it actually matters → · How to reduce image file size without losing quality →