Question - hash names as indication of successful deployment

[ShimiSun]

Thank you for this package!

My goal is to optimize SVG sizes, currently, we have ~30M loaded into a page, resulted from SVGs used in an image tag.

My question is, how would I know if I have applied the package correctly? I'm suspecting I'm not using it right because the browser still shows almost 30M of resources loaded (same as before applying the package).

According to the documentation, imagesName https://github.com/cyrilwanner/next-optimized-images#imagesname will be using a hash, correct me if I'm wrong, but I would think the network traffic will indicate adjusted names for the svgs that will concat a hash number to the original name, and since I'm not seeing a different name applied to file names on the browser network I'm suspecting I'm not using the package correctly.

I tried the package on both dev and production without seeing an impact on the resource size loaded. to the browser.

next.config.js

const withTM = require('next-transpile-modules');
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');

module.exports = withPlugins([
  [
    optimizedImages,
    {
      /* config for next-optimized-images */
      optimizeImagesInDev: true,
    },
  ],
  // your other plugins here
  withTM({
    transpileModules: ['aries-core'],
  }),
]);

In the example below, I also tried to use ?sprite but it had no impact on the overall resource size, and again, I don't see the hash numbers reflected in SVGs naming on the browser traffic.

Please let me know if you see an idea of how to improve so I can utilize the package better.

next-optimized-images v2.5.8
next v9.3.5
node v13.8.0

[cyrilwanner]

Hey @ShimiSun

Yes, you should see hashes in the requested filenames when this plugin is used.
From your config, everything seems correct.

How are you importing the images in your code? Did you use the require/import function? (e.g. <img src={require('./img.jpg')} />)

[ShimiSun]

How are you importing the images in your code? Did you use the require/import function? (e.g. <img src={require('./img.jpg')} />)

I didn't, just basic import from where the file is placed on the public directory.