Responsive Images Autogen

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

Quick steps

npm i -D responsive-images-autogen

add it as a script to your package.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:

cd my-project
npm run reponsive-images-autogen

Done, you should be seeing the resized images!

Installation

Install it as a dev dependency:

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.

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:

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:

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:

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