{"id":21025089,"url":"https://github.com/krutsch/progressive-picture","last_synced_at":"2025-05-15T08:33:38.850Z","repository":{"id":36967412,"uuid":"275355809","full_name":"Krutsch/progressive-picture","owner":"Krutsch","description":"Native Lazy Loaded Picture Element with Progressive Image Change","archived":false,"fork":false,"pushed_at":"2025-04-16T16:03:32.000Z","size":170,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-08T21:56:18.010Z","etag":null,"topics":["dom","element","image","intersectionobserver","lazyload","mutationobserver","picture","pictures","progressive","progressive-image-loading"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Krutsch.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2020-06-27T11:14:21.000Z","updated_at":"2025-04-16T16:03:36.000Z","dependencies_parsed_at":"2024-07-23T08:34:37.936Z","dependency_job_id":null,"html_url":"https://github.com/Krutsch/progressive-picture","commit_stats":{"total_commits":94,"total_committers":6,"mean_commits":"15.666666666666666","dds":0.7553191489361702,"last_synced_commit":"8234367847197d4f16546fc58a9b003a6bbab235"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krutsch%2Fprogressive-picture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krutsch%2Fprogressive-picture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krutsch%2Fprogressive-picture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krutsch%2Fprogressive-picture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Krutsch","download_url":"https://codeload.github.com/Krutsch/progressive-picture/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254304837,"owners_count":22048480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["dom","element","image","intersectionobserver","lazyload","mutationobserver","picture","pictures","progressive","progressive-image-loading"],"created_at":"2024-11-19T11:30:08.241Z","updated_at":"2025-05-15T08:33:37.843Z","avatar_url":"https://github.com/Krutsch.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Progressive Picture\n\n\u003e This 700 bytes (compressed) library enhances `Picture Elements` with Progressive Image Loading and thus improves the initial time of images being displayed.\n\u003e You can find out more from the [blog post](https://dev.to/fabkrut/enhancing-images-on-the-web-3b35).\n\n## Install via NPM\n\n```\n$ npm install progressive-picture\n```\n\n## Install via Script Tag\n\n```\n\u003cscript type=\"module\" src=\"https://unpkg.com/progressive-picture\"\u003e\u003c/script\u003e\n```\n\n## Add the styles\n\n```css\npicture \u003e img {\n  display: block;\n  max-width: 100%;\n  height: auto;\n  filter: blur(0);\n  transition: filter 0.7s ease-in;\n}\npicture \u003e img[data-src] {\n  filter: blur(3px);\n}\npicture \u003e img.img-progressive {\n  width: auto;\n}\n```\n\n## Example\n\n```html\n\u003cpicture\u003e\n  \u003csource srcset=\"eu.preview.webp\" data-src=\"eu.webp\" type=\"image/webp\" /\u003e\n  \u003csource srcset=\"eu.preview.jpg\" data-src=\"eu.jpg\" type=\"image/jpg\" /\u003e\n  \u003cimg\n    src=\"eu.preview.jpg\"\n    data-src=\"eu.jpg\"\n    loading=\"lazy\"\n    width=\"500\"\n    height=\"750\"\n    alt=\"\"\n    data-alt=\"Eukalyptus\"\n  /\u003e\n\u003c/picture\u003e\n```\n\n### Demo\n\nhttps://lazy-load-picture.netlify.app/  \nhttps://lazy-load-picture.netlify.app/masonry.html\n\n## Usage\n\nThe `srcset` of `\u003csource\u003e` and the `src` of `\u003cimg\u003e` has to be filled with the URI for the low-quality image (or in case of the `\u003csource\u003e` element: a `srcset` of low quality preview pictures. The data-src holds the high-quality image(s) and will be replaced once it has been loaded.  \nAlso, there is a data-alt Attribute that can be applied as alt, once the Image was replaced. This fixes the inelegance of displaying text before an image appears.\n\n### Further Optimization\n\nWhile this library is useful on the Web, optimizing the image correctly in the build step is the other side of the coin. This plugin [snowpack-plugin-sharp](https://www.npmjs.com/package/snowpack-plugin-sharp) could be helpful in this case.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrutsch%2Fprogressive-picture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrutsch%2Fprogressive-picture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrutsch%2Fprogressive-picture/lists"}