PhotoScaler

PhotoScaler is node.js library based on sharp to automate scaliing and transforming images for better site responsivnes. Easily scale-down images to many other formats and provide fallback formats for older browser. Package can offer also exporting map of image paths to it's dimensions and other info to provide easier calculating image width and height.

First steps

Install photo-scaler

npm install photo-scaler

Now we have to create our first configuration for photo-scaler

// photo-scaler.config.json
{
  // version of configuration
  "version": "1.0.0",
  // change it's current working directory
  // setting "./" will change cwd to directory where config lives
  "cwd": "./",
  // this is where fun begins
  "assets": {
    // globaly provided extensions, can be overwritten inside
    // configurations
    "extensions": {
      "images": {
        "primary": "webp",
        "fallback": "png"
      },
      "videos": {
        "primary": "webp",
        "fallback": "mp4"
      }
    },
    // this is optional extractor for all collected images
    // if it's set, photo-scaler will save all extracted images
    // into map of path to information about image and generate file
    "metadataExtraction": {
      "type": "angular",
      "outputPath": "../app/photo-scaler-metadata.injector.ts",
      "trimPathsTo": "../",
      // setting it's value to true will cause to cut path to just file name
      // e.g. assets/images/photo1.png to photo1.png
      "fileNamesOnly": false
    },
    // this is where all configurations lives in
    "configurations": [
      {
        // give it a name, so later on it could be easier
        // to identify where it fails or anything
        "name": "actor",
        // default scale width for all breakpoint'ed images
        // for example if we take breakpoint xs which is 575
        // it will multiply by 60% so in a result we will receive
        // 345 px width, this can be overwritten by providing `targetWidth` or `targetHeight` value
        // at specific breakpoint
        "defaultScaleWidth": "60%",
        "breakpoints": [
          {
            "prefix": "xs",
            "width": 575
          },
          {
            "prefix": "sm",
            "width": 767
          },
          {
            "prefix": "md",
            "width": 991
          },
          {
            "prefix": "lg",
            "width": 1199
          },
          {
            "prefix": "xxl",
            // do not rescale photo, just prefix it.
            "keepOriginalSize": true
          }
        ],
        // path where the images can be found
        // it can be path to specific image or to directory of images
        // in case of directory, it will recursevily go through
        // all of the nested directories
        "path": "./images"
      }
    ]
  }
}