fix: force format for large jpegs (#11)

* chore: refactor mergeParams

* fix: force jpeg format for jpeg images > 3000px

* chore: enable test

* chore: rename var

Author: nd0ut

src/__tests__/uploadcare-loader.spec.ts

@@ -276,7 +276,8 @@ describe('uploadcareLoader', () => {
       'https://test-public-key.ucr.io/-/format/jpeg/-/stretch/off/-/progressive/yes/-/resize/5000x/-/quality/normal/https:/example.com/image.png'
     );
 
-    // // Jpg image by extension with auto format. Should be max 5000 width.
+    // // Jpg image by extension with auto format.
+    // // Should be max 5000 width with /format/jpeg/ forced.
 
     src = 'https:/example.com/image.jpg';
 
@@ -292,7 +293,7 @@ describe('uploadcareLoader', () => {
     });
 
     expect(result).toBe(
-      'https://test-public-key.ucr.io/-/format/auto/-/stretch/off/-/progressive/yes/-/resize/5000x/-/quality/normal/https:/example.com/image.jpg'
+      'https://test-public-key.ucr.io/-/format/jpeg/-/stretch/off/-/progressive/yes/-/resize/5000x/-/quality/normal/https:/example.com/image.jpg'
     );
 
     removeEnvVar('NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY');

src/utils/helpers.ts

@@ -4,33 +4,30 @@ import {
 } from './constants';
 
 /**
- * Merge user parameters with default parameters, so that user parameters have higher priority.
+ * Merge transformation parameters from `a` and `b`, so that `b` parameters have higher priority.
  *
- * @param {string[]} defaultParams
- * @param {string[]} userParams
+ * @param {string[]} a
+ * @param {string[]} b
  * @returns {string[]}
  */
-export function mergeParams(
-  defaultParams: string[],
-  userParams: string[]
-): string[] {
-  const resultParams = defaultParams;
+export function mergeParams(a: string[], b: string[]): string[] {
+  const resultParams = [...a];
 
-  for (let i = 0; i < userParams.length; i++) {
-    const [userParam] = _parseUploadcareTransformationParam(userParams[i]);
+  for (let i = 0; i < b.length; i++) {
+    const [userParam] = _parseUploadcareTransformationParam(b[i]);
 
     let hasBeenReplaced = false;
     for (let j = 0; j < resultParams.length; j++) {
       if (resultParams[j].startsWith(userParam)) {
-        resultParams[j] = userParams[i];
+        resultParams[j] = b[i];
         hasBeenReplaced = true;
         break;
       }
     }
 
     // If the param is new, just add it.
     if (!hasBeenReplaced) {
-      resultParams.push(userParams[i]);
+      resultParams.push(b[i]);
     }
   }
 

src/utils/loader.ts

@@ -2,7 +2,8 @@ import { ImageLoaderProps } from 'next/image';
 import {
   DEFAULT_CDN_DOMAIN,
   DEFAULT_PARAMS,
-  NOT_PROCESSED_EXTENSIONS
+  NOT_PROCESSED_EXTENSIONS,
+  MAX_OUTPUT_IMAGE_DIMENSION
 } from './constants';
 import {
   convertToUploadcareQualityString,
@@ -81,13 +82,19 @@ export function uploadcareLoader({
     requestedFormat === 'jpeg' ||
     (requestedFormat === 'auto' && isJpegExtension(extension));
   const maxResizeWidth = getMaxResizeWidth(width, isJpeg);
+  const forceJpeg = isJpeg && maxResizeWidth > MAX_OUTPUT_IMAGE_DIMENSION;
 
-  const basicParams = DEFAULT_PARAMS.concat([
+  const basicParams = DEFAULT_PARAMS.concat(
     `resize/${maxResizeWidth}x`,
     `quality/${qualityString}`
-  ]);
-
-  const params = mergeParams(basicParams, userParams);
+  );
+  const formatOverrideParams = [
+    `format/${forceJpeg ? 'jpeg' : requestedFormat}`
+  ];
+  const params = mergeParams(
+    mergeParams(basicParams, userParams),
+    formatOverrideParams
+  );
 
   const apiParamsString = '/-/' + params.join('/-/') + '/';