Skip to content

Provide image component similar to next/image #42765

Closed
Closed
Provide image component similar to next/image#42765
Labels
area: commonIssues related to APIs in the @angular/common packagefeatureLabel used to distinguish feature request from other issuesfeature: under considerationFeature request for which voting has completed and the request is now under consideration
Milestone
Backlog

Description

@prabh-62
prabh-62
opened on Jul 4, 2021

Feature Request

Relevant Package

  • @angular/image

Description

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

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

Activity

  1. petebacondarwin
    added
    featureLabel used to distinguish feature request from other issues
    on Jul 4, 2021

  2. splincode commented on Jul 5, 2021

    @splincode
    splincode
    on Jul 5, 2021
    Contributor

    Maybe relate to @angular/cdk/image?

  3. flash-me commented on Jul 5, 2021

    @flash-me
    flash-me
    on Jul 5, 2021
    Contributor

    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 ⚡

  4. alan-agius4 commented on Jul 5, 2021

    @alan-agius4
    alan-agius4
    on Jul 5, 2021
    Contributor

    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.

  5. angular-robot commented on Jul 5, 2021

    @angular-robot
    angular-robotbot
    on Jul 5, 2021
    Contributor

    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.

  6. angular-robot
    added
    votes required
    on Jul 5, 2021

  7. samuelfernandez commented on Jul 6, 2021

    @samuelfernandez
    samuelfernandez
    on Jul 6, 2021

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

  8. atscott
    added
    area: commonIssues related to APIs in the @angular/common package
    on Jul 8, 2021
  9. ngbot
    added this to the Backlog milestone on Jul 8, 2021
  10. angular-robot
    added
    feature: under considerationFeature request for which voting has completed and the request is now under consideration
    and removed
    votes required
    on Jul 14, 2021

  11. conradkirschner commented on Mar 10, 2022

    @conradkirschner
    conradkirschner
    on Mar 10, 2022

    @atscott Are here any updates?

  12. HamzaMoiyadi commented on Apr 5, 2022

    @HamzaMoiyadi
    HamzaMoiyadi
    on Apr 5, 2022

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

  13. otodockal commented on Apr 5, 2022

    @otodockal
    otodockal
    on Apr 5, 2022
    Contributor

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

  14. alan-agius4
    changed the title [-]Provide @angular/image component similar to next/image[/-] [+]Provide image component similar to next/image[/+] on Aug 9, 2022
  15. alan-agius4
    linked a pull request that will close this issuefeat(common): add `NgOptimizedImage` directive #47082on Aug 9, 2022

  16. pkozlowski-opensource commented on Jan 11, 2023

    @pkozlowski-opensource
    pkozlowski-opensource
    on Jan 11, 2023
    Member

    We do have NgOptimizedImage directive starting from Angular 14.2

  17. pkozlowski-opensource
    closed this as completedon Jan 11, 2023

  18. angular-automatic-lock-bot commented on Feb 11, 2023

    @angular-automatic-lock-bot
    angular-automatic-lock-botbot
    on Feb 11, 2023

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    This action has been performed automatically by a bot.

  19. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Feb 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: commonIssues related to APIs in the @angular/common packagefeatureLabel used to distinguish feature request from other issuesfeature: under considerationFeature request for which voting has completed and the request is now under consideration

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions