{"id":24762242,"url":"https://github.com/uxter/img4web","last_synced_at":"2026-04-30T18:32:03.306Z","repository":{"id":57272567,"uuid":"84813847","full_name":"uxter/img4web","owner":"uxter","description":"Image converter for adaptive web pages.","archived":false,"fork":false,"pushed_at":"2017-07-31T11:30:34.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-20T11:48:17.336Z","etag":null,"topics":["adaptive","converter","crop","image","resize","web"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uxter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-13T10:29:03.000Z","updated_at":"2023-01-27T19:54:23.000Z","dependencies_parsed_at":"2022-09-04T05:53:32.280Z","dependency_job_id":null,"html_url":"https://github.com/uxter/img4web","commit_stats":null,"previous_names":["shcoder-ru/img4web"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/uxter/img4web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxter%2Fimg4web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxter%2Fimg4web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxter%2Fimg4web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxter%2Fimg4web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uxter","download_url":"https://codeload.github.com/uxter/img4web/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uxter%2Fimg4web/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32473804,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"ssl_error","status_checked_at":"2026-04-30T13:12:06.837Z","response_time":57,"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":["adaptive","converter","crop","image","resize","web"],"created_at":"2025-01-28T19:29:10.213Z","updated_at":"2026-04-30T18:32:03.281Z","avatar_url":"https://github.com/uxter.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# img4web\nImage converter for adaptive web pages.\n\n[![npm package](https://nodei.co/npm/img4web.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://www.npmjs.com/package/img4web)\n\n## Installation\n\nFirst download and install [GraphicsMagick](http://www.graphicsmagick.org/) or [ImageMagick](http://www.imagemagick.org/).\n\n##### Local installation\n```sh\nnpm install --save-dev img4web\n```\n\n##### Global installation\n```sh\nnpm install -g img4web\n```\n\n## Usage\n\nTo run the converter in command line\n\n```sh\nimg4web --help\n#\n#  Usage: img4web [options]\n#\n#  Options:\n#\n#    -h, --help               output usage information\n#    --src-file \u003cfile\u003e        Specify source file (override --src-dir and --src-ext)\n#    --src-dir \u003cdir\u003e          Specify source dir\n#    --src-ext \u003cextensions\u003e   Specify source extensions\n#    --out-dir \u003cdir\u003e          Specify output dir\n#    --out-format \u003cformat\u003e    Specify output format\n#\n```\n\nRun the converter using\n\n```sh\nimg4web --src-dir ./tmp/src --src-ext jpg,png,gif \\\n--out-dir ./tmp/out --out-format \\\n'sm1=ext:jpg,width:420,height:240,quality:80,strip:true,interlance:Line;\\\nmd1=ext:jpg,width:640,height:480:quality:90,strip:true,interlance:Line'\n```\n\nTo run the converter using npm, you can specify scripts in `package.json`\n\n```json\n{\n  \"scripts\": {\n    \"convert-images\": \"img4web --src-dir ./tmp/src --src-ext jpg,png,gif --out-dir ./tmp/out --out-format 'sm1=ext:jpg,width:420,height:240,quality:80,strip:true,interlance:Line;md1=ext:jpg,width:640,height:480,quality:90,strip:true,interlance:Line'\"\n  }\n}\n```\n\nYou can specify the config in `.img4webrc`\n\n```json\n{\n    \"srcDir\": \"./tmp/src\",\n    \"srcExt\": [\n        \"jpg\",\n        \"png\",\n        \"gif\"\n    ],\n    \"outDir\": \"./tmp/out\",\n    \"outFormat\": {\n        \"sm1\": {\n            \"ext\": \"jpg\",\n            \"width\": 420,\n            \"height\": 240,\n            \"quality\": 80,\n            \"strip\": true,\n            \"interlance\": \"Line\"\n        },\n        \"md1\": {\n            \"ext\": \"jpg\",\n            \"width\": 640,\n            \"height\": 480,\n            \"quality\": 90,\n            \"strip\": true,\n            \"interlance\": \"Line\"\n        }\n    }\n}\n```\n\nAlternatively, you can specify the field `img4web` in your `package.json`\n\n```json\n{\n    \"img4web\": {\n        \"srcDir\": \"./tmp/src\",\n        \"srcExt\": [\n            \"jpg\",\n            \"png\",\n            \"gif\"\n        ],\n        \"outDir\": \"./tmp/out\",\n        \"outFormat\": {\n            \"sm1\": {\n                \"ext\": \"jpg\",\n                \"width\": 420,\n                \"height\": 240,\n                \"quality\": 80,\n                \"strip\": true,\n                \"interlance\": \"Line\"\n            },\n            \"md1\": {\n                \"ext\": \"jpg\",\n                \"width\": 640,\n                \"height\": 480,\n                \"quality\": 90,\n                \"strip\": true,\n                \"interlance\": \"Line\"\n            }\n        }\n    }\n}\n```\n\nAnd specify scripts in `package.json`\n\n```json\n{\n  \"scripts\": {\n    \"convert-images\": \"img4web\"\n  }\n}\n```\n\n## Usage result\n\ntag [picture](https://developer.mozilla.org/en/docs/Web/HTML/Element/picture)\n\n```html\n\u003cpicture\u003e\n  \u003csource media=\"(min-width: 768px)\" srcset=\"img-sm1.jpg\"\u003e\n  \u003csource media=\"(min-width: 992px)\" srcset=\"img-md1.jpg\"\u003e\n  \u003cimg src=\"img.jpg\"\u003e\n\u003c/picture\u003e\n```\n\nCSS media queries\n\n```css\n.container {\n    background: url(img.jpg);\n}\n@media (min-width: 768px) {\n    .container {\n        background: url(img-sm1.jpg);\n    }\n}\n@media (min-width: 992px) {\n    .container {\n        background: url(img-md1.jpg);\n    }\n}\n```\n\n## Dependencies\n[babel-core](https://www.npmjs.com/package/babel-core) * \n[babel-runtime](https://www.npmjs.com/package/babel-runtime) * \n[babel-plugin-transform-runtime](https://www.npmjs.com/package/babel-plugin-transform-runtime) * \n[babel-plugin-transform-object-rest-spread](https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread) * \n[babel-preset-es2015](https://www.npmjs.com/package/babel-preset-es2015) * \n[babel-preset-es2017](https://www.npmjs.com/package/babel-preset-es2017) * \n[commander](https://www.npmjs.com/package/commander) * \n[gm](https://www.npmjs.com/package/gm) * \n[mkdirp](https://www.npmjs.com/package/mkdirp) * \n[recursive-readdir](https://www.npmjs.com/package/recursive-readdir)\n\n## Note on Patches/Pull Requests\n\n1. Fork the project.\n2. Make your feature addition or bug fix.\n3. Send me a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuxter%2Fimg4web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuxter%2Fimg4web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuxter%2Fimg4web/lists"}