बैच ऑप्टिमाइज़ेशन पाइपलाइन — INP/क्वालिटी/थ्रूपुट 2025

“बहुत‑सी इमेज सुरक्षित रूप से ऑप्टिमाइज़” करने के लिए पाइपलाइन चाहिए — अलग‑थलग टूल नहीं। यह लेख डिज़ाइन/ऑपरेशनल पैटर्न देता है जो INP/UX को बचाकर अनुमानित क्वालिटी देता है।

उच्च‑स्तरीय आर्किटेक्चर

• फ्रंट: ड्रैग‑एंड‑ड्रॉप, प्रोग्रेस, कैंसल
• वर्कर: नियंत्रित समानांतरता के साथ क्यू‑आधारित प्रोसेसिंग
• स्टोरेज: फिंगरप्रिंटेड नाम — सुरक्षित रिप्लेसमेंट

लिंक: मास इमेज कम्प्रेसर, एडवांस्ड कन्वर्टर

UI जो INP नहीं बिगाड़ता

• AbortController के साथ कैंसलेबल अपलोड
• भारी काम Web Worker/क्यू में; मेन थ्रेड हल्का रखें
• “ETA” के बजाय यथार्थवादी काउंट/समय

क्वालिटी प्रीसेट्स

• थंब: WebP/AVIF मध्यम→उच्च; resize प्राथमिक
• फोटो: AVIF प्राथमिक; संगतता हेतु JPEG/WebP भी दें
• UI/लोगो: PNG/WebP lossless + पैलेट रिडक्शन

ट्रांसफ़ॉर्म मैट्रिक्स

• इनपुट: PNG/JPEG/HEIC/TIFF → आउट: AVIF/WebP/JPEG
• चौड़ाइयाँ: 320/640/960/1200/1600px (sizes से संरेखित)
• रंग: स्पष्ट P3→sRGB; sRGB ICC एम्बेड करें

स्वचालित परीक्षण (उदाहरण)

expect(butteraugli(original, output)).toBeLessThan(1.2)
expect(hasICC(output)).toBe(true)
expect(readingTime(articleMdx)).toBeGreaterThanOrEqual(1)

प्रकाशन‑पूर्व चेकलिस्ट

• [ ] LCP कैंडिडेट इमेज sizes के अनुरूप
• [ ] Alt/अट्रीब्यूशन कंटेंट में ही
• [ ] फिंगरप्रिंट से सुरक्षित कैश‑इनवैलिडेशन

मॉनिटरिंग और रोलबैक

• जॉब ID टैग; फेल होने पर ओरिजिनल पर लौटें
• CDN लॉग को फॉर्मेट/चौड़ाई अनुसार देखें; हिट‑रेट ट्रैक करें
• Vitals (LCP/INP) बिगड़ें तो सुरक्षित प्रीसेट पर रोलबैक

क्यू और बैक‑प्रेशर

• प्राथमिकता वाली कतार: thumb/hero/low
• इनटेक थ्रॉटल जब आगमन > क्षमता; retry को रिफ़ाइल करें
• दृश्यता: क्यू लंबाई, प्रतीक्षा, विफलता दर

type Job = { id: string; kind: 'thumb'|'hero'|'bulk'; src: string }

समांतरता और फिर‑से‑शुरू क्षमता

• CPU/मेमोरी/रेज़ोल्यूशन से समानांतरता तय करें
• चंक्स में प्रोसेसिंग; हर 100 आइटम पर कमिट
• Idempotency: fingerprint (src + params) — प्रत्येक अनुरोध पर एक idempotency-key संग्रहीत करें

const pool = new WorkerPool({ size: Math.max(2, os.cpus().length - 1) })

स्टोरेज (S3/GCS)

• ओरिजिनल अपरिवर्तनीय; public/ वेरिएंट अलग रखें ताकि CDN सीधे सर्व कर सके
• न्यूनतम मेटाडेटा बनाए रखें (उदा. x-amz-meta-icc: srgb) ताकि रंग सुसंगत रहें
• लाइफ़सायकिल नीतियाँ: पुराने/कम‑हिट वेरिएंट्स को एक्सेस‑आधारित स्टोरेज क्लास में मूव करें

Retry/Idempotency/Expiry

• एक्सपोनेंशियल बैकऑफ़ + जिटर; प्रयासों की सीमा तय करें
• Idempotency लागू करें: इनपुट फिंगरप्रिंट (src + params) से एक स्थायी idempotency-key बनाएं ताकि रिट्राई/समांतर कार्य डुप्लिकेट आउटपुट न बनाएं
• पुराने वेरिएंट्स को key/मैनिफेस्ट द्वारा expire करें; जनरेशन टाइमस्टैम्प रखें

लागत नियंत्रण

• हॉट चौड़ाइयाँ प्री‑जेनरेट; हिट‑रेट बढ़ाएँ

ऑब्ज़र्वेबिलिटी

• लॉग: jobId, src, fmt, w, q, अवधि, bytes, error
• KPI: p50/p95/p99, सफलता, retries, OOM
• अलर्ट: p95 और फेल्योर‑रेट पर थ्रेशहोल्ड

वर्कर (उदाहरण)

import sharp from 'sharp'

export async function process(job: Job) {
  const { src } = job
  const buf = await fetchBuffer(src)
  return sharp(buf)
    .withMetadata({ icc: 'sRGB.icc' })
    .resize({ width: 1200, withoutEnlargement: true })
    .toFormat('avif', { quality: 60, effort: 4 })
    .toBuffer()
}

ट्रबलशूटिंग

• OOM → समानांतरता घटाएँ; बड़े इमेज पर स्ट्रीम/टाइलिंग
• अनियमित क्वालिटी → उद्देश्य‑आधारित प्रीसेट्स
• क्यू जाम → hero पहले; low को defer

FAQ

प्र: क्या बहुत‑सी चौड़ाइयाँ ज़रूरी हैं? उ: sizes‑संरेखित एक सीमित सेट पर्याप्त।

प्र: AVIF effort अधिक ही बेहतर? उ: 3–6 अक्सर सबसे अच्छा लागत/परफ़ॉर्मेंस संतुलन; बहुत ऊँचा थ्रूपुट घटाता है।

सार

समानांतरता नियंत्रित करें, क्वालिटी प्रीसेट मानकीकृत करें और वैलिडेशन/मॉनिटरिंग/रोलबैक शामिल करें। छोटा शुरू करें और माप के साथ iterate करें।