छवि अनुकूलन

आधुनिक छवि प्रारूप

Use WebP (30% smaller), AVIF (20% smaller than WebP), or HEIC. Provide fallbacks for older browsers: <picture><source srcset=photo.webp><img src=photo.jpg></picture>.

संपीड़न रणनीतियां

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: <img srcset='small.jpg 480w, large.jpg 1200w' sizes='(max-width: 600px) 100vw, 50vw'>. Reduces data waste on mobile.

छवियों को आलसी तरीके से लोड करना

Add loading="lazy" to below-the-fold images: <img src=photo.jpg loading=lazy>. 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.

त्वरित जाँच

त्वरित जाँच: WebP प्रारूप का प्रमुख लाभ क्या है?

• JPEG से 30% छोटी फ़ाइल
• सार्वभौमिक ब्राउज़र समर्थन
• प्रदर्शन लागत के बिना एनिमेटेड