{"id":19817743,"url":"https://github.com/msaaddev/nextjs-conf-demo","last_synced_at":"2026-06-09T03:31:23.599Z","repository":{"id":114948477,"uuid":"416707967","full_name":"msaaddev/nextjs-conf-demo","owner":"msaaddev","description":"A demo website I created for Next.js Conf 2021","archived":false,"fork":false,"pushed_at":"2021-10-26T19:11:50.000Z","size":200242,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-22T22:44:00.090Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nextjs-conf-demo.vercel.app","language":"JavaScript","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/msaaddev.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":"contributing.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-13T11:15:56.000Z","updated_at":"2023-08-24T14:09:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"b0b2f210-404b-4a7d-9370-72852fb1a4f5","html_url":"https://github.com/msaaddev/nextjs-conf-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/msaaddev/nextjs-conf-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaaddev%2Fnextjs-conf-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaaddev%2Fnextjs-conf-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaaddev%2Fnextjs-conf-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaaddev%2Fnextjs-conf-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msaaddev","download_url":"https://codeload.github.com/msaaddev/nextjs-conf-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msaaddev%2Fnextjs-conf-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34090751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-12T10:13:35.871Z","updated_at":"2026-06-09T03:31:23.561Z","avatar_url":"https://github.com/msaaddev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![cover](assets/cover.jpeg)\n\n\u003cdiv align=\"center\"\u003e\n \u003ch2\u003e⚡️ \u003ca href=\"https://nextjs.org/conf/speakers/msaaddev\"\u003eLet's Talk about Image Optimization with Next.js\u003c/a\u003e\u003c/h2\u003e\n \u003ch4\u003e\u003ca href=\"https://nextjs.org/conf/speakers\"\u003eNext.js Conf 2021\u003c/a\u003e\u003c/h4\u003e\n\u003c/div\u003e\n\n### 🎩 Talk Overview\n\nBecause of their size, images are the largest assets of your website. As the size increases, the speed of your web app decreases along with it. According to the HTTP Archive, images make up on average 21% of a total webpage weight. Different image formats also affect your site’s overall performance. In this talk, I am going to speak about how Next.js natively helps you optimize your images. How it provides a built-in solution with its Image component that uses various techniques to make sure your site is fast, consumes less bandwidth, and at the same time has a great user experience.\n\n![separator](assets/separate.jpg)\n\n### 🚀 Purpose\n\nFollowing are the reasons why I created this demo:\n\n- Explain the issues associated with `\u003cimg\u003e` tag and show it live\n- Explain the working of `\u003cImage/\u003e` component of Next.js\n- Showcase some of the pros of `\u003cImage/\u003e` component over `\u003cimg\u003e` tag\n\n## ⚡️ Other Projects\n\nI have curated a [detailed list](https://github.com/msaaddev/open-source) of all the open-source projects I have authored. Do take out a moment and take a look.\n\n## 🔑 License \u0026 Conduct\n\n- MIT © [Saad Irfan](https://github.com/msaaddev)\n- [Code of Conduct](https://github.com/msaaddev/nextjs-conf-demo/blob/main/CODE-OF-CONDUCT.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsaaddev%2Fnextjs-conf-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsaaddev%2Fnextjs-conf-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsaaddev%2Fnextjs-conf-demo/lists"}