Add quality to individual formats

README.md

@@ -95,6 +95,7 @@ The plugin uses [sharp](https://github.com/lovell/sharp) to resize the image.
 | 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                                                                                                                                      |
+| Quality             | Imagequality (overrides global quality setting for this image format)                                                                                    |
 | Fit                 | How the image should be resized to fit both provided dimensions. [More info](https://sharp.pixelplumbing.com/api-resize#parameters)                      |
 | Position            | To use when fit is cover or contain. [More info](https://sharp.pixelplumbing.com/api-resize#parameters)                                                  |
 | Without enlargement | Do not enlarge if the width or height are already less than the specified dimensions. [More info](https://sharp.pixelplumbing.com/api-resize#parameters) |

admin/src/pages/Settings/ImageFormat.js

@@ -124,7 +124,7 @@ const ImageFormat = (props) => {
           ))}
         </Select>
       </GridItem>
-      <GridItem col={6} s={12}>
+      <GridItem col={4} s={7}>
         <NumberInput
           label={formatMessage({
             id: getTrad("settings.form.formats.width.label"),
@@ -147,7 +147,7 @@ const ImageFormat = (props) => {
           value={input.width}
         />
       </GridItem>
-      <GridItem col={6} s={12}>
+      <GridItem col={4} s={7}>
         <NumberInput
           label={formatMessage({
             id: getTrad("settings.form.formats.height.label"),
@@ -167,6 +167,26 @@ const ImageFormat = (props) => {
           value={input.height}
         />
       </GridItem>
+      <GridItem col={4} s={7}>
+        <NumberInput
+          label={formatMessage({
+            id: getTrad("settings.form.formats.quality.label"),
+          })}
+          name="quality"
+          onValueChange={(value) =>
+            handleFormatsChange(
+              {
+                target: {
+                  name: "quality",
+                  value,
+                },
+              },
+              index
+            )
+          }
+          value={input.quality}
+        />
+      </GridItem>
       <GridItem col={4} s={7}>
         <Select
           label={formatMessage({

admin/src/pages/Settings/index.js

@@ -249,6 +249,9 @@ export const SettingsPage = () => {
                           label={formatMessage({
                             id: getTrad("settings.form.quality.label"),
                           })}
+                          hint={formatMessage({
+                            id: getTrad("settings.form.quality.description"),
+                          })}
                           name="quality"
                           validations={{
                             min: 1,

admin/src/translations/en.json

@@ -15,13 +15,15 @@
   "settings.form.formats.convertToFormat.description": "Choose the output format of your images",
   "settings.form.formats.width.label": "Width",
   "settings.form.formats.height.label": "Height",
+  "settings.form.formats.quality.label": "Quality",
   "settings.form.formats.fit.label": "Fit",
   "settings.form.formats.fit.description": "How the image should be resized to fit both provided dimensions",
   "settings.form.formats.position.label": "Position",
   "settings.form.formats.position.description": "To use when fit is cover or contain",
   "settings.form.formats.withoutEnlargement.label": "Without enlargement",
   "settings.form.formats.withoutEnlargement.description": "Do not enlarge if the width or height are already less than the specified dimensions",
   "settings.form.quality.label": "Quality",
+  "settings.form.quality.description": "Can be overridden by each format",
   "settings.form.progressive.label": "Progressive",
   "settings.header.label": "Responsive image",
   "settings.section.global.label": "Global settings",

server/controllers/validation/settings.js

@@ -19,6 +19,7 @@ const settingsSchema = yup.object({
     convertToFormat: yup.string().transform(emptyStringToNull).nullable(),
     width: yup.number().required().min(1),
     height: yup.number().min(1).transform(emptyStringToNull).nullable(),
+    quality: yup.number().min(1).max(100).transform(emptyStringToNull).nullable(),
     fit: yup.string(),
     position: yup.string(),
     withoutEnlargement: yup.boolean(),

server/services/image-manipulation.js

@@ -43,6 +43,9 @@ const resizeFileTo = async (
 
   let sharpInstance = autoOrientation ? sharp().rotate() : sharp();
 
+  // merge global quality with format specific quality
+  quality = options?.quality ? options.quality : quality;
+
   if (options.convertToFormat) {
     sharpInstance = sharpInstance.toFormat(options.convertToFormat);
   }