P3 इमेज डिलीवरी गाइड 2025 — sRGB फॉलबैक के साथ सुरक्षित, वास्तविक डिवाइस पर सत्यापन

कई आधुनिक डिवाइस P3 सपोर्ट करते हैं, पर non‑P3 अभी भी मौजूद हैं. ब्रेक से बचने के लिए, P3 के साथ sRGB फॉलबैक दें.

यह लेख “सरप्राइज़ बिना P3” का व्यावहारिक तरीका देता है: ICC एम्बेडिंग, टैग्ड JPEG/AVIF, HTML/Next उदाहरण और CI डिफ चेक्स.

सम्बंधित: /hi/articles/color-management-srgb-p3-cmyk-handoff-2025 / कलर मैनेजमेंट व ICC प्रोफ़ाइल रणनीति 2025 — स्थिर वेब रंगों के लिए व्यावहारिक गाइड

एक्सपोर्ट बेसिक्स

• P3 एसेट्स में हमेशा ICC एम्बेड करें
• sRGB संस्करण रखें (महत्वपूर्ण जगहों पर डबल‑डिलीवरी ठीक है)
• एक ही कलर‑स्पेस में प्रोसेस करें; मल्टी‑स्टेज कन्वर्ज़न से बचें

ICC हैंडलिंग

• P3: Display P3 (D65 / 2°) एम्बेड करें. टोन कर्व sRGB के क़रीब रखें
• sRGB: प्रोफाइल स्पष्ट रूप से एम्बेड करें (अनटैग्ड न रखें)

फ़ॉर्मैट/कोडेक टिप्स

• फ़ोटो: AVIF/JPEG XL (जब उपलब्ध) > WebP > JPEG. ICC रिटेंशन सत्यापित करें
• UI/इल्युस्ट्रेशन: PNG/SVG. P3 के लाभ सीमित; पैलेट शिफ्ट के विरुद्ध वैलिडेट करें
• प्राथमिकता: “P3 बनाम sRGB लुक पर्याप्त रूप से कंसिस्टेंट रहे” — ओवरसैचुरेशन/स्किन‑टोन शिफ्ट से बचें

डिलीवरी पैटर्न

1. Srcset जनरेटर से type + srcset बनाएँ
2. P3/sRGB स्विच मीडिया क्वेरी या MIME से करें. कठिन हो तो P3 को सिर्फ hero/product तक सीमित रखें
3. आकस्मिक बदलाव पकड़ने को CI में स्क्रीनशॉट डिफ जोड़ें

HTML पैटर्न

<picture>
  <source type="image/avif" srcset="hero-p3.avif" media="(color-gamut: p3)">
  <source type="image/avif" srcset="hero-srgb.avif">
  <img src="hero-srgb.jpg" width="1200" height="800" alt="hero" />
</picture>

(color-gamut: p3) wide‑gamut क्षमता का अनुमान देता है. परफेक्ट नहीं; P3 को केवल हाई‑इम्पैक्ट हिस्सों में रखें.

Next.js उदाहरण

<picture>
  <source srcSet={p3Avif} type="image/avif" media="(color-gamut: p3)" />
  <source srcSet={srgbAvif} type="image/avif" />
  <img src={srgbJpg} width={1200} height={800} alt="hero" />
</picture>

Next/Image के साथ, unoptimized का उपयोग करें या कलर‑मैनेज्ड ट्रांसफॉर्म सुनिश्चित करें; कुछ ऑप्टिमाइज़र ICC हटा देते हैं. ऐसे में हस्तनिर्मित <picture> सुरक्षित है.

वेरिफ़िकेशन

• एक P3‑कॅपेबल और एक sRGB‑लिमिटेड डिवाइस पर तुलना करें
• ग्रेडिएंट और सैचुरेशन/क्लिप व्यवहार देखें

वास्तविक डिवाइसेज़ पर क्या देखें

• स्किन‑टोन में लाल/पीला बायस शिफ्ट
• ब्रांड कलर में ओवर‑सैचुरेशन (“पेंटेड” न लगे)
• गलत गामा/क्वांटाइज़ेशन से बैंडिंग

CI डिफ (आइडिया)

function meanDeltaE(imgA: Uint8ClampedArray, imgB: Uint8ClampedArray): number {
  return 1.8; // उदाहरण
}

if (meanDeltaE(p3Shot, srgbShot) > 3.0) {
  throw new Error('कलर डिफ बहुत बड़ा: कृपया P3 कन्वर्ज़न रिव्यू करें');
}

FAQ

• प्र: ब्राउज़र को P3 में फोर्स कर सकते हैं? उ: विश्वसनीय नहीं. ICC एम्बेड करें और हार्डवेयर पर जाँचें.
• प्र: मेरा JPEG ICC खो देता है. उ: कुछ टूल्स ICC हटाते हैं. --icc/“preserve metadata” विकल्प लें और exiftool -icc_profile -G1 से जाँचें.
• प्र: डबल‑डिलीवरी भारी है? उ: P3 को उच्च‑प्रभाव क्षेत्रों तक सीमित रखें. बाकी sRGB.

सारांश

“हर जगह वाइड” मत बनें. जहाँ मायने रखता है वहाँ P3, बाकी sRGB मज़बूत रखें.

परिशिष्ट: मिनी पाइपलाइन (उदाहरण)

magick in_srgb.jpg -colorspace DisplayP3 -profile DisplayP3.icc out_p3.jpg
avifenc --icc out_p3.jpg out_p3.avif
magick out_p3.jpg -colorspace sRGB -profile sRGB.icc out_srgb.jpg

अतिरिक्त जाँच

exiftool -icc_profile -G1 out_p3.jpg out_p3.avif out_srgb.jpg
exiftool -ColorSpace -ProfileDescription out_p3.jpg