https://github.com/uxter/img4web
Image converter for adaptive web pages.
https://github.com/uxter/img4web
adaptive converter crop image resize web
Last synced: 2 months ago
JSON representation
Image converter for adaptive web pages.
- Host: GitHub
- URL: https://github.com/uxter/img4web
- Owner: uxter
- License: isc
- Created: 2017-03-13T10:29:03.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-31T11:30:34.000Z (almost 9 years ago)
- Last Synced: 2025-10-20T11:48:17.336Z (9 months ago)
- Topics: adaptive, converter, crop, image, resize, web
- Language: JavaScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# img4web
Image converter for adaptive web pages.
[](https://www.npmjs.com/package/img4web)
## Installation
First download and install [GraphicsMagick](http://www.graphicsmagick.org/) or [ImageMagick](http://www.imagemagick.org/).
##### Local installation
```sh
npm install --save-dev img4web
```
##### Global installation
```sh
npm install -g img4web
```
## Usage
To run the converter in command line
```sh
img4web --help
#
# Usage: img4web [options]
#
# Options:
#
# -h, --help output usage information
# --src-file Specify source file (override --src-dir and --src-ext)
# --src-dir Specify source dir
# --src-ext Specify source extensions
# --out-dir Specify output dir
# --out-format Specify output format
#
```
Run the converter using
```sh
img4web --src-dir ./tmp/src --src-ext jpg,png,gif \
--out-dir ./tmp/out --out-format \
'sm1=ext:jpg,width:420,height:240,quality:80,strip:true,interlance:Line;\
md1=ext:jpg,width:640,height:480:quality:90,strip:true,interlance:Line'
```
To run the converter using npm, you can specify scripts in `package.json`
```json
{
"scripts": {
"convert-images": "img4web --src-dir ./tmp/src --src-ext jpg,png,gif --out-dir ./tmp/out --out-format 'sm1=ext:jpg,width:420,height:240,quality:80,strip:true,interlance:Line;md1=ext:jpg,width:640,height:480,quality:90,strip:true,interlance:Line'"
}
}
```
You can specify the config in `.img4webrc`
```json
{
"srcDir": "./tmp/src",
"srcExt": [
"jpg",
"png",
"gif"
],
"outDir": "./tmp/out",
"outFormat": {
"sm1": {
"ext": "jpg",
"width": 420,
"height": 240,
"quality": 80,
"strip": true,
"interlance": "Line"
},
"md1": {
"ext": "jpg",
"width": 640,
"height": 480,
"quality": 90,
"strip": true,
"interlance": "Line"
}
}
}
```
Alternatively, you can specify the field `img4web` in your `package.json`
```json
{
"img4web": {
"srcDir": "./tmp/src",
"srcExt": [
"jpg",
"png",
"gif"
],
"outDir": "./tmp/out",
"outFormat": {
"sm1": {
"ext": "jpg",
"width": 420,
"height": 240,
"quality": 80,
"strip": true,
"interlance": "Line"
},
"md1": {
"ext": "jpg",
"width": 640,
"height": 480,
"quality": 90,
"strip": true,
"interlance": "Line"
}
}
}
}
```
And specify scripts in `package.json`
```json
{
"scripts": {
"convert-images": "img4web"
}
}
```
## Usage result
tag [picture](https://developer.mozilla.org/en/docs/Web/HTML/Element/picture)
```html
```
CSS media queries
```css
.container {
background: url(img.jpg);
}
@media (min-width: 768px) {
.container {
background: url(img-sm1.jpg);
}
}
@media (min-width: 992px) {
.container {
background: url(img-md1.jpg);
}
}
```
## Dependencies
[babel-core](https://www.npmjs.com/package/babel-core) *
[babel-runtime](https://www.npmjs.com/package/babel-runtime) *
[babel-plugin-transform-runtime](https://www.npmjs.com/package/babel-plugin-transform-runtime) *
[babel-plugin-transform-object-rest-spread](https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread) *
[babel-preset-es2015](https://www.npmjs.com/package/babel-preset-es2015) *
[babel-preset-es2017](https://www.npmjs.com/package/babel-preset-es2017) *
[commander](https://www.npmjs.com/package/commander) *
[gm](https://www.npmjs.com/package/gm) *
[mkdirp](https://www.npmjs.com/package/mkdirp) *
[recursive-readdir](https://www.npmjs.com/package/recursive-readdir)
## Note on Patches/Pull Requests
1. Fork the project.
2. Make your feature addition or bug fix.
3. Send me a pull request.