{"id":17242876,"url":"https://github.com/imcuttle/medium-image-progressive","last_synced_at":"2025-10-27T10:32:37.573Z","repository":{"id":45112782,"uuid":"124749891","full_name":"imcuttle/medium-image-progressive","owner":"imcuttle","description":"Medium's progressive image style","archived":false,"fork":false,"pushed_at":"2022-01-07T14:54:02.000Z","size":6811,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-07T21:11:34.332Z","etag":null,"topics":["image","medium","medium-image","progressive","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/imcuttle.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}},"created_at":"2018-03-11T11:31:32.000Z","updated_at":"2018-06-08T04:55:57.000Z","dependencies_parsed_at":"2022-09-17T16:10:59.963Z","dependency_job_id":null,"html_url":"https://github.com/imcuttle/medium-image-progressive","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmedium-image-progressive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmedium-image-progressive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmedium-image-progressive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imcuttle%2Fmedium-image-progressive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imcuttle","download_url":"https://codeload.github.com/imcuttle/medium-image-progressive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238481898,"owners_count":19479753,"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":["image","medium","medium-image","progressive","react"],"created_at":"2024-10-15T06:14:18.866Z","updated_at":"2025-10-27T10:32:27.554Z","avatar_url":"https://github.com/imcuttle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# medium-image-progressive\nMedium's progressive image style.\n\n[![build status](https://img.shields.io/travis/imcuttle/medium-image-progressive/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/medium-image-progressive)\n[![NPM version](https://img.shields.io/npm/v/medium-image-progressive.svg?style=flat-square)](https://www.npmjs.com/package/medium-image-progressive)\n[![NPM Downloads](https://img.shields.io/npm/dm/medium-image-progressive.svg?style=flat-square\u0026maxAge=43200)](https://www.npmjs.com/package/medium-image-progressive)\n\n[Demo](https://imcuttle.github.io/medium-image-progressive/)  \n![](./snapshot.gif)\n\n## Installation\n### NPM\n```bash\nnpm i medium-image-progressive\n```\n### UMD\n\nname: mediumImageProgressive  \n[unpkg](https://unpkg.com/medium-image-progressive)\n\n## Usage\n\n```javascript\nimport mediumImageProgressive from 'medium-image-progressive'\nmediumImageProgressive('img selector', {\n  // options\n})\n```\n\n### Options\n- `progressImageUrlGetter` \u003cfunction\u003e  \n  the thumb image url getter  \n  default: `(elem) =\u003e elem.getAttribute('src')`\n- `originImageUrlGetter` \u003cfunction\u003e  \n  default: `(elem) =\u003e elem.getAttribute('data-src')`\n- `widthGetter`  \u003cfunction\u003e    \n  image's width getter  \n  default `elem =\u003e elem.getAttribute('width')`\n- `heightGetter`  \u003cfunction\u003e  \n  default: `elem =\u003e elem.getAttribute('height')`\n\n### React Component\n\n```javascript\nimport MPImg from 'medium-image-progressive/dist/react'\n\n// render\n\u003cMPImg\n  progressUrl=\"https://cdn-images-1.medium.com/freeze/max/30/1*LyAN2qcxGdVXXQBiV7IuGQ.jpeg?q=20\"\n  originUrl=\"https://cdn-images-1.medium.com/max/800/1*LyAN2qcxGdVXXQBiV7IuGQ.jpeg\"\n  width=\"700\"\n  height=\"480\"\n/\u003e\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fmedium-image-progressive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimcuttle%2Fmedium-image-progressive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimcuttle%2Fmedium-image-progressive/lists"}