Frontbend
Frontbend is a tool that automates the analysis of image dimensions accross various breakpoints.
Node
Install
npm install --save-dev frontbend
Usage
const path = require('path');
const fs = require('fs');
const frontbend = require('frontbend');
const configFile = path.resolve(__dirname, 'config.json');
const outputDir = path.resolve(__dirname, 'output');
const config = JSON.parse(fs.readFileSync(configFile, 'utf8'));
frontbend
.analyze(config)
.then(result => frontbend.writeResult(result, outputDir));
API
const frontbend = require('frontbend');
frontbend.analyze(config [, options])
Options:
Option | Default value | Description |
---|---|---|
parallel |
1 |
Increase to allow multiple image types being processed in parallel. |
open |
false |
Run in full version of Chromium. By default, frontbend launches Chromium in headless mode. |
frontbend.writeResult(result [, options])
Options:
Option | Default value | Description |
---|---|---|
clean |
false |
Delete output directory before running frontbend. |
CLI
npx frontbend ./my/config.json ./my/output/ [options]
or
npm install --global frontbend
frontbend ./my/config.json ./my/output/ [options]
Options:
Option | Alias | Default value | Description |
---|---|---|---|
--parallel |
-p |
1 |
Increase to allow multiple image types being processed in parallel. |
--open |
-o |
false |
Run in full version of Chromium. By default, frontbend launches Chromium in headless mode. |
--clean |
-c |
false |
Delete output directory before running frontbend. |
Configuration
policies
[object<string, object>]
Use policies in order to define transformations and output quality for images delivered by Akamai Image Manager.
Example:
{
"policies": {
"16x9": {
"transformations": [
{
"transformation": "Resize",
"type": "normal",
"aspect": "fill",
"width": 3840,
"height": 2160
},
{
"gravity": "Center",
"transformation": "Crop",
"width": 3840,
"height": 2160,
"allowExpansion": false
}
],
"output": {
"perceptualQuality": "mediumHigh"
}
}
}
}
Documentation of Akamai Image Manager Policies
Note: The id
and breakpoints
fields are added dynamically to the resulting policy files.
viewports
[object<string, object>]
Define a set of viewports/breakpoints at which the interface adapts its layout.
Fields:
Field | Type | Default value | Required | Description |
---|---|---|---|---|
breakpoint | number |
undefined |
yes | Minimum width (pixel) of viewport |
width | number |
undefined |
yes | Width (pixel) of the reference viewport |
fallback | boolean |
undefined |
no | Use as fallback viewport, e.g. for browsers without support for <picture> -elements (If no fallback is specified, Frontbend will use the largest viewport as fallback) |
Example:
{
"viewports": {
"xs": {
"breakpoint": 0,
"width": 375
},
"s": {
"breakpoint": 575,
"width": 768
},
"m": {
"breakpoint": 1024,
"width": 1200
},
"l": {
"breakpoint": 1440,
"width": 1600,
"fallback": true
},
"xl": {
"breakpoint": 1920,
"width": 1920
}
}
}
Note: Frontbend follows the mobile-first approach.
imageTypes
[object<string, object>]
Provide a set of image types that respond in its own way to different viewport sizes.
Field | Type | Default value | Required | Description |
---|---|---|---|---|
url | string |
undefined |
yes | Url of page |
selector | string |
undefined |
yes | CSS Selector for the image element |
credentials | object |
null |
no | Provide credentials for HTTP authentication |
useRelativeUnit | boolean |
true |
no | Set to false in order to use an absolute unit (px) for image dimensions |
retinaScale | number |
1.5 |
no | Scale factor that will be used to determine image dimensions for high resolution screens |
policy | string |
'default' |
no | Id of policy that should be applied to the image |
overrides | object |
undefined |
no | Use the overrides object to use a different policy at specific viewports/breakpoints (e.g. when you want to switch to a different aspect ratio for particular viewports) |
Example:
{
"imageTypes": {
"stage": {
"url": "http://localhost:8000/",
"selector": ".stage__image",
"credentials": { "username": "USERNAME", "password": "PASSWORD" },
"policy": "16x9"
},
"intro": {
"url": "http://localhost:8000/",
"selector": ".intro__image",
"credentials": { "username": "USERNAME", "password": "PASSWORD" },
"policy": "1x1",
"overrides": {
"xs": {
"policy": "16x9"
}
}
}
}
}