Provide image component similar to next/image

[prabh-62]

Feature Request

Relevant Package

• @angular/image

Description

Since version 10.0.0, Next.js has a built-in Image Component and Automatic Image Optimization.

• Next.js - Image Component

In Angular land, user has to first navigate to squoosh.app and shrink/resize the image before placing it under the assets folder

Describe the solution you'd like

Provide an angular component for image optimization similar to Next.js Image

Describe alternatives you've considered

Manually optimize JPG/PNG/WebP images using squoosh.app and SVG using SVGOMG

[splincode]

Maybe relate to @angular/cdk/image?

[flash-me]

Maybe relate to @angular/cdk/image?

Yes or even @angular/cli because the optimization of next/image happens on server side with a node instance that serves the next app. It's not just a react component, there is more behind it.

For additional information: https://nextjs.org/docs/basic-features/image-optimization

cheers
flash ⚡

[alan-agius4]

There are multiple aspects to this feature, how it works also dependent on which image providers are used. This is because certain image providers (CDN) offer image optimisations out-of-box.

1. When using one of the supported image providers, queries are added to the request, this is done so that the image is resized and optimised directly the provider.
2. When the image is remotely stored but the provider is not supported during request time the image is downloaded, optimized, cached and served.
3. When the image from the local FS, similar to remote images, during request time the image is read, optimised, cached and served.

While the first can be archived using a purely client side component, The latter two would need to be handled during SSR.

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[samuelfernandez]

I'd be happy to help in contributing this after a technical discussion

[conradkirschner]

@atscott Are here any updates?

[HamzaMoiyadi]

This would be a great feature to implement!
Any updates? Would love to contribute as well

[otodockal]

@HamzaMoiyadi @conradkirschner https://angular.io/guide/roadmap#improve-image-performance