{"id":20620472,"url":"https://github.com/corneliusio/tinify-loader","last_synced_at":"2025-04-15T12:14:17.363Z","repository":{"id":69651343,"uuid":"124294897","full_name":"corneliusio/tinify-loader","owner":"corneliusio","description":"📦 Webpack loader to optimize images with TinyPNG/TinyJPG.","archived":false,"fork":false,"pushed_at":"2022-04-18T22:29:23.000Z","size":96,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-28T19:53:52.670Z","etag":null,"topics":["cache","compression","loader","optimizer","tinyjpg","tinypng","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/corneliusio.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-07T21:10:35.000Z","updated_at":"2022-08-18T10:32:35.000Z","dependencies_parsed_at":"2023-04-05T09:56:31.761Z","dependency_job_id":null,"html_url":"https://github.com/corneliusio/tinify-loader","commit_stats":{"total_commits":24,"total_committers":2,"mean_commits":12.0,"dds":0.08333333333333337,"last_synced_commit":"1cded6ca1768fd324412ad8bd4c48b50b7b6b311"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corneliusio%2Ftinify-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corneliusio%2Ftinify-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corneliusio%2Ftinify-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corneliusio%2Ftinify-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corneliusio","download_url":"https://codeload.github.com/corneliusio/tinify-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590119,"owners_count":21129753,"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":["cache","compression","loader","optimizer","tinyjpg","tinypng","webpack"],"created_at":"2024-11-16T12:14:30.984Z","updated_at":"2025-04-15T12:14:17.349Z","avatar_url":"https://github.com/corneliusio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tinify Loader\n\n[![NPM Version](https://img.shields.io/npm/v/tinify-loader.svg?style=flat-square)](http://npmjs.com/package/tinify-loader)\n\n\u003e Optimizes your images with [TinyPNG](https://tinypng.com)/[TinyJPG](https://tinyjpg.com) and persistently caches the results to avoid eating up your API rate limit.\n\nTinyPNG uses smart lossy compression techniques to **reduce the file size** of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size! Similarly, TinyJPG reduces the file size of your JPEG images. Every uploaded image is **analyzed** to apply the best possible JPEG encoding. Based on the **content of your image** an optimal strategy is chosen. The result is a quality image without wasting storage or bandwidth!\n\nTinyPNG/TinyJPG provides **500 free** compressions each month. If you reach your compression limit the API, you must upgrade your account by entering your payment details on the [API account](https://tinyjpg.com/developers) page.\n\nTinify Loader caches the results of your requests so you won't have to worry about hitting your free compression limit unless you work with a particularly large number of images.\n\n---\n\n#### Important:\n\nThis loader **only** handles optimization of your images.  \nYou still need a loader to handle images in your webpack bundle such as [url-loader](https://github.com/webpack/url-loader) or [file-loader](https://github.com/webpack/file-loader).\n\n---\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [Options](#options)\n\n## Install\n\n```\nnpm install tinify-loader --save-dev\n```\n\n## Setup\n\n##### Get API Key\n\nYou can sign up for a developer account **for free** at [tinypng.com/developers](https://tinypng.com/developers).\n\n![TinyPNG Sign Up](media/signup.png?raw=true)\n\n\u003csup\u003e(Fun fact: This screenshot was compressed with TinyPNG. Reducing its size from 213.2 KB to just 58.2 KB—that's a **73%** size reduction!)\u003c/sup\u003e\n\nOnce you have setup your account, you'll be sent a link to login and view your API key and usage data on your [dashboard](https://tinypng.com/dashboard/developers).\n\n## Usage\n\n##### webpack.config.js\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(png|jpe?g)$/,\n        use: [\n          {\n            loader: 'tinify-loader',\n            options: {\n              apikey: TINYPNG_KEY\n            }\n          }\n        ]\n      }\n    ]\n  }\n};\n```\n\n## Options\n\n|Name|Type|Default|Description|\n|:---|:---|:------|:----------|\n|**`apikey`**|`{String}`|`undefined`|Developer API key from [TinyPNG](https://tinypng.com/developers)/[TinyJPG](https://tinyjpg.com/developers)|\n|**`cache`**|`{String}`|`path.resolve('.cache/tinify')`|Path to directory where processed images will be cached.|\n\n#### `options.apikey`\nThis is where you can directly provide your API key found on your TinyPNG/TinyJPG [dashboard](https://tinypng.com/dashboard/developers).\n\nHowever, there are options for not storing your API key directly in your `webpack.config.js`. If this option is not provided, Tinify Loader will check for an environmental variable `process.env.TINYPNG_KEY`.\n\n```\nTINYPNG_KEY=l4P-GCBT8K3uJRmkUtd3K5WUcdVma3Cp webpack\n```\n\u003csup\u003eNote: This is not a working API key.\u003c/sup\u003e\n\nYou also have the option of placing your API key in file located at `~/.tinypng`. This can be the simplest solution for working with the Tinify Loader in multiple projects and also allows for easy interoperability with [tinypng-cli](https://www.npmjs.com/package/tinypng-cli).\n\n#### `options.cache`\n\nAn absolute path to where you would like your cache files to be stored. If no value is provided, the default is `path.resolve('.cache/tinify')`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorneliusio%2Ftinify-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorneliusio%2Ftinify-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorneliusio%2Ftinify-loader/lists"}