Looking for our logo ?

Download Logo Pack

See more Strapi assets

Responsive image

Custom responsive image formats

Install now

Strapi plugin responsive-image

Custom responsive image formats for https://strapi.io v4 (For strapi v3 use v0.5.0)

How it works

Go to the settings and choose the Responsive image menu
Add/edit the formats
Upload a new media and it will have the new formats automatically generated

Installation

Using npm

npm install --save strapi-plugin-responsive-image
npm run build

Using yarn

yarn add strapi-plugin-responsive-image
yarn build

Setup

We need to override the image manipulation of the upload plugin and use the one from this plugin. So we need to add a strapi-server.js file within the src/extensions/upload/strapi-server.js folder.

e.g For Javascript:

mkdir -p src/extensions/upload/
touch src/extensions/upload/strapi-server.js

Paste the code below in the file.

1const imageManipulation = require("strapi-plugin-responsive-image/server/services/image-manipulation");
2
3module.exports = (plugin) => {
4  plugin.services["image-manipulation"] = imageManipulation;
5
6  return plugin;
7};

For Typescript:

mkdir -p src/extensions/upload/
touch src/extensions/upload/strapi-server.ts

Paste the code below in the file.

1const imageManipulation = require("strapi-plugin-responsive-image/server/services/image-manipulation");
2
3export default (plugin) => {
4  plugin.services["image-manipulation"] = imageManipulation();
5
6  return plugin;
7};

Now when you'll upload a file you'll have the formats of the settings page.

Global options

The plugin uses sharp to resize the image.

Input	Description
Quality	Quality, integer 1-100
Progressive	Use progressive (interlace) scan

Format options

Input	Description
Name	Required Name of the format. The file generated will look like `name_file_uploaded_hash.jpeg`
Generate x2 version	If ON it generates a format `name_x2` with a width and a height twice bigger
Output format	The output format of your images: Same as source, JPEG, PNG, WebP or AVIF
Width	Required Width of the image
Height	Height of the image
Fit	How the image should be resized to fit both provided dimensions. More info
Position	To use when fit is cover or contain. More info
Without enlargement	Do not enlarge if the width or height are already less than the specified dimensions. More info