# Images और assets — Webpack

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

> Images और media files को efficiently handle करें।

## 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 करना चाहिए?

- [x] जब वे छोटी हों ताकि efficiently में memory में fit हो सकें।
- [ ] सभी images को हमेशा inline करना चाहिए।
- [ ] Compression के लिए बड़ी images को inline करना चाहिए।

*Answer:* जब वे छोटी हों ताकि efficiently में memory में fit हो सकें।. छोटी images को efficiently base64 के रूप में inline किया जाता है। बड़ी images को separate files के रूप में रहना चाहिए।