loading table of contents...

Frontend Developer Manual / Version 2310

Table Of Contents

5.12 Embedding Small Images in CSS

The default theme build process will automatically embed images using data URLs if they are smaller than 10000 bytes. This is a feature of the url-loader used in our Webpack configuration to optimize the loading time of the website.

You can change the threshold for embedding images if this does not fit your needs by adding a build config to either the Section 6.2, “Theme Config” (preferred) or the coremedia entry of your theme's package.json:

  "buildConfig": {
    "imageEmbedThreshold": 20000

The example will set the threshold to 20000 bytes. Setting the value to 0 means that all images will be embedded regardless of their size (not recommended), -1 will disable the functionality completely so images will not be embedded using a data URL.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.