वेब पर Display‑P3 2025 — व्यावहारिक वर्कफ़्लो

वाइड‑गैमट इमेज उत्पाद फ़ोटो और ग्राफ़िक्स को स्पष्ट रूप से बेहतर बनाती हैं। साथ ही sRGB परिवेश के साथ अनुकूलता बनाए रखना ज़रूरी है। यह गाइड निर्माण से लेकर डिलीवरी तक, CSS/HTML हैंडलिंग और फ़ॉलबैक सहित, रंग संबंधी समस्याओं से बचने के लिए मुख्य बिंदु संक्षेप में बताता है।

मूल रणनीति

• मास्टर: P3/16‑bit फ़्लोट (या उच्च बिट‑डेप्थ) के साथ नॉन‑डिस्ट्रक्टिव एडिट्स
• डिलीवरी: image-p3 (AVIF/WebP) और image-srgb, क्लाइंट क्षमता के आधार पर स्विच
• sRGB सामान्यीकरण: सही ICC एम्बेड करें या स्पष्ट रंग‑स्थान रूपांतरण करें (टैग/पिक्सेल असंगति से बचें)

रूपांतरण पाइपलाइन उदाहरण

# ImageMagick के साथ स्पष्ट रूपांतरण (उदाहरणार्थ)
magick input-p3.tif \
  -colorspace RGB -alpha on \
  -profile DisplayP3.icc \
  -profile sRGB.icc \
  -define webp:lossless=false -quality 82 output-srgb.webp

magick input-p3.tif \
  -profile DisplayP3.icc \
  -define heic:speed=3 -define heif:primary=true output-p3.avif

CSS/HTML नोट्स

• समर्थित होने पर P3 थंबनेल/हीरो को प्राथमिकता देने के लिए @media (color-gamut: p3)
• sRGB/P3 स्विच के लिए image-set() (वैकल्पिक रूप से type("image/avif") के साथ)
• टेक्स्ट/alt/बैकग्राउंड के लिए sRGB मानकर कॉन्ट्रास्ट सुनिश्चित करें (WCAG 2.2)

.hero {
  background-image: image-set(
    url('/img/hero-srgb.avif') 1x type('image/avif'),
    url('/img/hero-srgb.webp') 1x type('image/webp')
  );
}

@media (color-gamut: p3) {
  .hero {
    background-image: image-set(
      url('/img/hero-p3.avif') 1x type('image/avif'),
      url('/img/hero-p3.webp') 1x type('image/webp')
    );
  }
}

आम गलतियाँ

• एम्बेडेड ICC और वास्तविक पिक्सेल स्पेस का बेमेल → अप्रत्याशित सैचुरेशन/टोन शिफ्ट
• केवल थंबनेल P3 और मुख्य इमेज sRGB → पेज के भीतर रंग असंगति
• HDR/SDR का मिश्रण → CSS/Canvas कंपोज़िटिंग में गामा असंगति

QA चेकलिस्ट

• विविध ब्राउज़र/OS पर A/B तुलना
• imagemagick identify -verbose से ICC/चैनल की जाँच
• स्वचालित परीक्षण: स्क्रीनशॉट डिफ़ और हिस्टोग्राम तुलना

प्रश्नोत्तर

• प्र: क्या सभी इमेज P3 में भेजें?

• उ: नहीं। स्पष्ट लाभ वाले एसेट्स (हीरो/प्रोडक्ट) तक सीमित रखें। कई इमेज sRGB में पर्याप्त हैं।

• प्र: सिर्फ टैग के साथ P3 भेजना ठीक है?

• उ: कुछ परिवेश टैग का गलत अर्थ निकालते हैं। महत्वपूर्ण मार्गों के लिए स्पष्ट रूपांतरण करें और अंतिम ICC को पिक्सेल से मिलाएँ।