P3→sRGB रंग स्थिरता — व्यावहारिक मार्गदर्शिका 2025

अगर रंग “फीके” या “अत्यधिक ज्वलंत” दिखें, तो अक्सर फ़ाइल के ICC प्रोफ़ाइल और ब्राउज़र इम्प्लीमेंटेशन के बीच असंतुलन दोषी होता है। यह गाइड स्टूडियो से पब्लिश तक रंग की स्थिरता बनाए रखने का न्यूनतम मार्ग दिखाता है।

डिज़ाइन टूल (Photoshop/Sketch/Figma/Illustrator, आदि) रंग‑स्थान को अलग तरह हैंडल करते हैं; एक्सपोर्ट पर ICC गिरने से रंग भटक जाते हैं। डिलीवरी साइड पर SNS/email/OGP बहुधा ICC हटा देते हैं। क्रॉस‑चैनल बेसलाइन के रूप में sRGB सबसे सुरक्षित है।

मुख्य रणनीति

1. मास्टर को P3/16‑bit में रखें; डिलीवरी एसेट्स को स्पष्ट रूप से sRGB/8‑bit में कन्वर्ट करें
2. ICC ठीक से एम्बेड करें (या sRGB स्पष्ट रूप से घोषित करें)
3. JPEG/WebP/AVIF के नोट्स/सीमाएँ समझें

टिप्पणी: CSS Color Level 4 वेब पर P3 सपोर्ट बढ़ाता है, पर अगर इमेज ICC और CSS कलर मैनेजमेंट असंगत हैं, तो विज़ुअल टूटेगा। OGP/email/ads जैसे चैनलों के लिए sRGB‑first सोचें।

यह भी देखें: कलर मैनेजमेंट के मूल, प्रैक्टिस में P3

फ़ॉर्मेट‑नोट्स

AVIF

• sRGB घोसित करने हेतु nclx का प्रयोग; P3→sRGB रूपांतरण पहले करें
• कम क्वालिटी पर पहले saturation टूटती है; फोटो के लिए quality 50–65 से जाँच शुरू करें
• सर्वर पर रूपांतरण के बाद Cache-Control और stale-while-revalidate के साथ कैश करें

WebP

• एम्बेडेड ICC सपोर्टेड। UI में पोस्टराइज़ेशन जोखिम पर PNG पर विचार करें
• <picture> में srcset type के साथ WebP/AVIF/JPEG स्पष्ट करें

PNG

• UI/लोगो fidelity के लिए उम्दा। ICC रखें; अनावश्यक chunks (tEXt आदि) हटाएँ
• Vary: Accept सहित हेडर सेटिंग्स बनाए रखें ताकि JPEG fallback सही रहे

JPEG

• ICC स्पष्ट रूप से एम्बेड करें। मोबाइल पर अभी भी मज़बूत
• रेस्पॉन्सिव इमेज के लिए srcset/sizes और LCP कैंडिडेट पर fetchpriority="high"

配信とヘッダ設計の例

• Cache-Control と stale-while-revalidate を併用し、色変換済みアセットを長期キャッシュ
• CDN では Vary: Accept で AVIF/WebP/JPEG を安全にネゴシエート
• <picture> で type と srcset を明示し、フォールバックを確保

ऑटोमेशन स्निपेट्स (दृष्टांत)

# sRGB में स्पष्ट कन्वर्ज़न (ImageMagick)
magick input-p3.tif -colorspace sRGB -profile sRGB.icc -strip output-srgb.tif

# AVIF एक्सपोर्ट (sharp समतुल्य)
sharp output-srgb.tif --avif quality=60 chromaSubsampling=4:2:0

# WebP एक्सपोर्ट (cwebp)
cwebp -q 80 -m 6 -metadata icc -af output-srgb.tif -o output.webp

QA चेकलिस्ट

• [ ] ब्राउज़र/OS कॉम्बिनेशन पर रेंडरिंग तुलना (Canvas सहित)
• [ ] थंब/OGP/आदि के लिए sRGB फोर्स करें (प्लेटफ़ॉर्म re‑encode मानें)
• [ ] प्रिंट‑फ्लो अलग CMYK पाइपलाइन में रखें

Rendering intent (संक्षेप)

Rendering intent out‑of‑gamut रंगों के परिणाम बदलता है।

