{"id":13515423,"url":"https://github.com/brokenmass/advanced-image-loader","last_synced_at":"2025-03-31T04:37:02.154Z","repository":{"id":57173760,"uuid":"86688472","full_name":"brokenmass/advanced-image-loader","owner":"brokenmass","description":"Advanced webpack2 image loader with support for image resizing, srcset and inlined placeholder. And it's blazing fast","archived":false,"fork":false,"pushed_at":"2018-12-24T16:10:12.000Z","size":74,"stargazers_count":16,"open_issues_count":18,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-01T19:36:25.452Z","etag":null,"topics":["image","image-loader","resize","resize-images","srcset","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/brokenmass.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":"2017-03-30T10:08:38.000Z","updated_at":"2023-07-06T16:54:28.000Z","dependencies_parsed_at":"2022-08-24T13:31:06.410Z","dependency_job_id":null,"html_url":"https://github.com/brokenmass/advanced-image-loader","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brokenmass%2Fadvanced-image-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brokenmass%2Fadvanced-image-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brokenmass%2Fadvanced-image-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brokenmass%2Fadvanced-image-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brokenmass","download_url":"https://codeload.github.com/brokenmass/advanced-image-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246418657,"owners_count":20773934,"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":["image","image-loader","resize","resize-images","srcset","webpack-loader"],"created_at":"2024-08-01T05:01:11.138Z","updated_at":"2025-03-31T04:37:01.325Z","avatar_url":"https://github.com/brokenmass.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# advanced-image-loader\n\n[![npm version](https://badge.fury.io/js/advanced-image-loader.svg)](https://badge.fury.io/js/advanced-image-loader)\n[![Build Status](https://travis-ci.org/brokenmass/advanced-image-loader.svg?branch=master)](https://travis-ci.org/brokenmass/advanced-image-loader)\n[![codecov](https://codecov.io/gh/brokenmass/advanced-image-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/brokenmass/advanced-image-loader)\n\nAdvanced webpack2 image loader with support for image resizing, srcset and inlined placeholder.\nThanks to [sharp](https://github.com/lovell/sharp) it's blazing fast (see [benchmars](docs/benchmarks.md))!\n\n## Install\n\n```\nnpm install advanced-image-loader --save-dev\n```\n\n## Usage\n\nRequire in your javascript\n```js\nimport image from `advanced-image-loader!image.jpg?width=400\n  \u0026quality=90\n  \u0026placeholder=32\n  \u0026srcset[]=200\u0026srcset[]=400\u0026srcset[]=800`;\n\n// generates images\n// test-200@90.jpg\n// test-400@90.jpg\n// test-800@90.jpg\n// and image object is\n{\n  \"src\": \"test-400@90\",\n  \"width\": 400,\n  \"height\": 225,\n  \"srcset\": \"test-200@90 200w, test-400@90 400w, test-800@90 800w\",\n  \"placeholder\": {\n    \"src\": \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAASCAYAAAA6yNxSAAAACXBIWXMAAAsSAAALEgHS3X78AAAAh0lEQVRIie3SMQpDIRBF0euoA4L7X5W70WJANClCQlKa/GDjK0fxHRhDKeXGxsjO8gM4gAMACCuXW2uEEJhz4r3HzFDV17mI4Jz7mF0KAKi1AuCcY4yBqmJmmBnee1T1f4CcMzlnAOaciDw2mFICoPdOjHHlye//wLP8PavlPwGuygEcwHbAHUfTHurTFT+dAAAAAElFTkSuQmCC\",\n    \"width\": 32,\n    \"height\": 18\n  },\n  \"images\": [\n    {\n      \"src\": \"test-200@90\",\n      \"width\": 200,\n      \"height\": 113\n    },\n    {\n      \"src\": \"test-400@90\",\n      \"width\": 400,\n      \"height\": 225\n    },\n    {\n      \"src\": \"test-800@90\",\n      \"width\": 800,\n      \"height\": 450\n    }\n  ]\n};\n\n// image object toString return the main image src\nimage.toString() === \"test-400@90\"\n\n```\n\nor css\n```css\n.image {\n  background: url('advanced-image-loader!image.jpg');\n}\n.imageLQ {\n  background: url('advanced-image-loader!image.jpg?quality=30');\n}\n\n@media (max-width: 480px) {\n  .image {\n    background: url('advanced-image-loader!image.jpg?width=480');\n  }\n}\n```\n\n\n## Configuration\n\nAll the parameter can be set as webpack rule option or defined on a per resource base using resourceQuery parameters.\nIn case a configuration parameter is defined in both location the resourceQuery has higher priority.\n\n- `width: integer or 'original'`: define the output width of the 'main' image `default: 'original'`\n- `srcset: array of 'widths' (integer or 'original')`: if specified define the width of all the images in the srcset\n- `format: string`: define the output format of the images (valid values are `jpeg`, `png`, `tiff`, `webp`) `default: 'jpeg'`\n- `quality: integer`: define the compression quality (ignored if format is `png`) `default: '95'`\n- `progressive: boolean`: define if the generated image should be progressive (ignored if format is `webp` or `tiff`) `default: false`\n- `placeholder: integer`: if specified define the width of the image used as placeholder and inlined as data URI\n- `name: function or string`: define the naming of the output files `default: '[name]-[width]@[quality]'`\n  - if a string is provided it will be interpolated and the following values will be replaced\n    * `[width]` the width of the output image\n    * `[quality]` the configured quality\n    * `[ext]` the extension of the resource\n    * `[name]` the basename of the resource\n    * `[path]` the path of the resource relative to the `context` query parameter or option.\n    * `[folder]` the folder of the resource is in.\n    * `[emoji]` a random emoji representation of the image\n    * `[emoji:\u003clength\u003e]` same as above, but with a customizable number of emojis\n    * `[hash]` the hash of the image\n    * `[\u003chashType\u003e:hash:\u003cdigestType\u003e:\u003clength\u003e]` optionally one can configure\n      * other `hashType`s, i. e. `sha1`, `md5`, `sha256`, `sha512`\n      * other `digestType`s, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`\n      * and `length` the length in chars\n  - if a function is provided it will be called with a single object parameter structured as:\n  ```json\n  {\n    \"buffer\": \u003cimage data buffer?\n    \"info\": {\n      \"format\": string \u003cformat of the output image\u003e,\n      \"width\": integer \u003cwidth of the output image\u003e,\n      \"height\": integer \u003cheight of the output image\u003e,\n      \"channels\": integer \u003cnumber of collor channels of the output image\u003e,\n      \"size\": integer \u003cfilesize of the output image\u003e\n    },\n    \"options\": object \u003cthe configuration option\u003e,\n    \"resourcePath\": string \u003cabsolute path of the input image\u003e\n  }\n  ```\n\n## Examples\n\n** webpack.config.js options **\n```js\nmodule.exports = {\n  entry: {...},\n  output: {...},\n  module: {\n    rules: [\n      {\n        test: /\\.(jpg)$/i,\n        loader: 'advanced-image-loader',\n        options: {\n          width: 1280,\n          srcset: [320, 640, 960, 1280, 1920],\n          quality: 90,\n          placeholder: 32\n        }\n      }\n    ]\n  }\n}\n```\n\n** resourceQuery overrides **\nsee [here](https://github.com/webpack/loader-utils#parsequery) for more information about resourceQuery syntax\n\n```js\n// only webpack rule options apply.\nimport image from './image.jpg';\n\n// override previous configuration lowering output quality and disabling srcset and placeholder. only the main image, 1280px wide and 25% quality will be returned\nimport imageLQ from './image.jpg?quality=25\u0026-srcset\u0026-placeholder';\n\n// generate additional image 2048px wide\nimport imageHighRes from './image.jpg?width=2048\u0026-srcset\u0026-placeholder';\n```\n\n\n## Based and inspired by:\n\n- [responsive-loader](https://github.com/herrstucki/responsive-loader)\n- [resize-image-loader](https://github.com/puppybits/resize-image-loader)\n- [file-loader](https://github.com/webpack-contrib/file-loader)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrokenmass%2Fadvanced-image-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrokenmass%2Fadvanced-image-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrokenmass%2Fadvanced-image-loader/lists"}