{"id":20226601,"url":"https://github.com/shekhei/image-maxsize-webpack-loader","last_synced_at":"2025-08-09T05:16:25.388Z","repository":{"id":24799254,"uuid":"28213201","full_name":"shekhei/image-maxsize-webpack-loader","owner":"shekhei","description":"A simple webpack loader for resizing images","archived":false,"fork":false,"pushed_at":"2019-03-18T16:13:39.000Z","size":706,"stargazers_count":23,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T14:50:29.165Z","etag":null,"topics":["graphicsmagick","imagemagick","resize-images","webpack","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/shekhei.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":"2014-12-19T03:50:40.000Z","updated_at":"2021-06-19T16:28:03.000Z","dependencies_parsed_at":"2022-08-25T07:11:09.393Z","dependency_job_id":null,"html_url":"https://github.com/shekhei/image-maxsize-webpack-loader","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shekhei%2Fimage-maxsize-webpack-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shekhei%2Fimage-maxsize-webpack-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shekhei%2Fimage-maxsize-webpack-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shekhei%2Fimage-maxsize-webpack-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shekhei","download_url":"https://codeload.github.com/shekhei/image-maxsize-webpack-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248260739,"owners_count":21074215,"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":["graphicsmagick","imagemagick","resize-images","webpack","webpack-loader"],"created_at":"2024-11-14T07:19:12.459Z","updated_at":"2025-04-10T17:08:23.792Z","avatar_url":"https://github.com/shekhei.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**Note: Please upgrade to \u003e= v1.1.0, `extend` from v1.1.0 is removed due to vulnerability problems.\n\n[![Build Status](https://travis-ci.org/shekhei/image-maxsize-webpack-loader.svg?branch=master)](https://travis-ci.org/shekhei/image-maxsize-webpack-loader)\n[![npm version](https://badge.fury.io/js/image-maxsize-webpack-loader.svg)](https://www.npmjs.com/package/image-maxsize-webpack-loader)\n\n# Webpack module for max size (width/height)\nThis loader will resize images to fit maximum width / height dimensions while retaining their aspect ratio.\n\n## Changelog\n* v0.1.0 - Merged code from @danielberndt that added ImageMagick support and various code cleanup\n* v0.2.0 - Merged code from @chromakode allowing default parameters\n* v1.0.0 - Upgrade to webpack \u003e= 2 \u003c 4 and adding tests\n* v1.1.0 - Modified and added tests for webpack4, removed \"extend\", modified to use Object.assign\n\n\n\n## Basic Usage\n\n## Version 1 and above(with webpack \u003e= 2)\n```\nnpm install image-maxsize-webpack-loader gm\n```\n\nIn your webpack config file:\n\n```js\n// Example webpack.config.js. I recommend using the url and image loaders.\nmodule.exports = {\n    module: {\n        rules: [\n            // The max-width and max-height parameters here are optional. They set the default max dimensions for all images using this loader.\n            { \n                test: /\\.(png|svg|jpe?g)(\\?.*)?$/,\n                loaders: [\n                    {\n                        loader: \"url-loader\",\n                        options: {\n                            limit: 800\n                        }\n                    },\n                    \"image-loader\",\n                    {\n                        loader: \"image-maxsize-webpack-loader\",\n                        options: {\n                            \"max-width\": 800,    // sets max-width for gm/imagemagick scaling, in pixels\n                            \"max-height\": 600,   // sets max-height for gm/imagemagick scaling, in pixels\n                            \"useImageMagick\": false // defaults to false, this controls the usage of imagemagick or graphicsmagick, when false, graphicsmagick is used\n                        }\n                    }\n                ]\n            }\n        ]\n    }\n};\n```\n\nIn addition to the default values, you can also set ***max-width*** and ***max-height*** inline\n\n```css\n\n@media screen and (max-width: 800px) {\n    #abc {\n        background: url('./abc.jpg?max-width=800\u0026max-height=600');\n    }\n}\n@media screen and (max-width: 480px) {\n    #abc {\n        background: url('./abc.jpg?max-width=480');\n        /* The max-width and max-height parameters are both optional, if not provided the current height/width of the image will be used. */\n    }\n}\n/* The above will shrink the file to fit into a 800x600 file, while retaining its aspect ratio. */\n```\n\n\n## Before version 1\n```\nnpm install image-maxsize-webpack-loader\n```\n\nIn your webpack config file:\n\n```js\n// Example webpack.config.js. I recommend using the url and image loaders.\nmodule.exports = {\n    module: {\n        loaders: [\n            // The max-width and max-height parameters here are optional. They set the default max dimensions for all images using this loader.\n            { test: /\\.(png|svg|jpe?g)(\\?.*)?$/, loader: \"url?limit=800!image!image-maxsize?max-width=800\u0026max-height=600\"}\n        ]\n    }\n};\n```\n\nYou can specify the maximum size for individual images using the `max-width` and `max-height` query parameters:\n\n```css\n@media screen and (max-width: 800px) {\n    #abc {\n        background: url('./abc.jpg?max-width=800\u0026max-height=600');\n    }\n}\n@media screen and (max-width: 480px) {\n    #abc {\n        background: url('./abc.jpg?max-width=480');\n        /* The max-width and max-height parameters are both optional, if not provided the current height/width of the image will be used. */\n    }\n}\n/* The above will shrink the file to fit into a 800x600 file, while retaining its aspect ratio. */\n```\n\n## Requirements\nGraphicsMagick _or_ ImageMagick\n\nIf you prefer to use ImageMagick add `?useImageMagick=true` to the loader.\n\n### Windows Users\n\nI truly recommend installing chocolatey, then you can just run:\n\n```\nchoco install graphicsmagick\n```\n\nCredits\n-------\nI would have to say, thanks to people who wrote the gm bindings, that made it much easier!\nThanks @danielberndt for cleaning up the code and adding the imagemagick options!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshekhei%2Fimage-maxsize-webpack-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshekhei%2Fimage-maxsize-webpack-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshekhei%2Fimage-maxsize-webpack-loader/lists"}