# छवि अनुकूलन — वेब प्रदर्शन अनुकूलन
Source: https://www.geekswithgeeks.com/hi/web-performance/web-perf-04
> प्रारूपों, संपीड़न और आलसी लोडिंग के माध्यम से गुणवत्ता का त्याग किए बिना छवि फ़ाइल आकार को कम करने की तकनीकें।
## आधुनिक छवि प्रारूप
Use **WebP** (30% smaller), **AVIF** (20% smaller than WebP), or **HEIC**. Provide fallbacks for older browsers: ``.
## संपीड़न रणनीतियां
Use **lossy compression** (JPEG, WebP quality 75-85) for photos, **lossless** for graphics. Tools: ImageOptim, TinyPNG, Squoosh. Compress before responsive resizing to avoid sending oversized images.
## उत्तरदायी छवियां
Use `srcset` and `sizes` to serve appropriate resolution per device: ``. Reduces data waste on mobile.
## छवियों को आलसी तरीके से लोड करना
Add `loading="lazy"` to below-the-fold images: ``. Load only when user scrolls near. Dramatically reduces initial page load time.
## छवि अनुकूलन कार्यप्रवाह
1) Choose correct format, 2) Compress aggressively, 3) Use responsive images, 4) Lazy load below-the-fold, 5) Consider WebP with fallbacks. Images often comprise 50% of page weight.
त्वरित जाँच
**Quiz:** WebP प्रारूप का प्रमुख लाभ क्या है?
- [ ] JPEG से 30% छोटी फ़ाइल
- [ ] सार्वभौमिक ब्राउज़र समर्थन
- [ ] प्रदर्शन लागत के बिना एनिमेटेड
`. Load only when user scrolls near. Dramatically reduces initial page load time.
## छवि अनुकूलन कार्यप्रवाह
1) Choose correct format, 2) Compress aggressively, 3) Use responsive images, 4) Lazy load below-the-fold, 5) Consider WebP with fallbacks. Images often comprise 50% of page weight.
त्वरित जाँच
**Quiz:** WebP प्रारूप का प्रमुख लाभ क्या है?
- [ ] JPEG से 30% छोटी फ़ाइल
- [ ] सार्वभौमिक ब्राउज़र समर्थन
- [ ] प्रदर्शन लागत के बिना एनिमेटेड
`. Reduces data waste on mobile.
## छवियों को आलसी तरीके से लोड करना
Add `loading="lazy"` to below-the-fold images: `