# webpack-tinypng-loader

> Optimizes your images with TinyPNG/TinyJPG and persistently caches the results to avoid eating up your API rate limit.

Latest version **1.0.1** (published 2020-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-tinypng-loader
pnpm add webpack-tinypng-loader
yarn add webpack-tinypng-loader
bun add webpack-tinypng-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-01-13 |
| First published | 2020-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 1 |
| Unpacked size | 63.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | 403353504@qq.com |
| Maintainers | fulme |
| Keywords | webpack, loader, optimize, compress, image, tinypng, tinyjpg, tinify, cache |

## Links

- npm: https://www.npmjs.com/package/webpack-tinypng-loader
- Repository: https://github.com/fulme/webpack-tinypng-loader
- Homepage: https://github.com/fulme/webpack-tinypng-loader#readme
- Issues: https://github.com/fulme/webpack-tinypng-loader/issues
- npm.io page: https://npm.io/package/webpack-tinypng-loader

## Dependencies (1)

- [tinify](https://npm.io/package/tinify.md) ^1.5.0

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2020-01-13
- 1.0.0 — 2020-01-13

## README

# Webpack tinypng 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 webpack-tinypng-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).

![TinyPNG Sign Up](media/signup.png?raw=true)

<sup>(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!)</sup>

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
```
<sup>Note: This is not a working API key.</sup>

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')`.

## References
[Tinify Loader](https://github.com/corneliusio/tinify-loader)

---
_Source: https://npm.io/package/webpack-tinypng-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._