# responsive-images-autogen

> Parse project, generate responsive images, save in server, and serve size

Latest version **1.1.3** (published 2021-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install responsive-images-autogen
pnpm add responsive-images-autogen
yarn add responsive-images-autogen
bun add responsive-images-autogen
```

Provides the command `responsive-images-autogen`.

## 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.1.3 |
| Published | 2021-07-19 |
| First published | 2021-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 133.6 KB |
| Known vulnerabilities | 0 (+18 in 2 direct dependencies) |
| Install scripts | no |
| Author | Guillermo Pages |
| Maintainers | guillermo_at |
| Keywords | responsive, image, size, resize |

## Links

- npm: https://www.npmjs.com/package/responsive-images-autogen
- npm.io page: https://npm.io/package/responsive-images-autogen

## Dependencies (5)

- [next](https://npm.io/package/next.md) 10.2.3
- [ramda](https://npm.io/package/ramda.md) 0.27.1
- [sharp](https://npm.io/package/sharp.md) 0.28.3
- [dotenv](https://npm.io/package/dotenv.md) 8.2.0
- [recursive-readdir](https://npm.io/package/recursive-readdir.md) 2.2.2

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2021-07-19
- 1.1.2 — 2021-07-19
- 1.1.1 — 2021-07-18
- 1.1.0 — 2021-07-18
- 1.0.11 — 2021-01-28
- 1.0.10 — 2021-01-28
- 1.0.9 — 2021-01-28
- 1.0.8 — 2021-01-28
- 1.0.7 — 2021-01-28
- 1.0.6 — 2021-01-28
- 1.0.5 — 2021-01-28
- 1.0.4 — 2021-01-28
- 1.0.3 — 2021-01-27
- 1.0.2 — 2021-01-27
- 1.0.1 — 2021-01-26
- … 1 more at https://npm.io/package/responsive-images-autogen/versions

## README

# Responsive Images Autogen

Get your standard images, resized to the `WIDTHxHEIGHT` (optimized for your responsive application) in one call.

## Quick steps

```sh
npm i -D responsive-images-autogen
```

add it as a script to your `package.json`:

```json
//...
"scripts": {
  //...
  "responsive-images-autogen" : "responsive-images-autogen"
  //...
}
//...
```

add some `WxH.jpg` calls in your code, and generate the images by running following command in your project's root dir:

```sh
cd my-project
npm run reponsive-images-autogen
```

Done, you should be seeing the resized images!

## Installation

Install it as a _dev_ dependency:

```sh
npm i -D responsive-images-autogen
```

## Why use this

When your responsive website is displayed on different client sizes, it makes no sense to send your images in full resolution (if they are going to be displayed at lower resolutions).

The goal is to save some bandwidth and speed the first contentful paint up. For more info [read Google Developers](https://developers.google.com/web/fundamentals/design-and-ux/responsive/images).

## What it does

Runs a script in the development environement that will parse your image URI's and create specific size versions of the original image.
Any _sized_ image URI mention (**on any filetype**) will be sniffed by the script and will be saved to a resized version in your `/public` directory under `./public/original/image/path/image-name/`.

Once the script has executed, all your resized image URI mentions will be accessible to any client rendering your website.

## How it's done

### `WIDTHxHEIGHT` pattern URIs

Let's say your original image is accessible under: `/images/my-path/my-image-name.gif`.

Using the `WIDTHxHEIGHT` pattern you should insert mentions of your resized images in your _HTML_/_JSX_/_CSS_ like so: `<img src="/images/my-path/my-image-name/899x500.gif">` for that image to be displayed at a width of `899` and a height of `500` pixels.

**NOTE**: without this script - to be able to serve the image at that specific size, you would need to use some utility to resize your image, name it `899x500.gif` and save it under the publicly accessible directory: `/images/my-path/my-image-name/`. But don't worry, this script will automatically do that for you.

**IMPORTANT**: the script will generate the images and save them with names according to the `WIDTHxHEIGHT` pattern. But **you are in charge** of using that pattern throughout your HTML / JSX / CSS in order to call the proper image. **For example**: in your HTML use `<img src="/images/my-path/my-image-name/899x500.gif">` to get the image `my-image-name.gif` sized at a `899x500` pixels. Simply using `<img src="/images/my-path/my-image-name.gif">` will call the original one. _The script will not decide the sizes magically for you_, it is your task to figure those out and use the `WIDTHxHEIGHT` pattern in your code.

### Prerequisites

You have the full resolution images on your project's "`/public`" directory (the folder's name does not matter, what is important is that they are accessible from the web).

Then you will sprinkle your code with `<img src"/images/my-path/my-image-file-name/800x600.png">` or `url('/image/some-else/hey/256x100.jpg')` etc.

Let's break down the image references above:

- `/images/my-path` is a subdirectory of `/public`: aka a web accessible URI
- `my-image-file-name` is the image's name without the suffix (i.e. without `.png`)
- The other important bit here is the `800x600.png`:

  - `800x600` is the desired final `WIDTH` `x` `HEIGHT` pixels of the image when displayed in the browser.
  - `.png` is the image suffix (remember, the original image was `./public/images/my-path/my-image-file-name.png`)

### Usage: Running the script

Make sure to have read the _Prerequisites_ and also to have a the following `.env` variables set up:

```env
PUB_DIR_ABS_PATH=/home/john/Documents/workspace/my-app/public
SRC_IMAGES_BASE_PATH=/img
RIA_IGNORE=.git,node_modules,build
```

Where `PUB_DIR_ABS_PATH` is the publicly accessible directory where you usually store all your `css`, `js`, `img` etc. in subdirectories.
`SRC_IMAGES_BASE_PATH` this is what the script uses to match all image mentions in `<img src="/img/my-image/900x200.jpg">` or `url("/img/somepath/other-image/200x200.gif")`

Once you are set up run the command version:

```sh
cd my-project-dir
npm run responsive-images-autogen
```

Wait for the script to work its magic and voila!

### Troubleshooting

If for some reason the command is not working for you, you should add it to your `package.json` as a script:

```json
//...
"scripts": {
  "responsive-images-autogen" : "responsive-images-autogen"
}
//...
```

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