Introduction

Optimize Images in your Angular Application using the built-in NgOptimizedImage directive powered by incredible sharp backend.

What is ng-image-optimizer?

The ng-image-optimizer library extends Angular's native image capabilities by providing a high-performance Express middleware that intercepts image requests, processes them using the sharp library, and caches the results on disk.

Key Features

  • 🚀 Performance: Automatic resizing, format conversion (WebP/AVIF), and quality adjustment.
  • ⚡ Seamless Integration: Works directly with Angular's built-in NgOptimizedImage directive.
  • 💾 Advanced Caching: Persistent file-based caching with LRU (Least Recently Used) logic to minimize server load.
  • 🛡️ Secure by Default: Built-in Content Security Policy (CSP) headers and SVG protection.
  • 🛠️ Automated Setup: Includes an ng add schematic for zero-config integration.
  • 🌍 Remote Image Support: Securely fetch and optimize images from external domains via allowlists.

Why do I need it?

While Angular provides the NgOptimizedImage directive to ensure images are loaded correctly with performance best-practices (lazy-loading, fetchpriority), it does not actually resize or compress image files on your server. You still need a backend image loader to handle the processing. That's where ng-image-optimizer steps in, bringing Next.js-level image optimization natively to Angular projects.