https://github.com/corneliusio/tinify-loader
📦 Webpack loader to optimize images with TinyPNG/TinyJPG.
https://github.com/corneliusio/tinify-loader
cache compression loader optimizer tinyjpg tinypng webpack
Last synced: 17 days ago
JSON representation
📦 Webpack loader to optimize images with TinyPNG/TinyJPG.
- Host: GitHub
- URL: https://github.com/corneliusio/tinify-loader
- Owner: corneliusio
- License: mit
- Created: 2018-03-07T21:10:35.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-04-18T22:29:23.000Z (about 3 years ago)
- Last Synced: 2025-03-28T19:53:52.670Z (about 1 month ago)
- Topics: cache, compression, loader, optimizer, tinyjpg, tinypng, webpack
- Language: JavaScript
- Homepage:
- Size: 93.8 KB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tinify Loader
[](http://npmjs.com/package/tinify-loader)
> 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.
TinyPNG 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!
TinyPNG/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.
Tinify 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.
---
#### Important:
This loader **only** handles optimization of your images.
You 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).
---
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Options](#options)
## Install
```
npm install tinify-loader --save-dev
```
## Setup
##### Get API Key
You can sign up for a developer account **for free** at [tinypng.com/developers](https://tinypng.com/developers).
(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!)
Once 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).
## Usage
##### webpack.config.js
```js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g)$/,
use: [
{
loader: 'tinify-loader',
options: {
apikey: TINYPNG_KEY
}
}
]
}
]
}
};
```
## Options
|Name|Type|Default|Description|
|:---|:---|:------|:----------|
|**`apikey`**|`{String}`|`undefined`|Developer API key from [TinyPNG](https://tinypng.com/developers)/[TinyJPG](https://tinyjpg.com/developers)|
|**`cache`**|`{String}`|`path.resolve('.cache/tinify')`|Path to directory where processed images will be cached.|
#### `options.apikey`
This is where you can directly provide your API key found on your TinyPNG/TinyJPG [dashboard](https://tinypng.com/dashboard/developers).
However, 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`.
```
TINYPNG_KEY=l4P-GCBT8K3uJRmkUtd3K5WUcdVma3Cp webpack
```
Note: This is not a working API key.
You 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).
#### `options.cache`
An 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')`.