strapi-provider-upload-aws-s3-with-webp-optimisation

Optimizes image by using sharp.

Also outputs WebP image on upload.

This plugin is tested on strapi with strapi >= 4.0.0.

Installation

npm install strapi-provider-upload-aws-s3-with-webp-optimisation

or

yarn add strapi-provider-upload-aws-s3-with-webp-optimisation

Configurations

Your configuration is passed down to the provider. (e.g: new AWS.S3(config)).

You can see the complete list of options here.

Example ./config/plugins.js

module.exports = ({ env }) => ({
  upload: {
    config: {
      // Strapi uses the full package name as provider name with strapi >= 4.0.0.
      provider: 'strapi-provider-upload-aws-s3-with-webp-optimisation',
      providerOptions: {
        accessKeyId: env('AWS_ACCESS_KEY_ID'),
        secretAccessKey: env('AWS_ACCESS_SECRET'),
        region: env('AWS_REGION'),
        // Optional: Use CDN URL (e.g: https://xxxxxx.cloudfront.net)
        cdn: env('AWS_CLOUDFRONT'),
        // Optional: File uploaded in images folder (e.g: images/sample.png)
        prefix: 'images',
        params: {
          Bucket: env('AWS_BUCKET'),
        },
        // Optional: Options for output image
        // Images optimised by using sharp.
        // See https://sharp.pixelplumbing.com/api-output
        sharpOptions: {
          jpeg: {
            quality: 90,
            progressive: true,
          },
          png: {
            quality: 90,
            progressive: true,
          },
          webp: {
            alphaQuality: 90,
          },
          tiff: {},
          gif: {}
        }
      }
    },
  },
});

Upload WebP URLs are saved into formats in files table.

You need to Enable responsive friendly upload setting is enabled in the settings panel to generate responsive image sizes.

See webp object in each size object.

{
  "large": {
    "ext": ".png",
    "url": "https://xxxxxx.cloudfront.net/images/large_2000x1000_47fb084046.png",
    "hash": "large_2000x1000_47fb084046",
    "mime": "image/png",
    "name": "large_2000x1000.png",
    "path": null,
    "size": 170.82,
    "webp": {
      "ext": ".webp",
      "url": "https://xxxxxx.cloudfront.net/images/large_2000x1000_47fb084046.webp",
      "hash": "large_2000x1000_47fb084046",
      "mime": "image/webp",
      "name": "large_2000x1000_47fb084046.webp",
      "size": 39.78,
      "width": 1000,
      "height": 500
    },
    "width": 1000,
    "height": 500
  },
  "small": {
    "ext": ".png",
    "url": "https://xxxxxx.cloudfront.net/images/small_2000x1000_47fb084046.png",
    "hash": "small_2000x1000_47fb084046",
    "mime": "image/png",
    "name": "small_2000x1000.png",
    "path": null,
    "size": 55.6,
    "webp": {
      "ext": ".webp",
      "url": "https://xxxxxx.cloudfront.net/images/small_2000x1000_47fb084046.webp",
      "hash": "small_2000x1000_47fb084046",
      "mime": "image/webp",
      "name": "small_2000x1000_47fb084046.webp",
      "size": 17.34,
      "width": 500,
      "height": 250
    },
    "width": 500,
    "height": 250
  },
  "medium": {
    "ext": ".png",
    "url": "https://xxxxxx.cloudfront.net/images/medium_2000x1000_47fb084046.png",
    "hash": "medium_2000x1000_47fb084046",
    "mime": "image/png",
    "name": "medium_2000x1000.png",
    "path": null,
    "size": 107.93,
    "webp": {
      "ext": ".webp",
      "url": "https://xxxxxx.cloudfront.net/images/medium_2000x1000_47fb084046.webp",
      "hash": "medium_2000x1000_47fb084046",
      "mime": "image/webp",
      "name": "medium_2000x1000_47fb084046.webp",
      "size": 28.44,
      "width": 750,
      "height": 375
    },
    "width": 750,
    "height": 375
  },
  "thumbnail": {
    "ext": ".png",
    "url": "https://xxxxxx.cloudfront.net/images/thumbnail_2000x1000_47fb084046.png",
    "hash": "thumbnail_2000x1000_47fb084046",
    "mime": "image/png",
    "name": "thumbnail_2000x1000.png",
    "path": null,
    "size": 17.19,
    "webp": {
      "ext": ".webp",
      "url": "https://xxxxxx.cloudfront.net/images/thumbnail_2000x1000_47fb084046.webp",
      "hash": "thumbnail_2000x1000_47fb084046",
      "mime": "image/webp",
      "name": "thumbnail_2000x1000_47fb084046.webp",
      "size": 6.35,
      "width": 245,
      "height": 122
    },
    "width": 245,
    "height": 122
  }
}