{"id":21722302,"url":"https://github.com/ecoapm/srcset","last_synced_at":"2025-04-06T15:12:42.601Z","repository":{"id":39741064,"uuid":"50952041","full_name":"ecoAPM/SrcSet","owner":"ecoAPM","description":"A CLI to create sets of responsive images for the web","archived":false,"fork":false,"pushed_at":"2025-03-09T19:22:42.000Z","size":210,"stargazers_count":21,"open_issues_count":0,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T13:09:38.271Z","etag":null,"topics":["hacktoberfest","image","imagesharp","jpeg","png","responsive","srcset"],"latest_commit_sha":null,"homepage":"","language":"C#","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/ecoAPM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-02T21:08:30.000Z","updated_at":"2025-03-09T19:22:46.000Z","dependencies_parsed_at":"2023-02-14T01:01:04.763Z","dependency_job_id":"6f308639-9e30-4fd6-9c7e-45126b0ad94e","html_url":"https://github.com/ecoAPM/SrcSet","commit_stats":{"total_commits":95,"total_committers":8,"mean_commits":11.875,"dds":"0.33684210526315794","last_synced_commit":"08c75778cc129839c241b95daa64a7c05002437e"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecoAPM%2FSrcSet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecoAPM%2FSrcSet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecoAPM%2FSrcSet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ecoAPM%2FSrcSet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ecoAPM","download_url":"https://codeload.github.com/ecoAPM/SrcSet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247500469,"owners_count":20948880,"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":["hacktoberfest","image","imagesharp","jpeg","png","responsive","srcset"],"created_at":"2024-11-26T02:23:22.643Z","updated_at":"2025-04-06T15:12:42.577Z","avatar_url":"https://github.com/ecoAPM.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SrcSet\n\nTools to create sets of responsive images for the web\n\n[![SrcSet](https://img.shields.io/nuget/v/SrcSet?logo=nuget\u0026label=SrcSet)](https://www.nuget.org/packages/SrcSet/)\n[![SrcSet.Statiq](https://img.shields.io/nuget/v/SrcSet.Statiq?logo=nuget\u0026label=SrcSet.Statiq)](https://www.nuget.org/packages/SrcSet.Statiq/)\n[![SrcSet.Core](https://img.shields.io/nuget/v/SrcSet.Core?logo=nuget\u0026label=SrcSet.Core)](https://www.nuget.org/packages/SrcSet.Core/)\n\n[![Build Status](https://github.com/ecoAPM/SrcSet/workflows/CI/badge.svg)](https://github.com/ecoAPM/SrcSet/actions)\n[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=ecoAPM_SrcSet\u0026metric=coverage)](https://sonarcloud.io/dashboard?id=ecoAPM_SrcSet)\n\n[![Maintainability](https://sonarcloud.io/api/project_badges/measure?project=ecoAPM_SrcSet\u0026metric=sqale_rating)](https://sonarcloud.io/dashboard?id=ecoAPM_SrcSet)\n[![Reliability](https://sonarcloud.io/api/project_badges/measure?project=ecoAPM_SrcSet\u0026metric=reliability_rating)](https://sonarcloud.io/dashboard?id=ecoAPM_SrcSet)\n[![Security](https://sonarcloud.io/api/project_badges/measure?project=ecoAPM_SrcSet\u0026metric=security_rating)](https://sonarcloud.io/dashboard?id=ecoAPM_SrcSet)\n\n## Tools\n\nThis repository contains 3 projects:\n- [SrcSet](#cli): a CLI utility to create sets of responsive images\n- [SrcSet.Statiq](#statiq): pipeline and helper for integrating responsive images into a Statiq site\n- [SrcSet.Core](#library): a library used by the above, also available for public consumption\n\n## CLI\n\n### Requirements\n\n- .NET SDK\n\n### Installation\n\n```bash\ndotnet tool install -g SrcSet\n```\n\n### Usage\n\n```bash\nsrcset {file or directory} [-r] [space delimited set of widths]\n```\n\ne.g.\n\n```bash\nsrcset IMG_9687.jpg 500 1000\n```\n\nwill resize the image to 500 and 1000 pixels wide, with the filenames `IMG_9687-0500.jpg` and `IMG_9687-1000.jpg`\n\n```bash\nsrcset all_images/\n```\n\nwill resize all images in the `all_images` directory (recursively if `-r` is included) to each of the default widths\n\n## Statiq\n\nThis package contains a Statiq pipeline and HTML helper method to easily integrate responsive image generation into a Statiq site.\n\nThe process to accomplish this has two steps:\n1. create the set of responsive images to use (using the pipeline)\n2. reference the images in the generated HTML (using the HTML helper)\n\n### Step 1\n\nTo create a set of responsive images, place the originals (to be resized) alongside your other assets, and then in your bootstrapper code, add:\n\n```c#\nbootstrapper.AddPipeline(\"SrcSet\", new ResponsiveImages(\"**/*.jpg\"));\n```\n\nwhere the optional parameter `**/*.jpg` is a glob pointing to the image assets to resize.\n\nA custom set of widths can also be passed as a second parameter:\n\n```c#\nbootstrapper.AddPipeline(\"SrcSet\", new ResponsiveImages(\"**/*.jpg\", new ushort[] { 100, 200, 300 }));\n```\n\n### Step 2\n\nIn your Razor file, call the HTML helper to create an `\u003cimg/\u003e` tag with the relevant attributes set:\n\n```c#\n@Html.Raw(ResponsiveImages.SrcSet(\"images/original.jpg\"))\n```\n\nYou can also customize the widths, default width, and add any other attributes here:\n\n```c#\n@Html.Raw(ResponsiveImages.SrcSet(\"images/original.jpg\", new ushort[] { 100, 200, 300 }, 200))\n```\n\n```c#\n@Html.Raw(ResponsiveImages.SrcSet(\"images/original.jpg\", attributes: new Dictionary\u003cstring, string\u003e\n\t{\n\t\t{ \"class\", \"full-width\" },\n\t\t{ \"alt\", \"don't forget about accessibility!\" }\n\t}\n))\n```\n\n## Library\n\nThe \"Core\" library can be used to incorporate SrcSet's functionality into your own app.\n\nFirst, create a new `SrcSetManager`:\n\n```c#\nvar manager = new SrcSetManager();\n```\n\nThen invoke it's `SaveSrcSet()` method:\n\n```c#\nawait manager.SaveSrcSet(\"file.png\", SrcSetManager.DefaultSizes);\n```\n\nIf you need more control than the default constructor and sizes provide, you can pass in a specific logging mechanism (other than the default `Console.WriteLine`) and list of widths:\n\n```c#\nvar manager = new SrcSetManager(Image.LoadAsync, (string s) =\u003e logger.LogDebug(s));\nawait manager.SaveSrcSet(\"file.png\", new ushort[] { 100, 200, 300 });\n```\n\n### Default widths\n\n- 240px\n- 320px\n- 480px\n- 640px\n- 800px\n- 960px\n- 1280px\n- 1600px\n- 1920px\n- 2400px\n\n### File types\n\n`SrcSet` uses [ImageSharp](https://imagesharp.net) under the hood, and therefore should theoretically support all file types that ImageSharp supports by entering the filename as a parameter, however when entering a directory as a parameter, file types are limited to:\n\n- jpg / jpeg / jfif\n- png\n- bmp / bm / dip\n- gif\n- tga / vda / icb / vst\n\n## Contributing\n\nPlease be sure to read and follow ecoAPM's [Contribution Guidelines](CONTRIBUTING.md) when submitting issues or pull requests.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecoapm%2Fsrcset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fecoapm%2Fsrcset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fecoapm%2Fsrcset/lists"}