इमेज पाइपलाइन

लगभग 70 प्रतिशत मार्केटिंग पेजों पर इमेज LCP एलिमेंट है। इमेज अनुशासन एकमात्र सबसे ज्यादा लीवरेज वाला प्रदर्शन लीवर है जो मैं जानता हूँ। जो टीमें इसे सही तरीके से करती हैं वे Core Web Vitals को सहजता से हिट करती हैं; जो टीमें इसे गलत तरीके से करती हैं वे Core Web Vitals के साथ हमेशा के लिए लड़ती हैं।

अनुशासन संरचनात्मक है: फॉर्मेट चुनें, अपलोड के समय रिसाइज़ करें, एनकोडिंग को ऑप्टिमाइज़ करें, स्पष्ट आयाम सेट करें, LCP इमेज को प्रीलोड करें। इनमें से हर एक एक बार का इंजीनियरिंग निवेश है जो हर साइट के हर पेज पर वापसी देता है।

मैं FAL flux-pro/v1.1-ultra और Recraft v3 के माध्यम से हीरो इमेज जनरेट करता हूँ। दोनों ही पूर्ण एनकोडिंग क्वालिटी पर 1200 गुणा 675 पिक्सल JPEG प्रोड्यूस करते हैं, आमतौर पर प्रति इमेज 600KB से 1.5MB। Supabase Storage को रॉ अपलोड करने का मतलब है कि हर पेज अकेले हीरो के ~1MB के साथ शिप होता है।

FAL की लागत लगभग 4 सेंट प्रति हीरो इमेज है, जो मैनुअल फ़ोटोग्राफी या स्टॉक लाइसेंसिंग की तुलना में नगण्य है।

किसी भी अपलोड से पहले, इमेज sharp(buf).resize({width:1600, fit:"inside"}).webp({quality:82}).toBuffer() से गुजरती है। यह एक WebP फ़ाइल बनाता है जो सोर्स JPEG से 90 प्रतिशत छोटी है और कोई दृश्य हानि नहीं है। 900KB हीरो 80KB हीरो बन जाता है।

gautamkhorana.com पर 53 हीरो इमेजों के पार, कुल बचत लगभग 50MB साइट-व्यापी थी। Seahawk पर क्लाइंट साइटों पर यही पाइपलाइन लागू होने पर लगातार समान लाभ मिलते हैं। कोड दस लाइनों का है; प्रभाव स्थायी है।

स्टोरेज अपलोड पर cacheControl: 31536000 सेट करें ताकि CDN फ़ाइल को एक साल के लिए कैश करे। WebP फ़ॉर्मेट आधुनिक ब्राउज़रों को जो चाहिए वह देता है; पुराने ब्राउज़र picture एलिमेंट के माध्यम से JPEG पर वापस आते हैं।

एक स्थिर URL पैटर्न (slug-hero.webp) का उपयोग करें ताकि कैश इनवेलिडेशन की कहानी स्पष्ट हो। जब कोई हीरो अपडेट होता है, तो slug को रोटेट करना चाहिए (slug-hero-v2.webp) और डेटाबेस परमाणु रूप से URL को अपडेट करता है।

हर हीरो इमेज में HTML में स्पष्ट width और height एट्रिब्यूट होने चाहिए। इनके बिना, इमेज लोड होने पर लेआउट शिफ्ट होता है और CLS बढ़ता है। Astro और Next.js Image कंपोनेंट यह स्वचालित रूप से संभालते हैं; raw img टैग्स को इसे मैनुअली करने की जरूरत है।

ऊपर-फोल्ड हीरो इमेज को डॉक्यूमेंट हेड में link rel="preload" as="image" के साथ प्रीलोड करना चाहिए। आमतौर पर LCP मेट्रिक पर 100 से 400 मिलीसेकंड बचाता है। ज्यादातर मार्केटिंग साइटों पर उपलब्ध सबसे उच्च-प्रभाव वाली एक-लाइन परिवर्तन।

fold के नीचे की हर image को loading="lazy" से lazy-load करें। Browsers अब इसे natively handle करते हैं; कोई JavaScript library की जरूरत नहीं।

मैंने इस pipeline को scripts/lib/optimize-image.mjs में निकाला जो एक buffer लेता है, resize के साथ WebP encode चलाता है, और optimised buffer return करता है। इसे auto-blog hero pipeline, bulk re-encoding scripts, और manual-upload utility में use किया जाता है।

single helper का मतलब है कि discipline centralized है। नई scripts जिन्हें images upload करनी हैं वे same helper को call करती हैं, same compression मिलता है, same file sizes produce होते हैं। discipline किसी single engineer के sharp को run करने को याद रखने पर निर्भर नहीं करता।