Merge pull request #103 from dscafati/master

Added webp support for the sharp adapter

Author: dazuaz

.gitignore

@@ -4,5 +4,6 @@ test/build
 test/**/build/*.js
 test/**/build/**/*.png
 test/**/build/**/*.jpg
+test/**/build/**/*.webp
 .node-version
 /lib

.travis.yml

@@ -2,5 +2,4 @@ os: osx
 language: node_js
 cache: yarn
 node_js:
-  - '8'
-  - '6'
+  - '10'

README.md

@@ -122,8 +122,8 @@ ReactDOM.render(
 | `min` | `integer` | | As an alternative to manually specifying `sizes`, you can specify `min`, `max` and `steps`, and the sizes will be generated for you. |
 | `max` | `integer` | | See `min` above |
 | `steps` | `integer` |`4` | Configure the number of images generated between `min` and `max` (inclusive) |
-| `quality` | `integer` | `85` | JPEG compression quality |
-| `format` | `string` | *original format* | Either `png` or `jpg`; use to convert to another format |
+| `quality` | `integer` | `85` | JPEG and WEBP compression quality |
+| `format` | `string` | *original format* | Either `png` or `jpg`; use to convert to another format. `webp` is also supported, but only by the sharp adapter |
 | `placeholder` | `boolean` | `false` | A true or false value to specify wether to output a placeholder image as a data URI |
 | `placeholderSize` | `integer` | `40` | A number value specifying the width of the placeholder image, if enabled with the option above |
 | `adapter` | `Adapter` | JIMP | Specify which adapter to use. Can only be specified in the loader options. |
@@ -139,6 +139,8 @@ ReactDOM.render(
 
 - `background: string` — Background fill when converting transparent to opaque images. E.g. `#FFFFFF`
 
+- `format: webp` — Conversion to the `image/webp` format. Recognizes the `quality` option.
+
 
 ### Examples
 

package.json

@@ -4,7 +4,7 @@
   "description": "A webpack loader for responsive images",
   "main": "lib/index.js",
   "engines": {
-    "node": ">=4"
+    "node": ">=10"
   },
   "scripts": {
     "clean-test": "rm -f test/**/build/*.jpg test/**/build/*.png test/**/build/**/*.jpg test/**/build/**/*.png test/**/build/test.js",
@@ -50,7 +50,7 @@
     "flow-bin": "^0.85.0",
     "jest": "^20.0.4",
     "jimp": "^0.2.21",
-    "sharp": "^0.18.2",
+    "sharp": "^0.23.2",
     "webpack": "^3.1.0"
   },
   "jest": {

src/adapters/sharp.js

@@ -13,15 +13,22 @@ module.exports = (imagePath: string) => {
           .resize(width, null);
 
         if (options.background) {
-          resized = resized.background(options.background)
-          .flatten();
+          resized = resized
+          .flatten({
+            background: options.background
+          });
         }
 
         if (mime === 'image/jpeg') {
           resized = resized.jpeg({
             quality: options.quality
           });
         }
+        if (mime === 'image/webp') {
+          resized = resized.webp({
+            quality: options.quality
+          });
+        }
 
         resized.toBuffer((err, data, {height}) => {
           if (err) {

src/index.js

@@ -6,12 +6,14 @@ const loaderUtils = require('loader-utils');
 const MIMES = {
   'jpg': 'image/jpeg',
   'jpeg': 'image/jpeg',
-  'png': 'image/png'
+  'png': 'image/png',
+  'webp': 'image/webp'
 };
 
 const EXTS = {
   'image/jpeg': 'jpg',
-  'image/png': 'png'
+  'image/png': 'png',
+  'image/webp': 'webp'
 };
 
 type Config = {
@@ -29,7 +31,7 @@ type Config = {
   background: string | number | void,
   placeholder: string | boolean | void,
   adapter: ?Function,
-  format: 'png' | 'jpg' | 'jpeg',
+  format: 'png' | 'jpg' | 'jpeg' | 'webp',
   disable: ?boolean,
 };
 
@@ -71,7 +73,7 @@ module.exports = function loader(content: Buffer) {
   const outputContext: string = config.context || this.rootContext || this.options && this.options.context;
   const outputPlaceholder: boolean = Boolean(config.placeholder) || false;
   const placeholderSize: number = parseInt(config.placeholderSize, 10) || 40;
-  // JPEG compression
+  // JPEG and WEBP compression
   const quality: number = parseInt(config.quality, 10) || 85;
   // Useful when converting from PNG to JPG
   const background: string | number | void = config.background;