Bakit Kupas ang Kulay ng Larawan Pagkatapos I-upload

Nag-edit ka ng product shot, tugma ang pula sa aktwal na jumper, ina-upload mo ito sa store mo — at bumabalik ang pula bilang brick red. Nagiging olive ang mga green. Buksan ang original sa parehong screen: perfect pa rin.

Hindi ito compression, at hindi rin "sinisira" ng platform ang mga larawan mo. Ang karaniwang dahilan ay color profile mismatch: ino-describe ng file ang mga kulay nito gamit ang isang "wika," pero binabasa ng page ang mga numerong iyon gamit ang ibang wika.

Bakit Magkaibang Kulay ang Lumalabas sa Parehong Numero

Tatlong numero ang isang pixel, at ang 200, 40, 40 ay magiging specific na pula lang kapag alam mo kung anong color space ang gumagamit nito para sukatin. Mas malayo ang itinutulak ng Display P3 sa red primary kumpara sa sRGB (x 0.68 laban sa 0.64), kaya ang parehong triplet ay naglalarawan ng mas matinding pula. Pinapanatili naman ng Adobe RGB (1998) ang eksaktong red at blue primaries ng sRGB, at ang green primary na lang ang ini-stretch nito, kaya nasa greens at cyans ang extra reach nito. Sa dalawang paraan, iba ang ibig sabihin ng mga numero para sa isang browser na nag-aassume ng sRGB.

Ang profile ay parang note na nagsasabi kung anong ruler ang ginamit, at malakas ang default ng web pag nawala ito. Malinaw ang sinasabi ng CSS Color Module Level 4: para sa compatibility, ang mga kulay na tinukoy sa HTML, at ang mga untagged na larawan, ay dapat ituring na nasa sRGB color space maliban kung may ibang tinukoy. Hindi naman tumutukoy ng iba ang untagged upload mo, kaya sRGB ang gagamitin.

Kaya kung na-export ang file mo sa Adobe RGB o Display P3 at nawala ang profile — halimbawa, may pipeline na nag-re-encode, o converter na nag-strip ng metadata — babasahin bilang sRGB ang mga wide-gamut na numerong iyon. Dahil na-squeeze sa mas makitid na assumption, lumalabas itong desaturated — ang kupas na look na 'yan. Depende sa source kung aling mga kulay ang apektado: ang Adobe RGB file na na-misread bilang sRGB ay nawawalan ng punch sa greens at cyans, habang ang Display P3 file naman ay nawawalan din ng saturated reds. Halos hindi gumagalaw ang neutrals: walang epekto sa gray packshot, pero disaster sa coral na swimsuit.

Kumpirmahin: Problema ba ito ng File o ng Screen Mo

Ilagay ang original at ang upload nang magkatabi sa isang browser window.

• Tama sa editor mo, pero flat sa browser: profile problem.
• Magkapareho sa browser pero iba sa editor mo: nagpe-preview ang editor mo sa isang working space na hindi pinapansin ng browser.
• Mali lang sa phone mo o sa laptop ng kasamahan: display difference ito, hindi problema ng file.

Pagkatapos, i-drag ang original papunta sa isang browser tab — nirerespeto ng mga browser ang naka-embed na profile. Kung tama ang local file pero mali ang upload, ibig sabihin itinapon ng upload path ang tag.

Alamin Kung Anong Profile ang Dala ng File

• macOS: buksan ang file sa Preview at i-click ang Info button sa toolbar (o pindutin ang Command-I), tapos tingnan ang More Info tab, kung saan nakalista ang color profile ng larawan.
• Photoshop: i-click ang arrow sa document status bar at piliin ang Document Profile.
• Lightroom: ang Colour Space dropdown sa export dialog ang siyang aktwal na na-ship mo.
• Kahit ano, kahit anong platform: ipapakita ito ng ExifTool — exiftool -ProfileDescription photo.jpg.

Para sa web, kahit ano maliban sa sRGB ang dapat mong suspetsahin. Nagku-capture ang mga bagong iPhone ng mga larawan sa wide color at tina-tag ang file nang naaayon — nakalista sa camera specs ng Apple ang "wide color capture for photos and Live Photos." May mga Android phone din na may wide-gamut capture option, kaya i-check ang file.

I-convert sa sRGB — Huwag I-strip o I-assign

Tatlong magkatunog na operations pero magkaiba nang husto ang ginagawa.

• Strip – inaalis ang label pero hinahayaan ang mga numero: garantisadong babasahin na ngayon bilang sRGB ang wide-gamut na data, na siya namang nagpapasama pa ng sitwasyon.
• Assign – nire-relabel nang hindi nire-recalculate, na nagbabago sa itsura — kadalasan, sa mali.
• Convert – ire-recalculate ang bawat pixel para manatiling kasing-lapit ng kulay hangga't pinapayagan ng mas maliit na space, tapos idadagdag ang sRGB tag.

Convert ang gusto mo: sa Photoshop, Edit › Convert to Profile; sa Lightroom, i-set ang export Colour Space sa sRGB. Asahan na medyo magbabago nang bahagya ang pinaka-saturated na mga kulay mo.

Ang Kabaligtaran: Screenshots na Sobrang Vivid

Parehong mekanismo, pero baliktad ang direksyon. Nire-record ng screenshot mula sa isang wide-gamut display ang mga value sa space ng display na iyon. Karaniwang naka-attach ang profile ng display kapag nag-screenshot sa macOS; may mga capture tool naman na hindi nag-a-attach nito. Kapag binasa bilang sRGB, mas saturated pa ang lumalabas sa parehong mga numero kaysa sa nakita mo: neon greens, sunburnt na balat. Parehong solusyon din.

Bakit Mahalaga Ito Kapag Pinapalitan Mo ang Background

Dito na hindi na subtle ang epekto ng mismatched profile. Maglagay ng cutout sa ibabaw ng brand color mo sa remover.bg, tapos ilagay ang larawang iyon sa isang page katabi ng isang block na may parehong hex sa CSS: mare-render ang CSS color bilang sRGB.

Kung may ibang tag ang larawan, magkatabi ang dalawang shade ng iisang kulay na ayaw talagang magtugma. Ang pag-convert sa sRGB bago mag-upload ang nag-aalis ng ambiguity mula pa sa source.

Hindi nagbabago ang pure white sa conversion, kaya hindi mabibigo ang white-background check ng isang marketplace dahil lang sa mismatch — ang mga kulay ng produkto ang naaapektuhan. At walang maisasagip sa format: may profile ang PNG, JPEG, at WebP, at lahat ng ito ay na-misread kapag nawala ang tag, kasama na ang transparent cutouts.

Bago ang Susunod Mong Upload

I-set ang export colour space sa sRGB nang isang beses, sa preset na aktwal mong ginagamit, at titigil na ang paulit-ulit na problema. Pagkatapos, i-spot-check ang isang upload laban sa original sa isang screen: kung nananatiling maayos ang mga kulay, malinis ang pipeline mo.