Vì sao ảnh của bạn bị bợt màu sau khi tải lên

Bạn chỉnh một tấm ảnh sản phẩm, màu đỏ khớp đúng chiếc áo len ngoài đời, bạn tải nó lên cửa hàng của mình — rồi màu đỏ quay về thành màu gạch. Các mảng lục ngả sang ô liu. Mở file gốc trên đúng màn hình đó: vẫn hoàn hảo.

Đó không phải do nén, và nền tảng kia cũng chẳng hề "phá hỏng" ảnh của bạn. Nguyên nhân thường gặp là lệch hồ sơ màu: file mô tả màu sắc của nó bằng một ngôn ngữ, còn trang web lại đọc những con số ấy bằng một ngôn ngữ khác.

Vì sao cùng những con số lại cho ra hai màu khác nhau

Một pixel là ba con số, và 200, 40, 40 chỉ là một sắc đỏ cụ thể khi bạn biết không gian màu nào đang đo nó. Display P3 đẩy màu cơ bản đỏ ra xa hơn sRGB (x 0,68 so với 0,64), nên cùng bộ ba ấy lại mô tả một sắc đỏ sâu hơn. Adobe RGB (1998) giữ nguyên đúng màu cơ bản đỏ và lam của sRGB, thay vào đó kéo giãn màu lục, nên phần vươn thêm của nó nằm ở các sắc lục và xanh lơ. Dù theo hướng nào, những con số đó cũng mang ý nghĩa khác đi với một trình duyệt đang mặc định sRGB.

Hồ sơ màu chính là mẩu ghi chú cho biết cây thước nào đã được dùng, và khi nó biến mất, web sẽ mặc định một cách rất dứt khoát. CSS Color Module Level 4 nói rõ: để tương thích, các màu được chỉ định trong HTML và những ảnh không gắn thẻ phải được coi là nằm trong không gian màu sRGB, trừ khi có chỉ định khác. Bản tải lên không gắn thẻ của bạn chẳng bao giờ chỉ định gì khác, nên nó là sRGB.

Vậy nên nếu file của bạn được xuất ở Adobe RGB hay Display P3 mà hồ sơ màu bị đánh rơi — một quy trình mã hóa lại, một công cụ chuyển đổi cắt bỏ metadata — thì những con số thuộc gam màu rộng ấy sẽ bị đọc như sRGB. Bị ép vào một giả định hẹp hơn, chúng hiện ra nhạt bệch — chính là vẻ bợt màu bạn đang thấy. Màu nào chịu thiệt còn tùy vào nguồn: một file Adobe RGB bị đọc nhầm thành sRGB sẽ mất độ rực ở các sắc lục và xanh lơ, còn file Display P3 thì đánh rơi cả những sắc đỏ bão hòa. Các màu trung tính gần như không nhúc nhích: chẳng hề gì với một ảnh packshot nền xám, nhưng là thảm họa với bộ đồ bơi màu san hô.

Xác nhận lỗi nằm ở file, không phải ở màn hình

Hãy đặt file gốc và bản đã tải lên cạnh nhau trong cùng một cửa sổ trình duyệt.

• Đúng màu trong trình chỉnh sửa, bẹt màu trên trình duyệt: vấn đề hồ sơ màu.
• Giống hệt nhau trên trình duyệt nhưng khác với trình chỉnh sửa: trình chỉnh sửa của bạn đang xem trước trong một không gian làm việc mà trình duyệt bỏ qua.
• Chỉ sai trên điện thoại của bạn hoặc laptop của đồng nghiệp: khác biệt màn hình, không phải lỗi file.

Sau đó hãy kéo file gốc vào một tab trình duyệt — trình duyệt tôn trọng hồ sơ màu được nhúng. Nếu file trên máy hiển thị đúng còn bản tải lên thì không, tức là đường tải lên đã vứt bỏ thẻ màu.

Xem file của bạn đang mang hồ sơ màu nào

