Turn off base64 encoding for background URLs in the Minify package

Question

Turn off base64 encoding for background URLs in the Minify package

When I use the minify tool to compress my js and css files, I noticed that the files containing background:url(...) statements actually increased in size. This happened because the urls were encoded to base64.

I tried to disable this base64 encoding feature using the css-base64-images function, but it seems that it is not possible based on an issue raised back in 2016.

Here's a snippet from my package.json:

  "devDependencies": {
    "minify": "^9.1.0",
    "postcss-cli": "^10.0.0"
  }

This is a part of my code:

import { minify } from 'minify';

const myFunction = () => {
  /* some code... */

  minify(filepath).then((file) => {
                    /* some code... */
  });
}

According to an informative article, utilizing base64 for image optimization may not always be necessary. In my case, some css files have ballooned to10,000 KB from 40-50 KB post-minification, prompting me to want to deactivate base64.

css npm base64 node-modules minify

Answer 1

Answer №1

After much experimentation, I managed to find a workaround for disabling the functionality of base64.

When using the minify function, it requires two parameters - name and userOptions.

The userOptions is then relayed to

node_modules\css-b64-images\lib\css-b64-images.js

. Within this file lies the function called replaceUrlByB64, which skips encoding to base64 if the file size exceeds the specified maxSize.

if (stat.size > options.maxSize){
      return cb(new Error('Skip ' + imageUrl + ' Exceed max size'), css);
}

My solution:

import { minify } from 'minify';

/* To avoid base64 replacement in minify, set image maxSize to 0.
   Function: replaceUrlByB64 within node_modules/css-b64-images/lib/css-b64-images.js */
const skipReplacingUrlByB64 = {
    img : {
        maxSize: 0,
    },
}

const myFunction = () => {
  /* some code... */

  minify(filepath, skipReplacingUrlByB64).then((file) => {
                    /* some code... */
  });
}

The structure of the object skipReplacingUrlByB64 mirrors how userOptions is fetched in node_modules\minify\lib\img.js

const options = {
    ...defaultOptions,
    ...userOptions?.img || {},
};

The contents of package.json remain unchanged as depicted in the original post.

  "devDependencies": {
    "minify": "^9.1.0",
    "postcss-cli": "^10.0.0"
  }

Answer 2

After much experimentation, I managed to find a workaround for disabling the functionality of base64.

When using the minify function, it requires two parameters - name and userOptions.

The userOptions is then relayed to

node_modules\css-b64-images\lib\css-b64-images.js

. Within this file lies the function called replaceUrlByB64, which skips encoding to base64 if the file size exceeds the specified maxSize.

if (stat.size > options.maxSize){
      return cb(new Error('Skip ' + imageUrl + ' Exceed max size'), css);
}

My solution:

import { minify } from 'minify';

/* To avoid base64 replacement in minify, set image maxSize to 0.
   Function: replaceUrlByB64 within node_modules/css-b64-images/lib/css-b64-images.js */
const skipReplacingUrlByB64 = {
    img : {
        maxSize: 0,
    },
}

const myFunction = () => {
  /* some code... */

  minify(filepath, skipReplacingUrlByB64).then((file) => {
                    /* some code... */
  });
}

The structure of the object skipReplacingUrlByB64 mirrors how userOptions is fetched in node_modules\minify\lib\img.js

const options = {
    ...defaultOptions,
    ...userOptions?.img || {},
};

The contents of package.json remain unchanged as depicted in the original post.

  "devDependencies": {
    "minify": "^9.1.0",
    "postcss-cli": "^10.0.0"
  }

Turn off base64 encoding for background URLs in the Minify package

Answer №1

Similar questions

Placing a pair of labels onto a bootstrap form while ensuring column alignment

JavaScript multi-click navigation menu

Having trouble with the jQuery each function's functionality

Steps for installing the most recent update of Primeng, version 7.1.0

Arranging arrows strategically along a line and ensuring they are positioned correctly above all div elements

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Placing error notifications beneath my table rows for a more polished appearance

Tips for fading an image as you scroll using CSS and JavaScript?

Are browser window.sessionStorage and ng libraries like ngx-webstorage considered safe to implement in Angular 4?

What's the issue with this HTML button not functioning properly?

Set up npm to handle dependencies by utilizing JFrog Artifactory as a proxy for both the npm registry and GitHub repositories

Can a custom CSS be linked directly to the angular-cli.json file?

What is the best way to manage the package-lock.json file during deployment from git using SSH?

Function is raising an error with the wrong value or text

The image is non-adjustable to different screen sizes

Dividing image styles within css

Adding CSS styles to an HTML page using JavaScript

What is the best way to incorporate width adjustments in an image source for a responsive website?

Encountering a problem while trying to install Gulp

The malfunction of CSS3 effect