{"id":15657400,"url":"https://github.com/cyrilwanner/optimized-images-loader","last_synced_at":"2025-09-01T00:49:05.661Z","repository":{"id":39607552,"uuid":"266148021","full_name":"cyrilwanner/optimized-images-loader","owner":"cyrilwanner","description":"Webpack loader to automatically optimize imported images.","archived":false,"fork":false,"pushed_at":"2023-01-06T12:16:31.000Z","size":5470,"stargazers_count":23,"open_issues_count":37,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-08T19:55:33.007Z","etag":null,"topics":["image","loader","optimization","webpack"],"latest_commit_sha":null,"homepage":"","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/cyrilwanner.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}},"created_at":"2020-05-22T15:45:29.000Z","updated_at":"2024-03-25T14:42:38.000Z","dependencies_parsed_at":"2023-02-06T01:31:18.843Z","dependency_job_id":null,"html_url":"https://github.com/cyrilwanner/optimized-images-loader","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/cyrilwanner/optimized-images-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrilwanner%2Foptimized-images-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrilwanner%2Foptimized-images-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrilwanner%2Foptimized-images-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrilwanner%2Foptimized-images-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cyrilwanner","download_url":"https://codeload.github.com/cyrilwanner/optimized-images-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrilwanner%2Foptimized-images-loader/sbom","scorecard":{"id":314721,"data":{"date":"2025-08-11","repo":{"name":"github.com/cyrilwanner/optimized-images-loader","commit":"ec3a13915e2a5787359bc7636b14a3e88aa30d81"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.1,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/24 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":5,"reason":"dependency not pinned by hash detected -- score normalized to 5","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stats.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/cyrilwanner/optimized-images-loader/stats.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/stats.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/cyrilwanner/optimized-images-loader/stats.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/cyrilwanner/optimized-images-loader/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/cyrilwanner/optimized-images-loader/test.yml/master?enable=pin","Info:   0 out of   3 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned","Info:   2 out of   2 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/stats.yml:1","Warn: no topLevel permission defined: .github/workflows/test.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"55 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5","Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3","Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T23:56:55.465Z","repository_id":39607552,"created_at":"2025-08-17T23:56:55.465Z","updated_at":"2025-08-17T23:56:55.465Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272773340,"owners_count":24990526,"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-08-29T02:00:10.610Z","response_time":87,"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":["image","loader","optimization","webpack"],"created_at":"2024-10-03T13:06:43.003Z","updated_at":"2025-09-01T00:49:05.594Z","avatar_url":"https://github.com/cyrilwanner.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# optimized-images-loader [![npm version](https://badgen.net/npm/v/optimized-images-loader)](https://www.npmjs.com/package/optimized-images-loader) [![license](https://badgen.net/github/license/cyrilwanner/optimized-images-loader)](https://github.com/cyrilwanner/optimized-images-loader/blob/master/LICENSE) [![downloads](https://badgen.net/npm/dt/optimized-images-loader)](https://www.npmjs.com/package/optimized-images-loader)\n\nFeatures:\n- **Optimize** images using WebAssembly (runs in every environment)\n- **Image manipulation** provided by various query params (resize, converting, low quality placeholders, ...)\n- **Build cache for images** for faster builds\n- **Convert to WebP** automatically during a webpack build\n- **Inline** small images automatically\n- ...\n\n## Table of contents\n\n- [Installation](#installation)\n- [Options](#options)\n- [Usage](#usage)\n- [License](#license)\n\n## Installation\n\n```\nnpm install optimized-images-loader\n```\n\nAdd the loader to your webpack configuration:\n\n```javascript\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g|gif|svg|webp)$/i,\n        use: [\n          {\n            loader: 'optimized-images-loader',\n            options: {\n              // see below for available options\n            },\n          },\n        ],\n      },\n    ],\n  },\n};\n```\n\n## Options\n\n| Option | Default | Type | Description |\n| :--- | :------: | :--: | :---------- |\n| limit | `8192` | `number` | Images smaller than this number (in bytes) will get inlined with a data-uri. |\n| optimize | `true` | `boolean` | If this plugin should not optimized images, set this to `false`. You can still resize images, convert them to WebP and use other features in that case. |\n| cacheFolder | `'node_modules/optimized-images-loader/.cache'` | `string` | Images will be cached in this folder to avoid long build times. |\n| includeStrategy | `string` | `'string'` | When using the [?include](#include) query param, it returns a string by default. By setting this value to `'react'`, it returns a React component instead (requires manually installing the additional `@svgr/core` package). |\n| name | `'[name]-[contenthash].[ext]'` | `string` | File name of the images after they got processed. Additionally to the [default placeholders](https://github.com/webpack-contrib/file-loader#placeholders), `[width]` and `[height]` are also available. |\n| outputPath | | `string` | Images will be saved in this directory instead of the default webpack outputPath. |\n| publicPath | | `string` | The public path that should be used for image URLs instead of the default webpack publicPath. |\n| mozjpeg | | `MozjpegOptions` | Specifies the options used to optimize jpeg images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/mozjpeg#encodeoptions-encodeoptions). |\n| oxipng | | `OxipngOptions` | Specifies the options used to optimize png images. All available options can be seen [here](https://www.npmjs.com/package/@wasm-codecs/oxipng#encodeoptions-encodeoptions). |\n| webp | | `WebpOptions` | Specifies the options used to optimize webp images. All available options can be seen [here](https://sharp.pixelplumbing.com/api-output#webp). |\n| svgo | | `SvgoOptions` | Specifies the options used to optimize svg images. All available options can be seen [here](https://github.com/svg/svgo#what-it-can-do). |\n\n## Usage\n\nYou can now simply import images in your projects the same way as you would import source code.\n\n```javascript\nimport Header from './images/header.jpg';\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cimg src={Header} /\u003e\n  \u003c/div\u003e\n);\n```\n\nThis loader also provides a variety of query params to provide you even more options:\n\n* [`?include`](#include): Include the raw file directly (useful for SVG icons)\n* [`?webp`](#webp): Convert an image to WebP on the fly\n* [`?inline`](#inline): Force inlining an image (data-uri)\n* [`?url`](#url): Force an URL for a small image (instead of data-uri)\n* [`?original`](#original): Use the original image and do not optimize it\n* [`?lqip`](#lqip): Generate a low quality image placeholder\n* [`?colors`](#colors): Extract the dominant colors of an image\n* [`?width`](#width): Resize an image to the given width\n* [`?height`](#height): Resize an image to the given height\n* [`?trace`](#trace): Use traced outlines as loading placeholder *(currently not supported)*\n* [`?sprite`](#sprite): Use SVG sprites *(currently not supported)*\n\n#### ?include\n\nThe image will now directly be included in your HTML without a data-uri or a reference to your file.\n\nBy default, it will be included as a normal `string`. If you are in a React project and wish to transform it into a React component, set the [`includeStrategy`](#options) to `'react'` and run `npm install @svgr/core`.\n\n#### ?webp\n\nIf this `?webp` query parameter is specified, `optimized-images-loader` automatically converts the image to the new WebP format.\n\nFor browsers that don't yet support WebP, you may want to also provide a fallback using the `\u003cpicture\u003e` tag or use the [`Img`](#img) component which does this out of the box:\n\n#### ?inline\n\nYou can specify a [limit for inlining](#inlineimagelimit) images which will include it as a data-uri directly in your content instead of referencing a file if the file size is below that limit.\n\nYou usually don't want to specify a too high limit but there may be cases where you still want to inline larger images.\n\nIn this case, you don't have to set the global limit to a higher value but you can add an exception for a single image using the `?inline` query options.\n\n#### ?url\n\nWhen you have an image smaller than your defined [limit for inlining](#inlineimagelimit), it normally gets inlined automatically.\nIf you don't want a specific small file to get inlined, you can use the `?url` query param to always get back an image URL, regardless of the inline limit.\n\n#### ?original\n\nThe image won't get optimized and used as it is.\nIt makes sense to use this query param if you know an image already got optimized (e.g. during export) so it doesn't get optimized again a second time.\n\n#### ?lqip\n\nWhen using this resource query, a very small (about 10x10 pixel) image gets created.\nYou can then display this image as a placeholder until the real (big) image has loaded.\n\n#### ?colors\n\nThis resource query returns you an **array with hex values** of the dominant colors of an image.\nYou can also use this as a placeholder until the real image has loaded (e.g. as a background) like the *Google Picture Search* does.\n\nThe number of colors returned can vary and depends on how many different colors your image has.\n\n```javascript\nimport React from 'react';\n\nexport default () =\u003e (\n  \u003cdiv style={{ backgroundColor: require('./images/my-image.jpg?colors')[0] }}\u003e...\u003c/div\u003e\n);\n\n/**\n * require('./images/my-image.jpg?colors')\n *\n * returns for example\n *\n * ['#0e648d', '#5f94b5', '#a7bbcb', '#223240', '#a4c3dc', '#1b6c9c']\n */\n```\n\n#### ?trace\n\n\u003e Currently not supported\n\nWith the `?trace` resource query, you can generate [SVG image outlines](https://twitter.com/mikaelainalem/status/918213244954861569) which can be used as a placeholder while loading the original image.\n\n#### ?width\n\nResizes the source image to the given width. If a height is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no height is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?width=800';\nimport Thumbnail from './images/my-image.jpg?width=300\u0026height=300';\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cimg src={Image} /\u003e\n    \u003cimg src={Thumbnail} /\u003e\n  \u003c/div\u003e\n);\n```\n\n#### ?height\n\nResizes the source image to the given height. If a width is additionally specified, it ensures the image covers both sizes and crops the remaining parts. If no width is specified, it will be automatically calculated to preserve the image aspect ratio.\n\n```javascript\nimport React from 'react';\nimport Image from './images/my-image.jpg?height=800';\nimport Thumbnail from './images/my-image.jpg?width=300\u0026height=300';\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cimg src={Image} /\u003e\n    \u003cimg src={Thumbnail} /\u003e\n  \u003c/div\u003e\n);\n```\n\n#### ?sprite\n\n\u003e Currently not supported\n\nTODO: needs general documentation\n\n## License\n\nLicensed under the [MIT](https://github.com/cyrilwanner/optimized-images-loader/blob/master/LICENSE) license.\n\n© Copyright Cyril Wanner\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyrilwanner%2Foptimized-images-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyrilwanner%2Foptimized-images-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyrilwanner%2Foptimized-images-loader/lists"}