{"id":17345660,"url":"https://github.com/danmad/responsive-image-generator","last_synced_at":"2026-06-24T08:32:05.351Z","repository":{"id":42633352,"uuid":"271443727","full_name":"DanMad/responsive-image-generator","owner":"DanMad","description":"A plugin that extends Adobe® Photoshop's Generate Image Assets feature","archived":false,"fork":false,"pushed_at":"2023-10-18T05:13:06.000Z","size":8575,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-03-27T10:47:02.970Z","etag":null,"topics":["html-generation","photoshop","responsive"],"latest_commit_sha":null,"homepage":"https://github.com/danmad/responsive-image-generator#readme","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/DanMad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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-11T03:35:14.000Z","updated_at":"2024-03-07T04:23:44.000Z","dependencies_parsed_at":"2025-03-27T10:41:45.543Z","dependency_job_id":"2abca759-6b71-4990-b484-79f5b66e087d","html_url":"https://github.com/DanMad/responsive-image-generator","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/DanMad/responsive-image-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanMad%2Fresponsive-image-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanMad%2Fresponsive-image-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanMad%2Fresponsive-image-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanMad%2Fresponsive-image-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DanMad","download_url":"https://codeload.github.com/DanMad/responsive-image-generator/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanMad%2Fresponsive-image-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34724735,"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-24T02:00:07.484Z","response_time":106,"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":["html-generation","photoshop","responsive"],"created_at":"2024-10-15T16:43:13.430Z","updated_at":"2026-06-24T08:32:05.332Z","avatar_url":"https://github.com/DanMad.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive Image Generator\n\nA plugin that extends Adobe® Photoshop's\n[Generate Image Assets](https://helpx.adobe.com/au/photoshop/using/generate-assets-layers.html)\nfeature.\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Usage](#usage)\n- [Issues](#issues)\n- [Contributing](#contributing)\n\n## Getting Started\n\n1. Download the\n   [Responsive Image Generator](https://raw.githubusercontent.com/danmad/responsive-image-generator/resources/responsive-image-generator.min.jsx).\n2. Add the downloaded script to Photoshop's `Scripts` directory. The path to\n   this directory is as follows:\n\n   - Mac OS: `Macintosh HD/Applications/Adobe Photoshop 2023/Presets/Scripts`\n   - Windows': `C:\\Program Files\\Adobe\\Adobe Photoshop 2023\\Presets\\Scripts`\n\n   **Note:** These paths may vary depending on your OS and the version of\n   Photoshop you're running.\n\n3. Navigate to `File \u003e Scripts \u003e Script Events Manager`. The\n   `Script Events Manager` dialog should appear.\n\n   ![Adobe® Photoshop's Script Events Manager dialog](https://github.com/danmad/responsive-image-generator/blob/resources/getting-started-example-1.png)\n\n4. Assign the `responsive-image-generator.min.jsx` script to the `Save Document` event:\n\n   1. Check `Enable Events to Run Scripts/Actions`.\n   2. Select `Save Document` from the options in the `Photoshop Event` dropdown.\n   3. Select `responsive-image-generator.min.jsx` from the options in the\n      `Script` dropdown.\n\n      **Note:** If `responsive-image-generator.min.jsx` isn't available in the\n      `Script` dropdown, browse your file system and select it from Photoshop's\n      `Scripts` directory.\n\n   4. Press `Add`.\n\n   The dialog should now appear as follows.\n\n   ![Adobe® Photoshop's Script Events Manager dialog with Responsive Image Generator installed](https://github.com/danmad/responsive-image-generator/blob/resources/getting-started-example-2.png)\n\n5. Press `Done`.\n6. As the the Responsive Image Generator is designed to extend Photoshop's\n   _Generate Image Assets_ feature, you'll also need to ensure this is toggled\n   on by checking `File \u003e Generate \u003e Image Assets`.\n\nNow you're good to go!\n\n## Usage\n\nSaving a document will call the Responsive Image Generator. If any of the\ndocument's layer names contain asset declarations, then the Responsive Image\nGenerator's dialog will appear.\n\n### Examples\n\nSay you're working on a document called `mona-lisa.psd` and its layer names\ncontain the following assets declarations that need to be generated:\n\n- `100x100 mona-lisa.jpg`\n- `200x200 mona-lisa-@2x.jpg`\n- `300x300 mona-lisa-@3x.jpg`\n\n![Adobe® Photoshop's Layers panel](https://github.com/danmad/responsive-image-generator/blob/resources/usage-example-1.png)\n\nYou save the document and the Responsive Image Generator's dialog appears,\nprompting you for the responsive image's `alt` text.\n\n![Responsive Image Generator's dialog](https://github.com/danmad/responsive-image-generator/blob/resources/usage-example-2.png)\n\nYou add `\"The Mona Lisa\"` as `alt` text and press `Save`.\n\nThis results in a `mona-lisa.html` file being generated inside the\n`mona-lisa-assets` directory alongside the generated assets. The file contains\nan HTML pattern, referencing the generated assets.\n\n```html\n\u003cimg\n  alt=\"The Mona Lisa\"\n  src=\"/images/mona-lisa.jpg\"\n  srcset=\"/images/mona-lisa-@2x.jpg 2x, /images/mona-lisa-@3x.jpg 3x\"\n/\u003e\n```\n\nExpanding on this example, you now need to serve different images for different\ncontexts:\n\n- `sml`\n- `med`\n- `lge`\n\nThis is on top of already serving different images for different resolutions.\n\nYou modify the original asset declarations and include a `sml` argument:\n\n- `100x100 mona-lisa-sml.jpg`\n- `200x200 mona-lisa-sml-@2x.jpg`\n- `300x300 mona-lisa-sml-@3x.jpg`\n\nYou then wrap the orginal layer in two, new groups and include additional asset\ndeclarations in the new group's layer names:\n\n- `200x200 mona-lisa-med.jpg`\n- `400x400 mona-lisa-med-@2x.jpg`\n- `600x600 mona-lisa-med-@3x.jpg`\n- `400x400 mona-lisa-lge.jpg`\n- `800x800 mona-lisa-lge-@2x.jpg`\n- `1200x1200 mona-lisa-lge-@3x.jpg`\n\n![Adobe® Photoshop's Layers panel](https://github.com/danmad/responsive-image-generator/blob/resources/usage-example-3.png)\n\nYou save the document and the Responsive Image Generator's dialog appears with\nadditional inputs, so that you can configure the responsive image's breakpoints.\n\n![Responsive Image Generator's dialog](https://github.com/danmad/responsive-image-generator/blob/resources/usage-example-4.png)\n\nYou're happy with the default breakpoints, so you add `\"The Mona Lisa\"` as `alt`\ntext and press `Save` again.\n\nThe HTML pattern generated in the `mona-lisa.html` file now includes `media`\nattributes that specify the responsive image's breakpoints, as well as\nreferencing the generated assets. Ensuring that different images are served for\ndifferent resolutions _and_ different contexts.\n\n```html\n\u003cpicture\u003e\n  \u003csource\n    media=\"(min-width: 48.0625em)\"\n    srcset=\"\n      /images/mona-lisa-lge.jpg     1x,\n      /images/mona-lisa-lge-@2x.jpg 2x,\n      /images/mona-lisa-lge-@3x.jpg 3x\n    \"\n  /\u003e\n  \u003csource\n    media=\"(min-width: 30.0625em)\"\n    srcset=\"\n      /images/mona-lisa-med.jpg     1x,\n      /images/mona-lisa-med-@2x.jpg 2x,\n      /images/mona-lisa-med-@3x.jpg 3x\n    \"\n  /\u003e\n  \u003cimg\n    alt=\"The Mona Lisa\"\n    src=\"/images/mona-lisa-sml.jpg\"\n    srcset=\"/images/mona-lisa-sml-@2x.jpg 2x, /images/mona-lisa-sml-@3x.jpg 3x\"\n  /\u003e\n\u003c/picture\u003e\n```\n\n## Issues\n\nIf you encounter any bugs, please\n[post an issue](https://github.com/danmad/responsive-image-generator/issues/new).\n\n## Contributing\n\nContributions are more than welcome. Ensure you read through the\n[contributing guidelines](https://github.com/danmad/responsive-image-generator/blob/main/CONTRIBUTING.md)\nbefore submitting a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanmad%2Fresponsive-image-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanmad%2Fresponsive-image-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanmad%2Fresponsive-image-generator/lists"}