# Images और assets — Webpack: Module Bundling और Build Optimization

Source: https://www.skillbyai.com/hi/webpack/webpack-11

> Webpack 5 asset modules से images और fonts संभालें, और requests व caching संतुलित करने के लिए size के अनुसार inline या emitted files चुनें।

## Asset handling strategies

Webpack 5 में built-in asset type handling है। 'asset' का उपयोग करके automatically छोटी files को inline करने या बड़ी files को emit करने के बीच choose करें। छोटी images base64 encoded inline होती हैं।

## Asset handling को configure करें

Inline बनाम external assets के लिए size thresholds set करें।

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8KB threshold
          }
        }
      }
    ]
  }
};
```

Output:

```
Images under 8KB are base64 inlined; larger images emitted as files
```

## Image optimization मायने रखता है

Bundling से पहले images को compress करने के लिए image-webpack-loader use करें। WebP और AVIF formats size को further reduce करते हैं।

त्वरित जाँच

**Quiz:** Images को कब inline करना चाहिए?

- [ ] सभी images को हमेशा inline करना चाहिए।
- [ ] Compression के लिए बड़ी images को inline करना चाहिए।
- [ ] कभी नहीं, क्योंकि inlining build तोड़ देता है।
- [x] जब files छोटी हों, ताकि अतिरिक्त HTTP requests बच सकें।

*Answer:* जब files छोटी हों, ताकि अतिरिक्त HTTP requests बच सकें।. छोटी files को base64 में inline करने से HTTP requests बचती हैं। बड़ी files को बेहतर caching के लिए अलग रखा जाता है।