Skip to content
This repository was archived by the owner on May 22, 2024. It is now read-only.

Commit 7a0aa19

Browse files
committed
fix(webp): fix optimization settings + typos
1 parent 2b8571b commit 7a0aa19

File tree

4 files changed

+14
-11
lines changed

4 files changed

+14
-11
lines changed

README.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,7 @@ All keys in the configuration object have [Typescript](#typescript) typings that
253253

254254
**Note:** The supported keys for codec specific settings are:
255255

256+
- exportOriginal
256257
- exportWebp
257258
- resize
258259
- optimize
@@ -395,19 +396,19 @@ Even without modern editor, you can consult the generated `*.d.ts` typing files
395396

396397
## Optimization
397398

398-
Image optimization uses *pngquant*, *mozjpeg*, *svgo*, *gifsicle* and *cwebp* to reduce the output image size as much as possible. By default, it's very aggressive, and also very slow. In most situations it will take more time than the resize process. If `optimize` is set to `false`, then the image will be saved directly from SHARP using default codec settings, instead of being sent to the optimizer first.
399+
Image optimization uses *pngquant*, *mozjpeg*, *svgo* and *gifsicle* to reduce the output image size as much as possible. By default, it's very aggressive, and also very slow. In most situations it will take more time than the resize process. If `optimize` is set to `false`, then the image will be saved directly from SHARP using default codec settings, instead of being sent to the optimizer first.
399400

400-
You can override all of the optimizer settings by specifying the `optimizerSettings` key in the configuration object (must be under on of the `png`, `jpeg`, `svg` or `gif` keys).
401+
You can override all of the optimizer settings by specifying the `optimizerSettings` key in the configuration object (must be under on of the `png`, `jpeg`, `svg`, `gif` or `webp` keys).
401402

402-
See [imagemin-pngquant](https://www.npmjs.com/package/imagemin-pngquant), [imagemin-mozjpeg](https://www.npmjs.com/package/imagemin-mozjpeg), [imagemin-svgo](https://www.npmjs.com/package/imagemin-svgo), [imagemin-gifsicle](https://www.npmjs.com/package/imagemin-gifsicle) and [imagemin-webp](https://www.npmjs.com/package/imagemin-webp) for the available optimization options.
403+
See [imagemin-pngquant](https://www.npmjs.com/package/imagemin-pngquant), [imagemin-mozjpeg](https://www.npmjs.com/package/imagemin-mozjpeg), [imagemin-svgo](https://www.npmjs.com/package/imagemin-svgo) and [imagemin-gifsicle](https://www.npmjs.com/package/imagemin-gifsicle) for the available optimization options. For WebP, you must use the [SHARP configuration object](https://sharp.dimens.io/en/stable/api-output/#webp) instead, as `imagemin-webp` seems to have compatibility issues with libvips.
403404

404405
Usually WebP provides a ~40% difference in file reduction, however you may need to play around with the optimizer settings to achieve this. I have chosen some opinionated settings to try to achieve web-type compression. Specifying a an empty object `{}` as the `optimizerSettings` for the codec (in the config) will override the default settings and revert to the plugin defaults.
405406

406407
### Performance
407408

408409
RIB has been rewritten from the ground up to be more efficient than previous versions. Instead of writing vast quantities of raw image data to memory buffers for every operation, the new version leverages the performance of Node.js streams, reducing the memory footprint without sacrificing any speed.
409410

410-
For each image job, a tree-like stream network is created that flows data from the source image, through the resize and optimizer streams before being redirected back to the disk. This allows image data to flow through the network as needed until all write streams close, small packets at a time.
411+
For each image job, a tree-like stream network (that is referred to as a pipeline in this documentation) is created that flows data from the source image, through the resize and optimizer stream modifiers before being redirected back to the disk. This allows image data to flow through the network as needed until all write streams close, small packets at a time.
411412

412413
On a high-end system, you may expect to process a thousand high-quality 4K images a minute with the default program configuration.
413414

@@ -430,7 +431,7 @@ Please make sure that your contributions pass tests before submitting a Pull Req
430431

431432
It's hard to make short error messages easy to understand. You can find a description of the error here.
432433

433-
RIB error codes are formatted as the letter E, followed by four digits.
434+
RIB error codes are formatted as the letter E, followed by three digits.
434435

435436
<details><summary><b>Error codes (click me)</b></summary>
436437

@@ -462,6 +463,8 @@ Important files were detected in the output folder, and the user aborted the cle
462463

463464
The controller is in charge of the worker cluster and handles job delegation.
464465

466+
All errors are passed through the the Main class.
467+
465468
### Thread errors
466469

467470
These errors are thrown by the image processing thread.
@@ -481,15 +484,15 @@ An unlikely error, the image disappeared since the input directory was scanned d
481484

482485
#### E503 - Not a file
483486

484-
An unlikely error. The path for the image was no-longer a file.
487+
An unlikely error. The path for the image was no longer a file.
485488

486489
</details>
487490

488491
## Built With
489492

490493
* [NodeJS](https://nodejs.org) - Powered by Chrome's V8 Javascript engine
491494
* [SHARP](https://github.com/lovell/sharp) - A fantastic Node.js wrapper around the [libvips](https://github.com/jcupitt/libvips) library
492-
* [Dynamic Terminal](https://github.com/marcuscemes/dynamic-terminal) My very own terminal logging library
495+
* [Dynamic Terminal](https://github.com/marcuscemes/dynamic-terminal) - My very own terminal logging library
493496

494497
### Milestones
495498

@@ -503,7 +506,6 @@ An unlikely error. The path for the image was no-longer a file.
503506
- [ ] Support "synchronize" mode where only missing images are exported
504507
- [ ] Add checksum to manifest for better image searching
505508
- [ ] Add example with new WebP optimizer and better optimizer settings
506-
- [ ] Consider removing dependency and use compiled encoders directly
507509
- [x] Add exportOriginalCodec option
508510
- [x] Add support for imagemin-webp [REVERTED DUE TO BUG]
509511
- [x] Avoid double-compressing a file when optimizer is enabled

src/Config.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@ export interface ICodecSettings {
3939
* Enable/Disable image optimization.
4040
* If disabled, the image will be saved directly from SHARP using default options.
4141
* If enabled, the image will pass through an optimizer beforehand, which can be
42-
* configured using optimizerSettings.
42+
* configured using optimizerSettings. Doesn't do anything for WebP.
4343
*/
4444
optimize?: boolean;
45-
/** imagemin plugin-specific settings */
45+
/** imagemin plugin-specific settings, or the SHARP WebP options for WebP! */
4646
optimizerSettings?: object;
4747
/** The responsive breakpoints to use for resizing */
4848
exportPresets?: IExportPreset[];

src/ProcessThread.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -472,7 +472,7 @@ class ProcessThread {
472472
}
473473

474474
if (saveWebp && targetFormat !== "webp") {
475-
const webpOptions = this.getOption("optimize", "webp") || {};
475+
const webpOptions = this.getOption("optimizerSettings", "webp") || {};
476476
const webpWriteStream = fs.createWriteStream(exportPath + ".webp", {
477477
flags: writePermission
478478
});

src/Utility.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import ansiAlign from "ansi-align";
22
import sharp, { Sharp } from "sharp";
33
import wrapAnsi from "wrap-ansi";
44

5+
/** Check if object is an instance of SHARP */
56
export function isSharpInstance(instance: object): instance is Sharp {
67
return instance instanceof sharp;
78
}

0 commit comments

Comments
 (0)