• Relative Colorimetric
  • white point मिलाता; बाहर‑गैमट रंग सीमाबिंदु पर क्लिप
  • UI/ब्रांड/लोगो के लिए बेहतर
• Perceptual
  • समग्र संबंध बचाने हेतु व्यापक मैपिंग
  • फोटो/ग्रेडिएंट/स्किन‑टोन में बेहतर
• Saturation
  • vividness प्राथमिक; प्रोडक्शन में विरल

व्यावहारिक टिप: P3→sRGB में फोटो हेतु Perceptual, UI हेतु Relative लें। मिश्रित पेज में लेयर अलग कर एक्सपोर्ट करें या तत्व अलग‑अलग प्रोसेस करें।

# ImageMagick: rendering intent चुनना
magick input-p3.tif \
  -intent Perceptual \
  -profile P3.icc -profile sRGB.icc \
  -strip output-srgb-perceptual.tif

ऐप‑विशिष्ट नोट्स (मैदान से)

• Photoshop
  • P3/16‑bit + ICC; sRGB soft‑proof करें
  • Export: “Convert to sRGB” + ICC शामिल
• Illustrator
  • डॉक्यूमेंट RGB; डिज़ाइन में Display‑P3 सेट करें
  • Export: sRGB में कन्वर्ट; SVG में color-gamut: sRGB सत्यापित
• Figma/Sketch
  • प्रीव्यू डिवाइस‑निर्भर; एक्सपोर्ट पर sRGB फोर्स करें
  • मिलेजुले बैकग्राउंड/alpha पर रंग पुनः जाँचें

संदर्भ: प्रैक्टिस में P3, कलर मैनेजमेंट के मूल

मापन व सत्यापन (ΔE & डिवाइसेज़)

• लक्ष्य: लोगो/UI ΔE ≤ 2; फोटो ΔE ≤ 3 आमतौर पर दृश्य‑रूप से करीब
• iPhone P3 और sRGB‑like लैपटॉप पर तुलना करें
• टेस्ट पैटर्न: ग्रेडिएंट, स्किन‑टोन, ब्रांड‑कलर

# उदाहरण: टेस्ट पैच तुलना (pseudo)
compare-dE input-p3.tif output-srgb.jpg --ref sRGB.icc --patches skin,brand,gradients

ऑटोमेशन पाइपलाइन (Node/Sharp – उदाहरण)

import sharp from 'sharp'

async function toSRGB(input: Buffer) {
  return sharp(input, { unlimited: true })
    .withMetadata({ icc: 'sRGB.icc' })
    .pipelineColorspace('srgb')
    .toFormat('avif', { quality: 60, effort: 5 })
    .toBuffer()
}

Ops टिप: पारदर्शी UI/आइकन PNG/WebP में रखें। AVIF nclx के साथ sRGB घोषित करें — wide‑gamut को डिलीवरी एसेट में न लाएँ।

लक्षण → कारण → समाधान

• फोटो फीकी → कन्वर्ज़न में Relative से क्लिप → Perceptual आज़माएँ
• लोगो रंग डिफ्ट → एक्सपोर्ट पर ICC खोया → sRGB कन्वर्ज़न + ICC सहित पुनः एक्सपोर्ट
• SNS/OGP में शिफ्ट → प्लेटफ़ॉर्म re‑encode → sRGB/JPEG प्रकाशित कर पब्लिश बाद सत्यापित

FAQ

प्र: क्या P3 में AVIF भेजना चाहिए? उ: ब्राउज़र सपोर्ट बढ़ रहा है, पर SNS/app/email जैसे चैनल नाज़ुक हैं। sRGB को baseline मानें।

प्र: इमेज रंग CSS color(display-p3 …) से अलग क्यों? उ: इमेज ICC और CSS कलर‑मैनेजमेंट असिंक हैं। दोनों को संरेखित करें और सत्यापित करें।

सार

“वाइड‑गैमट में बनाएं; sRGB में भरोसेमंद रूप से भेजें।” रंग‑त्रुटियाँ गुणवत्ता रिग्रेशन बनती हैं और SEO पर असर डालती हैं। प्रकाशित करने से पहले प्रमुख डिवाइस पर परीक्षण करें और ICC/ΔE चेकलिस्ट अपनाएँ।