HDR logolar va matn: vebda #FFFFFF dan 7,5 marta yorqinlik — soverybright.com tahlili

Veb-dizayn yillab #FFFFFF — eng yorqin beyaz — chegarasida qoldi. HDR ekranlar paydo bo'lsa-da, CSS hali ham oddiy ranglar fazosida ishlaydi. Bugun bu chegarani keskin o'zgartiruvchi oddiy, lekin aqlli vosita paydo bo'ldi: soverybright.com. U logoni yuklab, qaysi ranglarning "yorqinlash" kerakligini tanlaysiz va ISO 21496-1 gain-map standartiga mos HDR JPEG olasiz. Natija: HDR ekranda tanlangan qismlar 7,5 marta (ya'ni +2,9 stop, taxminan 1500 nit) yorqinroq ko'rinadi, hokazo SDR qurilmada — oddiy, xato yo'q rasm.

Nima uchun bu muhim: veb hali SDR da yashaydi

Zamonaviy smartfon va noutbuk ekranlari 1000–2000 nit pik yorqinlikka erishadi. Ammo veb-standartlar hali ham sRGB va P3 gamutlariga, shuningdek 0–1 (yoki 0–255) diapazoniga cheklangan. CSS Color Module Level 4 va HDR Color Level 1 hali draft holatda, shuning uchun brauzerlar CSS orqali #FFFFFF dan yorqin rang berolmaydi. Gain-map JPEG (ISO 21496-1) — bu cheklovni aylantirish yo'li: ikkinchi, kichik kulrang tasvir (gain map) asosiy pikselga qanchalik yorqinlik qo'shish kerakligini ko'rsatadi. Brauzer bu xaritani o'qib, HDR rejimida pikselni oshiradi.

Vosita qanday ishlaydi: texnik tarkib

Foydalanuvchi PNG, JPEG yoki WebP yuklaydi. Interfeysda ranglarni tanlash uchun pipetta yoki avtomatik "oq ranglar" tugmasi bor. Natija — ikkita qatlamli JPEG:

• Base layer: asl rasm, o'zgarishsiz qoladi.
• Gain map: kulrang, har bir piksel uchun koeffitsient (1.0 = o'zgarish yo'q, 7.5 = maksimal yorqinlik).

Fayl hajmi ortishi minimal — gain map juda kichik va siqilgan. LinkedIn uchun alohida variyant: BT.2100 PQ piksel qiymatlari va mos ICC profil yoziladi, chunki LinkedIn gain-mapni hali qo'llab-quvvatlamaydi, lekin PQ JPEGni saqlaydi.

Qayerda ishlaydi, qayerda emas

HDR effekti faqat quyidagi shartlarda ko'rinadi:

• HDR ekran (laptop, telefon, monitor).
• Gain-map yoki PQ profillarni qo'llab-quvvatlanuvchi muhit: Chrome 137+, Safari 26 (iOS 26 / macOS Sequoia), Apple Photos, LinkedIn ilovalari.

Boshqa barcha joylarda — Firefox, eski brauzerlar, SDR monitorlar, Telegram, Twitter, Instagram — fayl oddiy JPEG sifatida ko'rinadi. Hech narsa buzilmaydi, chunki base layer o'zgarilmagan.

Matnni ham yorqinlashtirish: CSS hili

Eng qiziq qism — matn. CSS hali #FFFFFF dan oshiq rang berolmasa-da, background-clip: text orqali matn ichiga rasm "boyoq" sifatida joylashtirish mumkin. Vosita 64×64 piksel, to'liq oq, 7,5× gain-mapli JPEG (1,3 KB) tayyorlaydi. Keyin CSS:

@media (dynamic-range: high) {
  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .hdr-text {
      background: url("white-7.5x.jpg") center / cover;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  }
}

@media (dynamic-range: high) — faqat HDR ekranda ishga tushadi. SDR, Firefox, print versiyalarda haqiqiy rang (masalan, color: #111) qoladi. Bu yechim filter: brightness() dan farqli ravishda, kompoziya SDR bo'lgan sahifada ham CSS rangining o'zini o'zgartirmasdan, faqat HDR kontent uchun "headroom" yaratarak ishlaydi.

Cheklovlar va amaliy maslahatlar

Muallif to'g'ri eslatib o'tadi: har qanday rang yorqinlashtirib bo'lmaydi. Qong'ir ranglarni kuchaytirish "yuvilgan neyon" effekti beradi. Eng yaxshi natija — yorqin, beyazga yaqin elementlar qorong'i fon ustida. Matn uchun: faqat sarlavhalar va aksentlar. To'liq paragrafni 1500 nitga ko'tarish — ko'z charchagan holda o'qilmasligi uchun "dushman". ::selection rangini ham belgilash kerak, aks holda tanlangan matn ko'rinmasligi mumkin.

Nima uchun bu — rasm, emas, CSS rangi emas

Ba'zi developerlar so'raydi: "Nima uchun filter: brightness(7.5) ishlamaydi?" Sabab oddiy: brauzer sahifani SDR fazoda kompozitsiya qiladi. Filtr va blend-rejimlar CSS rangini #FFFFFF dan oshira olmaydi. Gain-map JPEG esa alohida HDR kontent sifatida uzatiladi — bu farq fundamental.

Kelajak va hozirgi holat

Hozircha bu — "progressive enhancement" uslubida kengaytirish. Asosiy brend ranglarini HDR da chiroyli ko'rsatish, LinkedIn postlarida diqqat tortish, marketing sahifalarda sarlavhalarni ajratish uchun mos. Ammo standartlashtirish davomiydir: CSS Color HDR Level 1 qabul qilinsa, kelajakda color: rgb(1 1 1 / 1) / 2.9 kabi yozuvlar rasm keraksiz qilishi mumkin. Hozircha soverybright.com — bu yo'lning eng oddiy va bepul nuqtai.

Vosita hech narsa saqlamaydi, serverda qayta ishlovchi qism yo'q — barcha hisoblash brauzerda (WebAssembly/Canvas) amalga oshiriladi. Bu xavfsizlik va tezlik uchun yaxshidir. Agar sizda HDR ekranli qurilma bo'lsa, hoziroq sinab ko'ring: oq yozuv qora fon ustida qanday "yong'in" olishi — bu veb-ranglar yangi bosqichining oldindan ko'rinishi.

Asl manba: soverybright.com