srgb色彩空间_网页设计师的色彩:了解sRGB

srgb色彩空间

The desire for the color of elements to appear consistently on the web across different devices and screens has long been a quest for web designers. However, with the vast majority of people unaware of how to properly color calibrate their monitors beyond crude and often ignorant manipulation of brightness and contrast controls, the quest always seemed a pipe dream.

长期以来,网页设计人员一直希望将元素的颜色显示在不同设备和屏幕上的网页上。 但是,由于绝大多数人不知道如何对显示器进行适当的色彩校准,而不仅仅是对亮度和对比度控件的粗暴和无知的操纵,因此,这一任务似乎一直是个白日梦。

This is beginning to change. The first hurdle – a broad agreement on a standardized color space and gamma – was reached in 1996, in the form of a standard called sRGB. Device and application support for the sRGB color profile – including digital cameras, scanners, printers, HD televisions, monitors, and design tools like PhotoShop – is now widespread.

这开始改变。 第一个障碍-关于标准化色彩空间和伽玛的广泛协议-于1996年以称为sRGB的标准形式达成。 如今,对sRGB颜色配置文件的设备和应用程序支持已广泛普及,包括数码相机,扫描仪,打印机,高清电视,显示器和设计工具(如PhotoShop)。

Color management is also supported in modern browsers, including Firefox 3.6 and higher, Safari 5+ (include Mobile Safari) and Internet Explorer 9 (although IE’s support comes with one important caveat). Chrome and Opera both lack support for color management as of this writing.

现代浏览器(包括Firefox 3.6和更高版本,Safari 5+(包括Mobile Safari)和Internet Explorer 9)也支持颜色管理(尽管IE的支持附带了一个重要的警告)。 在撰写本文时,Chrome和Opera均不支持颜色管理。

The browser color management process could be simply described as this:

浏览器颜色管理过程可以简单地描述为:

  1. The browser reads the monitor settings, to understand how the user’s system displays color. (This is the part that IE currently skips).

    浏览器读取监视器设置,以了解用户系统如何显示颜色。 (这是IE当前跳过的部分)。
  2. The browser reads the image file, and attempts to determine its color profile (i.e. how it was displayed on the original creator’s system). “Untagged” images (those without an embedded color profile) are assumed to be sRGB.

    浏览器读取图像文件,并尝试确定其颜色配置文件(即,它在原始创建者的系统上的显示方式)。 假定“未标记”图像(那些没有嵌入的颜色配置文件)是sRGB。
  3. By understanding the color profile of both the image and the monitor, the browser can map one to the other to preserve the best image quality.

    通过了解图像和监视器的色彩配置文件,浏览器可以将一个映射到另一个以保持最佳图像质量。

If any of these steps is skipped, the color in the final image is likely to be compromised: it will usually appear over saturated or washed-out. To avoid this issue, the suggested workflow for color management on the web is:

如果跳过这些步骤中的任何一个,则最终图像中的颜色可能会受到损害:通常会显示为饱和或褪色。 为避免此问题,建议的Web颜色管理工作流程为:

  1. Work in whatever RGB color space you prefer (Adobe RGB is a general recommendation), but always convert to sRGB for export. (Adobe PhotoShop 5.5 does this by default in the Save For Web option).

    可在您喜欢的任何RGB颜色空间中工作(一般建议使用Adobe RGB),但始终转换为sRGB以进行导出。 (默认情况下,Adobe PhotoShop 5.5在“另存为Web”选项中执行此操作)。
  2. You may wish to tag your JPEG image (“Embed Color Profile”) for greater color profile support across browsers. The downside of this is that doing so will usually increase the file size by a few kilobytes. GIF and PNG files will be tagged during export from PhotoShop by default.

    您可能希望标记JPEG图像(“嵌入的颜色配置文件”),以在浏览器中更好地支持颜色配置文件。 这样做的缺点是这样做通常会使文件大小增加几千字节。 默认情况下,在从PhotoShop导出期间,将对GIF和PNG文件进行标记。

资源资源 (Resources)

Gary Ballard has an excellent tutorial on web browser color management. While focussed primarily on WordPress, OM4 has very good resources on color profiles, sRGB and workflow.

加里·巴拉德(Gary Ballard) 在网络浏览器色彩管理方面有出色的教程 。 虽然OM4主要专注于WordPress,但在颜色配置文件,sRGB工作流程方面拥有非常好的资源。

翻译自: https://thenewcode.com/392/Color-for-Web-Designers-Understanding-sRGB

srgb色彩空间

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值