使用 CSS 滤镜效果和混合模式，我们现在可以利用 各种技术 在浏览器中直接对图像进行样式设置。 但是，创建美观的主题并不是滤镜效果的全部用途。 您可以使用滤镜来指示悬停状态，隐藏密码，以及现在用于 Web 性能。
在尝试使用混合模式进行双色调图像效果的性能提升（我很快就会写一篇关于这方面的文章）时，我发现了一些更令人兴奋的东西。 一个主要的图像优化优势！ 思路是降低源图像的对比度，减小其文件大小，然后使用 CSS 滤镜增强对比度！
工作原理
让我们准确地说明一下它是如何工作的。
- 使用线性变换函数降低图像对比度（Photoshop 可以做到这一点）。
- 在 CSS 中对图像应用对比度
filter以弥补对比度降低。
第一步是在允许您以线性方式降低对比度的程序中打开图像。 Photoshop 的传统模式在这方面做得很好（图像>调整>亮度/对比度）。
并非所有程序都使用相同的函数来应用图像变换（例如，这将无法与 macOS 默认图像编辑器一起使用，因为它使用不同的技术来降低对比度）。 很多用于将图像效果构建到浏览器中的工作最初是由 Adobe 完成的，因此 Photoshop 的传统模式与浏览器图像效果保持一致是有道理的。
然后，我们对图像应用一些 CSS 滤镜。 我们将使用的滤镜是contrast和（一点点）brightness。 对于 50% 的传统 Photoshop 降低，我对每个图像应用了filter: contrast(1.75) brightness(1.2);。
重大节省
这种技术对于减小图像大小，从而减小页面总重量非常有效。 在以下研究中，我使用了 4 张在 iPhone 上拍摄的鲜艳照片，使用 Photoshop 传统模式降低了 50% 的对比度，以最大质量 (10) 保存了每张照片，然后对每个图像应用了filter: contrast(1.75) brightness(1.2);。 这些是结果。
您可以使用 此处提供的实时演示 自行尝试！
在上述所有情况下，我们通过使用 CSS 滤镜降低并重新应用对比度，将图像大小节省了 23% 到 28%。 这是在将每个图像以最大质量保存的情况下。
如果您仔细观察，您会看到一些图像质量的明显损失。 这在大多数为深色图像的情况下尤其如此。 因此，这种技术并不完美，但它确实以一种有趣的方式证明了图像节省。
浏览器支持注意事项
请注意，浏览器对 CSS 滤镜的支持“相当好”。
此浏览器支持数据来自 Caniuse，其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 18* | 35 | 否 | 79 | 6* |
移动设备/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4* | 6.0-6.1* |
如您所见，Internet Explorer 和 Opera Mini 不支持。 Edge 16（当前最新版本）支持 CSS 滤镜，此技术运行良好。 您需要决定降低对比度的图像作为回退是否可接受。
重新绘制怎么办？
您可能在想：“但当我们在图像大小方面节省时，我们却给浏览器带来了更多工作，这不会影响性能吗？” 这是一个好问题！ CSS 滤镜确实会触发重新绘制，因为它们会触发window.getComputedStyle()。 让我们分析一下我们的示例。
我所做的是在 Chrome 中打开一个隐身窗口，禁用 JavaScript（只是为了确保我所拥有的扩展程序），将网络设置为“慢速 3G”，并将 CPU 设置为 6 倍减速。
虽然图像需要一段时间才能加载，但实际的重新绘制速度很快。 在 6 倍 CPU 减速的情况下，最长的单个光栅化绘制花费了 0.27 毫秒，也就是 0.00027 秒。
CSS 滤镜 源自 SVG 滤镜，并且是目前最受欢迎的 SVG 滤镜效果变换的相对浏览器优化版本。 因此我认为将其用作渐进增强是相当安全的（要了解 IE 用户和 Opera Mini 用户！）。
结论和未来
当降低图像质量时，仍然可以节省大量资源（再次强调，在这个小型研究中，图像以较高的质量保存，以获得更平衡的结果）。 通过像 ImageOptim 这样的优化器运行图像，并根据屏幕大小发送较小的图像文件大小（例如，HTML 或 CSS 中的响应式图像）将为您节省更多资源。
在 Web 性能优化领域，我认为图像性能是我们减少用户 Web 垃圾和数据的最有效方法，因为图像 是我们发送到 Web 上的最大部分（到目前为止）。 如果我们可以开始利用现代 CSS 来帮助减轻我们图像的负担，我们可以探索全新的优化解决方案。
例如，这可以进一步扩展，使用其他 CSS 滤镜，例如saturate和brightness。 我们可以利用 Gulp 和 Webpack 等自动化工具来为我们应用图像效果，就像我们使用自动化工具来通过优化器运行图像一样。 将此技术与 其他最佳实践 相结合，可以节省我们发送给用户的基于像素的资产。
这是一个非常酷的技巧。 但是…
如果用户使用此技巧保存图像，用户最终会下载没有对比度的图像吗？
我认为是的。 尽管如果您可以变得非常花哨，您可以将图像绘制到画布上，并在那里应用滤镜并导出它？
是的，您无法使用滤镜保存图像。 您需要截取屏幕截图或包含下载按钮。
此外，图像不会在以下位置显示对比度
RSS 阅读器，
自动帖子到邮件订阅者以及
在没有样式的情况下使用内容的其他任何地方（例如，移动应用程序从使用 WP Rest-API 的 WordPress 网站中提取内容）？
关于 RSS…有点取决于情况。 也许您无论如何都以自动方式应用对比度，并使用内联
<img style="filter..." />。 并非所有联合都会保留内联样式，但有些会保留。基本上是这样。过滤器是非破坏性的，因此不会对原始文件进行任何操作。
然后我们将此画布转换为数据或 blob URL，并用它替换图像 URL。
保存图像怎么办？
这应该已经内置到图像格式中了。为什么他们不利用这样的东西呢？
我相信 JPEG 实际上确实这样做了（我知道它以独立的方式对亮度进行编码和量化） - 调整其压缩可能会复制这些节省。
所有这些“重新饱和技巧”所做的就是减少调色板，从而实现更好的图像（特别是对于像 jpeg 这样的有损格式）和文件（特别是对于像 png 这样的无损格式）压缩。
你应该能够完美地减少颜色范围的多样性，而不会在颜色范围/空间中妥协，而无需所有这些来回的 CSS 废话。
我想如果你需要 IE11 支持，你可以选择 svg：将过滤器定义为 svg 过滤器，将过滤器插入 dom，使用 svg 图像标签加载图像，从 css 应用过滤器。
这几乎与降低 JPEG 压缩质量相同。降低对比度会降低像素振幅，从而降低 DCT 系数的振幅，考虑到整数 DCT 系数的分辨率有限，会增加量化。JPEG 内部使用量化表执行相同的操作。
因此，对于直接压缩，你可能最好使用 MozJPEG，它直接调整量化本身。
在某些情况下，这种预处理非常有意义，例如，如果你要将颜色渐变应用于图像，你也可以将原始图像制作成灰度（避免发送颜色通道）。或者，如果图像的一部分在过滤后会清晰可见，你可以通过模糊不太重要的部分来减少文件大小。
终于，有人真正了解 JPEG 是什么了。
说真的 - 不要使用这种技术。只需以较低的质量设置保存你的图像。你将获得相同的好处，但感知的图像质量更高，并且在 CSS 不可用时不会有任何缺点。
以下是我在从事图像处理工作时学到的另一种技巧：仅对蓝色通道添加模糊过滤器。在一定程度上，你无法真正注意到它，因为人类视觉对蓝色光感受器中的细节非常不敏感。
当然，这当然不是一个独立的解决方案，它是一种额外的图像优化！:) 人们应该始终使用压缩和优化器运行图像。
社区提示：这是一种非常粗鲁的评论方式。让我们保持一点尊重。
是的，如果用户保存图像，则会保存没有对比度的图像。当然，你仍然可以尝试将过滤后的图像放入画布元素中，这样保存就可以正常工作。
但是，你实际上所做的是减少图像信号，从而减少带宽，并在之后增强信号，从而丢失之前删除的信息。
你可以通过减少图像中的颜色数量来节省大约相同数量的字节，使用像 pngquant 这样的工具用于 PNG，mozjpeg 用于 JPEG 或者 svgo 用于 SVG。了解你的图像优化，并始终使用最佳的图像格式，甚至如何将它们混合以获得最佳效果。
很好，而且恰逢其时。我正在使用 velocity.js 来模拟全屏动画 gif，并试图在不牺牲太多质量的情况下减少图像加载延迟......这可能会有用。谢谢。
将这种技术与一些额外的过滤器结合起来，可以阻止人们从你的网站上窃取图像。至少对于那些不太积极的人来说。
现在这看起来像是一个真正实用的用例！文章应该更新以注意这个很棒的用例。
你是否尝试过简单地保存照片而不改变对比度，并确保它没有减少图片的大小？
是的！感谢你的提问。
我还使用 Photoshop 将对比度添加回来，以查看这对图像会有什么影响。我删除和重新添加对比度的起始图像和结束图像小了 5-20kb。上面的图像显示了 500-900kb 的节省！
非常感谢你提供这个信息。这是一个主要的省时工具，因为我在 Photoshop 中编辑了大量的图像，然后在 Compressor.io 中运行它们，这种组合使得优化图像非常繁琐。
好技巧。
你提供的示例都是一开始就相当大的图像尺寸，即使是最终的图像尺寸也可能不适合 web。
你是否尝试过一些更小的图像，看看是否仍然可以获得相同的字节节省百分比？
背景图像呢？我想这个技巧不能用于它们？
我认为如果你将背景图像应用于伪元素，你可以使用它。
嗯！想知道同样的概念是否可以应用于视频？
我过去曾经提到过这一点（事实上是在一次演讲中），但根据 Netflix 的说法，这在视频级别可以实现，并且可以取得成功。
创作低对比度的概念是关键。在这种情况下，后期过滤是第三位的。
所以它起作用了？太酷了！有 codepen 吗？
我认为这是一个不错的提示，但不是那么好，即使你可以节省用户下载更多数据，但你也会影响使用过滤器渲染图像的性能。
文章中有一节专门讨论这个问题。向上查找。
你好，感谢你花时间对此进行实验。这是一种有趣的方法，但根据我的实验结果，这不是一个好主意。
当您降低对比度时，压缩算法会利用这一点并应用更多有损压缩。它被允许这样做，因为对比度较低的区域细节较少，观看者不会察觉到这一点。一旦您再次拉高对比度，您就会欺骗压缩算法应用比适合的更重的压缩。
在我的测试中，使用对比度技巧的图像质量比压缩级别提高以匹配对比度技巧图像文件大小的具有可比文件大小的图像质量差。
我对你说的话没有太大疑问，但 Una 展示了测试结果，而你只是说你做了测试。发布出来吧！
这种技术当然很巧妙，但我不会使用或推荐这种技术。
这基本上是换个名字的调色板缩减。
你会引入色带。
简单地降低导出质量或位深度应该会产生类似的 - 甚至更好的 - 结果。
过滤器效果不是免费的。图像大小可能与这种权衡相关，但 27ms 不是 .00027 秒，正如文章中所声称的。它是 .027ms。
这里关于真正发生的事情的大提示是两张图像都以最高质量保存。但是，其中一张图像中删除了信息。（因此文件大小更小。你实际上是在保存之前降低了质量。）没有过滤器可以恢复删除的信息，虽然乍一看不会发现差异，但通常情况下是这样。但这也可以说是降低导出质量的结果。
这是一个很酷的技巧，但我担心它会对谷歌图片的结果产生影响。
这绝对是一个公平的观点:) 你会失去对比度，正如一些人指出的那样，这可能对摄影师和其他想要避免人们未经许可使用其图像的人来说是理想的。
它适用于 IE 10-11 吗？
啊，打错了。我的意思是 .027s。
赞赏你进行实验并跳出框框思考，但那些了解 JPEG 工作原理的人会认识到，这是一种比在较低质量设置下使用 JPEG 重新压缩图像更糟糕的技术。
JPEG 编解码器会检查你的图像并确定使用哪一系列技术才能在给定文件大小下获得最高质量的图像。你在这里建议的基本上只是 JPEG 可能用来压缩图像的算法“工具箱”中的一个“工具”。
所以这是一个很酷的想法——但不要在现实生活中这样做。只需重新编码图像，让编解码器找出如何让你获得最大的性价比。
嗨！感谢您的评论。但是，我强烈建议您阅读整篇文章，并考虑到这条评论的语气有点居高临下。例如
“那些了解 JPEG 工作原理的人会认识到，这是一种比在较低质量设置下使用 JPEG 重新压缩图像更糟糕的技术。”<– 这有点武断。
“你在这里建议的基本上只是 JPEG 可能用来压缩图像的算法“工具箱”中的一个“工具”。”<– 是的，这就是我所说的。
与你的说法相反，我实际上已经对 JPG 的工作原理进行了广泛的研究，并在今年的 An Event Apart 上通过一个小时的基于像素的媒体压缩演讲分享了这些知识，讨论图像压缩工具，并解释为什么某些技术有效，以及这些技术基于某些格式（例如 JPEG）如何压缩图像。
在这篇文章中，我总结道“将这种技术与图像优化其他最佳实践相结合，可以大幅节省我们发送给用户的基于像素的资产”，并附上了我技术编辑的关于该主题的免费在线书籍的链接。
我写这篇文章是为了描述一种优化图像的全新技术（除了标准做法之外），而不是关于一般的图像优化。在这篇文章的标题或引言中，这是否不清楚？
我不是想居高临下，但同时，我恰好是这方面的专家，因为我每天都在专业地从事图像和视频编解码器的工作，而且我并没有真的在表达我的观点——这是关于 JPEG 工作方式的**事实**。你上面提出的技术**总是**会产生图像，这些图像在**相同文件大小**的情况下**质量相同或更低**，比 JPEG 编解码器会产生的质量更低。句号。
以你上面的第一个例子为例——你降低了对比度，将文件大小从 3.2MB 降低到 2.3MB——太棒了。但是，如果你只是降低 JPEG 编解码器的质量设置，你仍然可以获得一个 2.3MB 的文件，但它的视觉保真度会比你的技术产生的图片更高。
这是因为你强迫 JPEG 使用单一技术（对比度降低）来压缩图像，而通常情况下，它会根据“人类感知/文件大小”的权衡选择多种不同技术中最好的技术，这些权衡是 JPEG 工程师几十年前研究出来的。
我不是想贬低你——聪明的人经常会无意中重新发明东西，因为他们在面对类似证据时会得出相同的逻辑结论。但你提出的东西早在很久以前就被发现了，并且已经被整合到 JPEG 标准中了。
为什么不在保存之前在编辑器中重新应用对比度，而不在浏览器中应用？在调色板减少发生后，文件大小不应该增加。
嗨，感谢您的提问。我已经简要地回答了这个问题（就在现在）。
我确实尝试过这样做，看看它是否可以从减少一些对比区域中节省图像大小。我删除并重新添加对比度的起始图像和结束图像分别小了 5-20kb。上面的图像显示了 500-900kb 的节省。
所以我觉得真正的节省来自减少的调色板。
为什么图像编解码器不使用这种技术？
没错！JPEG 已经这样做了。
与其降低对比度来“欺骗”JPEG 将文件从 3.2MB 缩小到 2.3MB，不如降低 JPEG 编解码器的输出质量。你仍然可以获得 2.3MB 的文件，但它的质量会比降低对比度后的文件更高。
是否可以添加图像比较（类似于你在“大幅节省”部分中所做的那样），将使用更高压缩系数的 JPEG 与“节省”导向的图像进行比较，从而生成与你的“节省”导向的图像相同大小的图像？例如，原始文件大小为 3.2MB，你的版本为 2.3MB——2.3MB 的 JPEG 压缩图像看起来怎么样？我知道的所有图像编辑程序都支持限制大小。
从视觉上战胜实际的 JPEG 算法将是一项了不起的成就！
我迟到了，但我觉得这可能对担心图像盗版的在线企业来说是一个非常好的技术（我特别想到了图片网站）。任何试图免费使用图像的人都会得到去饱和的版本，你可以省去那些糟糕的水印。
这实际上是一个非常好的用例。
然后用户会对图像进行截图。
但糟糕的水印也不起作用，因为图像修复技术正在不断改进。有一些算法可以完美地去除图像上的文字，其结果“足够好”。请查看 Deep Prior、LapSRN、SRResNet 或其他超分辨率图像修复技术/软件。
小偷并不一定想要原图。他们想要“足够接近”的东西，以便他们可以使用。无论是裁剪掉角落的水印、去除放在纯色背景上的水印、对图像进行截图等等。
避免艺术盗窃的最佳做法是不将艺术作品放到网上。第二种做法是接受这种行为，并尝试在法律上维护你的版权（这在互联网上是昂贵的、耗时的，而且很困难）。常见的做法是停止关心，并接受这种行为会发生。
我喜欢这种巧妙的想法。干得好，Una！
我已经在使用
filter: blur()来平滑在 Photoshop 中模糊的图像，但我必须添加这个技巧来节省更多字节。