{"id":24983644,"url":"https://github.com/posthtml/posthtml-sugar-srcset","last_synced_at":"2025-04-11T20:51:21.870Z","repository":{"id":36981198,"uuid":"113945491","full_name":"posthtml/posthtml-sugar-srcset","owner":"posthtml","description":"This shortens the description of the value of srcset.","archived":false,"fork":false,"pushed_at":"2023-03-04T04:05:39.000Z","size":607,"stargazers_count":6,"open_issues_count":7,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-29T21:06:08.158Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/posthtml.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}},"created_at":"2017-12-12T05:00:48.000Z","updated_at":"2022-05-30T07:06:59.000Z","dependencies_parsed_at":"2023-08-19T13:42:21.370Z","dependency_job_id":null,"html_url":"https://github.com/posthtml/posthtml-sugar-srcset","commit_stats":{"total_commits":127,"total_committers":4,"mean_commits":31.75,"dds":"0.36220472440944884","last_synced_commit":"e5bdbcfaaff45d7eb8a695079dbd9a84ea4902e9"},"previous_names":["tsuguya/posthtml-sugar-srcset"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-sugar-srcset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-sugar-srcset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-sugar-srcset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posthtml%2Fposthtml-sugar-srcset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posthtml","download_url":"https://codeload.github.com/posthtml/posthtml-sugar-srcset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247927884,"owners_count":21019611,"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":[],"created_at":"2025-02-04T09:19:59.468Z","updated_at":"2025-04-11T20:51:21.844Z","avatar_url":"https://github.com/posthtml.png","language":"JavaScript","readme":"# posthtml-sugar-srcset\n\n[![npm version](https://badge.fury.io/js/posthtml-sugar-srcset.svg)](https://badge.fury.io/js/posthtml-sugar-srcset)\n[![Build Status](https://travis-ci.org/posthtml/posthtml-sugar-srcset.svg?branch=master)](https://travis-ci.org/posthtml/posthtml-sugar-srcset)\n\nSugar for srcset attributes of the image tag.\n\n## Install\n\n```\n$ npm install --save-dev posthtml-sugar-srcset\n```\n\n## How it works\n\n```html\n\u003cimg src=\"path/to/image.png\" srcset=\"2x, 3x\" alt=\"Text representation of image.\"\u003e\n\u003cimg src=\"path/to/image@2x.png\" alt=\"Text representation of image.\"\u003e\n\n\u003cimg src=\"path/to/image-320w.png\" sizes=\"100vw\" srcset=\"320w, 640w, 980w\" alt=\"Text representation of image.\"\u003e\n\n\u003cpicture\u003e\n  \u003csource src=\"path/to/filename-large.png\" media=\"(min-width: 1000px)\" srcset=\"1x, 2x, 3x\"\u003e\n  \u003csource src=\"path/to/filename-medium.png\" media=\"(min-width: 800px)\" srcset=\"1x, 2x, 3x\"\u003e\n  \u003cimg src=\"path/to/filename-small.png\" srcset=\"1x, 2x, 3x\" alt=\"Text representation of image.\"\u003e\n\u003c/picture\u003e\n```\n\nOutput:\n\n```html\n\u003cimg src=\"path/to/image.png\" srcset=\"path/to/image@2x.png 2x,path/to/image@3x.png 3x\" alt=\"Text representation of image.\"\u003e\n\u003cimg src=\"path/to/image.png\" srcset=\"path/to/image@2x.png 2x\" alt=\"Text representation of image.\"\u003e\n\n\u003cimg src=\"path/to/image-320w.png\" sizes=\"100vw\" srcset=\"path/to/image-320w.png 320w,path/to/image-640w.png 640w,path/to/image-980w.png 980w\" alt=\"Text representation of image.\"\u003e\n\n\u003cpicture\u003e\n  \u003csource media=\"(min-width: 1000px)\" srcset=\"path/to/filename-large.png,path/to/filename-large@2x.png 2x,path/to/filename-large@3x.png 3x\"\u003e\n  \u003csource media=\"(min-width: 800px)\" srcset=\"path/to/filename-medium.png,path/to/filename-medium@2x.png 2x,path/to/filename-medium@3x.png 3x\"\u003e\n  \u003cimg src=\"path/to/filename-small.png\" srcset=\"path/to/filename-small@2x.png 2x,path/to/filename-small@3x.png 3x\" alt=\"Text representation of image.\"\u003e\n\u003c/picture\u003e\n```\n\n## Usage\n\n``` js\nconst posthtml = require('posthtml');\nconst srcset = require('posthtml-sugar-srcset');\n\nposthtml([srcset()])\n  .process(html)\n  .then(res =\u003e console.log(res.html));\n```\n\n## Options\n\n#### resolution\n\nType: `Object`\n\n#### resolution.src\n\nType: `boolean`  \nDefault: `true`\n\nIf false, pixel density descriptor will not be converted.\n\n#### resolution.srcset\n\nType: `boolean`  \nDefault: `true`\n\nIf false, pixel density descriptor will not be converted.\n\n##### resolution.suffix\n\nType: `string`  \nDefault: `@[match]x`\n\nReference string.  \nIf this pattern is included in src, it is based on the character excluding the pattern.\n\n##### resolution.pixelRatio\n\nType: `Array`  \nDefault: `[1, 2, 3, 4]`\n\nsrc based filtering list.\n\n##### resolution.skip1x\n\nType: `boolean`  \nDefault: `true`\n\nIf srcset is 1x, omitted.\n\n##### resolution.skip1xSuffix\n\nType: `boolean`  \nDefault: `true`\n\nIf true, omitting the 1x word input of srcset.\n\n##### resolution.srcReplace\n\nType: `number`  \nDefault: `1`\n\nDefault value of src.  \nIf -1, base string is used.\n\n#### responsive\n\nType: `Object`\n\n##### responsive.src\n\nType: `boolean`  \nDefault: `true`\n\nIf false, width descriptor will not be converted.\n\n##### responsive.srcset\n\nType: `boolean`  \nDefault: `true`\n\nIf false, width descriptor will not be converted.\n\n##### responsive.width\n\nType: `Array`  \nDefault `[]`\n\nsrc based filtering list.  \nOnly be used if `responsive.src: true`.\n\nex)\n\n```js\nsrcset({\n  responsive: {\n    src: true,\n    width: [320, 640]\n  }\n})\n```\n\n##### responsive.suffix\n\nType: `string`  \nDefault: `-[match]w`\n\nReference string.  \nIf this pattern is included in src, it is based on the character excluding the pattern.\n\n##### responsive.srcReplace\n\nType: `number`  \nDefault: `-1`\n\nDefault value of src.  \nIf -1, base string is used.\n\n#### replace\n\nType: `Object`  \nDefault: `{}`\n\nIs the alias that can be used in sizes and media.  \nValid only in the source tag with a picture tag to the parent.\n\nex)\n\n``` js\nreplace({\n    defaultSizes: '50vw',\n    sp: '(max-width: 320px) 100vw',\n    pc: '320px'\n    large: '(max-width: 1600px)',\n    medium: '(max-width: 900px)'\n})\n```\n\nBefore\n\n```html\n\u003cimg src=\"path/to/image.png\" srcset=\"320w, 640w\" alt=\"Text representation of image.\"\u003e\n\u003cimg src=\"path/to/image.png\" sizes=\"sp, pc\" srcset=\"320w, 640w\" alt=\"Text representation of image.\"\u003e\n\u003cpicture\u003e\n  \u003csource src=\"image-large.png\" media=\"large\"\u003e\n  \u003csource src=\"image-medium.png\" media=\"medium\"\u003e\n  \u003cimg src=\"image.png\" alt=\"Text representation of image.\" srcset=\"2x, 3x, 4x\"\u003e\n\u003c/picture\u003e\n```\n\nAfter\n\n```html\n\u003cimg src=\"path/to/image.png\" srcset=\"path/to/image-320w.png 320w,path/to/image-640w.png 640w\" alt=\"Text representation of image.\" sizes=\"50vw\"\u003e\n\u003cimg src=\"path/to/image.png\" sizes=\"(max-width: 320px) 100vw,320px\" srcset=\"path/to/image-320w.png 320w,path/to/image-640w.png 640w\" alt=\"Text representation of image.\"\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(max-width: 1600px)\" srcset=\"image-large.png,image-large@2x.png 2x,image-large@3x.png 3x,image-large@4x.png 4x\"\u003e\n  \u003csource media=\"(max-width: 900px)\" srcset=\"image-medium.png,image-medium.png@2x 2x,image-medium.png@3x 3x,image-medium.png@4x 4x\"\u003e\n  \u003cimg src=\"image.png\" alt=\"Text representation of image.\" srcset=\"image@2x.png 2x,image@3x.png 3x,image@4x.png 4x\"\u003e\n\u003c/picture\u003e\n```\n\n#### sourceSrc\n\nType: `boolean`  \nDefault: `true`\n\nIf you true, to use the src attribute of the source tag.  \nAfter use, delete it.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-sugar-srcset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposthtml%2Fposthtml-sugar-srcset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposthtml%2Fposthtml-sugar-srcset/lists"}