{"id":20186105,"url":"https://github.com/leolanese/angular-image-loading","last_synced_at":"2026-05-02T23:38:07.485Z","repository":{"id":235817158,"uuid":"791318450","full_name":"leolanese/Angular-Image-Loading","owner":"leolanese","description":"Prioritizing Important Images: NgOptimizedImage allows you to prioritize the loading of important images, ensuring that the most critical images are rendered first, providing a better perceived loading experience for users","archived":false,"fork":false,"pushed_at":"2024-04-28T09:13:33.000Z","size":278,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-13T03:33:23.752Z","etag":null,"topics":["angular","javascript","responsive-design","typescript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leolanese.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-04-24T13:57:41.000Z","updated_at":"2025-08-14T09:42:04.000Z","dependencies_parsed_at":"2024-04-24T16:57:34.719Z","dependency_job_id":"de9ff719-514f-420a-89a8-4cd2c6899d19","html_url":"https://github.com/leolanese/Angular-Image-Loading","commit_stats":null,"previous_names":["leolanese/angular-image-loading"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leolanese/Angular-Image-Loading","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Image-Loading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Image-Loading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Image-Loading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Image-Loading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leolanese","download_url":"https://codeload.github.com/leolanese/Angular-Image-Loading/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Image-Loading/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32553688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T22:28:24.418Z","status":"ssl_error","status_checked_at":"2026-05-02T22:28:14.225Z","response_time":132,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","javascript","responsive-design","typescript"],"created_at":"2024-11-14T03:16:01.025Z","updated_at":"2026-05-02T23:38:07.456Z","avatar_url":"https://github.com/leolanese.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Image Optimisation\n\n\u003e Speed +LCP, Lazy Loads images be default + Automaticly generats Responsive srcsets when sizes is defined\n\n\u003e To activate `NgOptimizedImage`, simply import `NgOptimizedImage` and replace the src attribute of your \u003cimg\u003e tag with `ngSrc`\n\n## What NgOptimizedImage does?\n\n`Prioritizing Important Images`: NgOptimizedImage allows you to prioritize the loading of important images, ensuring that the most critical images are rendered first, providing a better perceived loading experience for users.\n\n`Lazy Loading`: NgOptimizedImage employs lazy loading, which means that images are only loaded when they are needed, such as when the user scrolls to the part of the page where the image is located. This can significantly improve the initial page load time.\n\n`Preconnect Link`: NgOptimizedImage can generate `\u003clink rel=\"preconnect\"\u003e` tags, which instruct the browser to establish early connections to the image server(s). This can reduce latency and speed up the loading of images.\n\n`Responsive Images`: Correct. NgOptimizedImage automatically generates responsive image variants based on the device's screen size and resolution. This ensures that users receive optimized images tailored to their devices, preventing the delivery of unnecessarily large images, which can slow down the website's performance.\n\n\n## Ideas\n\n\u003e Default Angular 17+ NgOptimizedImage playground tests\n\u003e Configuring an image loader for NgOptimizedImage using Medium\n\u003e Configuring an image loader for NgOptimizedImage using unsplash\n\u003e @Defer Angular 17+ playground tests\n\n\u003e The image loaders provider pattern is designed to be as simple as possible for the common use case of having only a single image CDN used within a component. However, it's still very possible to manage multiple image CDNs using a single provider.\n\n---\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.3.\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n\n---\n\n### :100: \u003ci\u003eThanks!\u003c/i\u003e\n#### Now, don't be an stranger. Let's stay in touch!\n\n\u003ca href=\"https://github.com/leolanese\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n  \u003cimg src=\"https://scastiel.dev/api/image/leolanese?dark\u0026removeLink\" alt=\"leolanese’s GitHub image\" width=\"600\" height=\"314\" /\u003e\n\u003c/a\u003e\n\n##### :radio_button: Linkedin: \u003ca href=\"https://www.linkedin.com/in/leolanese/\" target=\"_blank\"\u003eLeoLanese\u003c/a\u003e\n##### :radio_button: Twitter: \u003ca href=\"https://twitter.com/LeoLanese\" target=\"_blank\"\u003e@LeoLanese\u003c/a\u003e\n##### :radio_button: Portfolio: \u003ca href=\"https://www.leolanese.com\" target=\"_blank\"\u003ewww.leolanese.com\u003c/a\u003e\n##### :radio_button: DEV.to: \u003ca href=\"https://www.dev.to/leolanese\" target=\"_blank\"\u003edev.to/leolanese\u003c/a\u003e\n##### :radio_button: Blog: \u003ca href=\"https://www.leolanese.com/blog\" target=\"_blank\"\u003eleolanese.com/blog\u003c/a\u003e\n##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-image-loading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleolanese%2Fangular-image-loading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-image-loading/lists"}