{"id":28302068,"url":"https://github.com/bootstarted/sharp-loader","last_synced_at":"2025-07-22T03:31:36.521Z","repository":{"id":52212076,"uuid":"42380032","full_name":"bootstarted/sharp-loader","owner":"bootstarted","description":"webpack + sharp image processing.","archived":false,"fork":false,"pushed_at":"2021-05-05T00:24:38.000Z","size":413,"stargazers_count":46,"open_issues_count":8,"forks_count":6,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-07-01T06:48:41.203Z","etag":null,"topics":["bootstart","image-processing","metalab","sharp","webpack-loader"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bootstarted.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-13T01:55:20.000Z","updated_at":"2023-08-12T18:32:14.000Z","dependencies_parsed_at":"2022-09-06T22:21:29.682Z","dependency_job_id":null,"html_url":"https://github.com/bootstarted/sharp-loader","commit_stats":null,"previous_names":["izaakschroeder/sharp-loader"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/bootstarted/sharp-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Fsharp-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Fsharp-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Fsharp-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Fsharp-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bootstarted","download_url":"https://codeload.github.com/bootstarted/sharp-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bootstarted%2Fsharp-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266419439,"owners_count":23925767,"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","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["bootstart","image-processing","metalab","sharp","webpack-loader"],"created_at":"2025-05-23T20:13:36.305Z","updated_at":"2025-07-22T03:31:36.467Z","avatar_url":"https://github.com/bootstarted.png","language":"TypeScript","readme":"# sharp-loader\n\nUse [sharp] to automatically generate image assets with [webpack].\n\n![build status](http://img.shields.io/travis/metalabdesign/sharp-loader/master.svg?style=flat)\n![coverage](https://img.shields.io/codecov/c/github/metalabdesign/sharp-loader/master.svg?style=flat)\n![license](http://img.shields.io/npm/l/sharp-loader.svg?style=flat)\n![version](http://img.shields.io/npm/v/sharp-loader.svg?style=flat)\n![downloads](http://img.shields.io/npm/dm/sharp-loader.svg?style=flat)\n\n## Usage\n\nIMPORTANT: You need to have vips installed for [sharp] to work. The sharp npm module may attempt to do this for you, it may not.\n\n```sh\nnpm install --save sharp-loader sharp\n```\n\nNOTE: If your configuration generates a single image (that is no configuration properties are arrays) then the result will still be an array with a single image.\n\nSetup presets in your loader:\n\n```javascript\n{\n  module: {\n    loaders: [\n      {\n        test: /\\.(gif|jpe?g|png|svg|tiff)(\\?.*)?$/,\n        loader: 'sharp-loader',\n        query: {\n          name: '[name].[hash:8].[ext]',\n          cacheDirectory: true,\n          presets: {\n            // Preset 1\n            thumbnail: {\n              format: ['webp', 'jpeg'],\n              width: 200,\n              quality: 60,\n            },\n            // Preset 2\n            prefetch: {\n              // Format-specific options can be specified like this:\n              format: {id: 'jpeg', quality: 30},\n              mode: 'cover',\n              blur: 100,\n              inline: true,\n              size: 50,\n            },\n          },\n        },\n      },\n    ];\n  }\n}\n```\n\nUse without presets generating a single image:\n\n```javascript\nconst images = require('./aQHsOG6.jpg?{\"outputs\":[{\"width\": 500}]}');\nconsole.log(images[0].format); // 'image/jpeg'\nconsole.log(images[0].url); // url to image\n```\n\nUse single preset generating multiple images:\n\n```javascript\nconst images = require('./aQHsOG6.jpg?{\"outputs\":[\"thumbnail\"]}');\nconsole.log(images[0].url); // url to first image\nconsole.log(images[1].url); // url to second image\n```\n\nUse multiple presets generating multiple images:\n\n```javascript\nconst images = require('./aQHsOG6.jpg?{\"outputs\":[\"thumbnail\", \"prefetch\"]}');\nconsole.log(images);\n```\n\nModify the value in a preset:\n\n```javascript\nconst images = require('./aQHsOG6.jpg?{\"outputs\":[{\"preset\": \"thumbnail\", \"width\": 600}]}');\nconsole.log(images);\n```\n\n### Server-Side Rendering\n\nYou can disable emitting the image files with:\n\n```js\n{\n  emitFile: false\n}\n```\n\n### Complex Example\n\n```js\n{\n  presets: {\n    default: {\n      name: (meta) =\u003e {\n        // If a scaled image is given, include scale in output name\n        if (meta.scale) {\n          return '[name]@[scale]x.[hash:8].[ext]';\n        }\n        return '[name].[hash:8].[ext]';\n      },\n      format: (meta) =\u003e {\n        // If the image is transparent, convert to webp and png,\n        // otherwise just use jpg.\n        if (meta.hasAlpha) {\n          return ['webp', 'png'];\n        }\n        return ['webp', {format: 'jpeg', quality: 70}];\n      },\n      scale: (meta) =\u003e {\n        // If the image has no intrinsic scaling just ignore it.\n        if (!meta.scale) {\n          return undefined;\n        }\n        // Downscale and provide 1x, 2x, 3x, 4x.\n        return [1, 2, 3, 4].filter((x) =\u003e {\n          return x \u003c= meta.scale;\n        });\n      },\n    },\n    preview: {\n      name: '[name]-preview.[hash:8].[ext]',\n      format: (meta) =\u003e {\n        if (meta.hasAlpha) {\n          return 'png';\n        }\n        return {format: 'jpeg', quality: 40};\n      },\n      blur: 100,\n      inline: true,\n      scale: ({width, height}) =\u003e {\n        // Make a really tiny image.\n        return Math.min(50 / width, 50 / height);\n      },\n    },\n  },\n}\n```\n\n[sharp]: https://github.com/lovell/sharp\n[webpack]: https://github.com/webpack/webpack\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbootstarted%2Fsharp-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbootstarted%2Fsharp-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbootstarted%2Fsharp-loader/lists"}