• macOS: mở file bằng ứng dụng Xem trước (Preview) rồi bấm nút Info trên thanh công cụ (hoặc nhấn Command-I), sau đó xem tab More info, nơi liệt kê hồ sơ màu của ảnh.
• Photoshop: bấm vào mũi tên trên thanh trạng thái tài liệu và chọn Document Profile.
• Lightroom: menu Color Space trong hộp thoại xuất file mới là thứ bạn đã thực sự gửi đi.
• Mọi thứ, mọi nền tảng: ExifTool in ra ngay — exiftool -ProfileDescription photo.jpg.

Với web, bất cứ thứ gì khác sRGB đều là đối tượng khả nghi. Các mẫu iPhone gần đây chụp ảnh ở dải màu rộng và gắn thẻ file tương ứng — Apple ghi rõ "wide color capture for photos and Live Photos" trong thông số camera. Một số máy Android cũng có tùy chọn chụp gam màu rộng, nên hãy kiểm tra file.

Hãy chuyển đổi sang sRGB — đừng cắt bỏ hay gán

Ba thao tác nghe na ná nhau nhưng làm những việc rất khác nhau.

• Cắt bỏ (strip) gỡ đi cái nhãn và để nguyên những con số: dữ liệu gam màu rộng giờ cầm chắc sẽ bị đọc thành sRGB, khiến mọi thứ tệ hơn.
• Gán (assign) dán lại nhãn mà không tính toán lại, làm thay đổi diện mạo, và thường là theo hướng sai.
• Chuyển đổi (convert) tính lại từng pixel để màu bám sát nhất có thể trong giới hạn của không gian hẹp hơn, rồi gắn thẻ sRGB vào.

Chuyển đổi mới là thứ bạn cần: Edit › Convert to Profile trong Photoshop, hoặc đặt Color Space khi xuất file trong Lightroom thành sRGB. Hãy chuẩn bị tinh thần rằng những màu bão hòa nhất sẽ dịch đi một chút.

Trường hợp ngược lại: ảnh chụp màn hình trông quá rực

Cùng cơ chế, ngược chiều. Ảnh chụp màn hình từ một màn hình gam màu rộng ghi lại các giá trị màu trong không gian của chính màn hình đó. Ảnh chụp màn hình trên macOS nhìn chung được lưu kèm hồ sơ màu của màn hình; những công cụ chụp khác có thể không đính kèm gì cả. Khi bị đọc lại như sRGB, cũng những con số ấy lại hiện ra bão hòa hơn những gì bạn đã thấy: lục neon, da như cháy nắng. Cách khắc phục vẫn thế.

Vì sao điều này quan trọng khi bạn thay phông nền

Đến đây thì một hồ sơ màu lệch không còn là chuyện tinh tế nữa. Hãy đặt một ảnh tách nền lên màu thương hiệu của bạn trong remover.bg, rồi đưa bức ảnh đó lên một trang web, cạnh một mảng đúng mã hex ấy dựng bằng CSS: màu CSS được hiển thị theo sRGB.

Nếu bức ảnh mang một thẻ màu khác, hai sắc độ của cùng một màu sẽ nằm cạnh nhau mà nhất định không chịu khớp. Chuyển đổi sang sRGB trước khi tải lên sẽ xóa bỏ sự mập mờ ấy ngay từ gốc.

Màu trắng thuần vượt qua quá trình chuyển đổi mà không suy suyển, nên chỉ riêng chuyện lệch hồ sơ màu sẽ không làm bạn trượt khâu kiểm tra phông nền trắng của sàn thương mại — thứ chịu thiệt là màu của sản phẩm. Và định dạng cũng chẳng cứu được: PNG, JPEG và WebP đều mang theo hồ sơ màu, và đều bị đọc sai khi thẻ màu biến mất, kể cả ảnh tách nền trong suốt.

Trước lần tải lên tiếp theo

Hãy đặt không gian màu khi xuất file thành sRGB một lần duy nhất, ngay trong preset bạn thực sự dùng, và vấn đề sẽ thôi tái diễn. Sau đó hãy kiểm tra ngẫu nhiên một bản tải lên đối chiếu với file gốc trên cùng một màn hình: nếu màu sắc giữ nguyên, quy trình của bạn đã sạch.