对比度交换技术：使用CSS过滤器提高图像性能

使用CSS过滤效果和混合模式，我们现在可以利用各种技术直接在浏览器中设置图像样式。然而，创造审美主题并不是过滤效果的全部好处。您可以使用过滤器来指示悬停状态、隐藏密码，现在可以使用它来提高web性能。在使用混合模式来获得duotone图像效果的评测性能时（我很快会就此撰写一篇文章），我发现了更令人兴奋的事情。一个重大的形象优化胜利！这个想法是减少源图像中的图像对比度，减少其文件大小，然后用CSS过滤器增强对比度！从图像开始，然后去除对比度，然后用CSS过滤器重新应用它。去除第一步是在一个程序中打开你的图像，让你以线性的方式线性降低对比度。Photoshop的传统模式在这方面做得很好（Image>；Adjustments>；Brightness/Contrast）：您可以通过Photoshop CC中的Image>；Adjustments>；Brightness/Contrast访问此屏幕。并非所有程序都使用相同的函数来应用图像变换（例如，这将不适用于macOS默认图像编辑器，因为它使用不同的技术来降低对比度）。在浏览器中构建图像效果的很多工作最初都是由Adobe完成的，因此PS图象处理软件的传统模式与浏览器的图像效果保持一致是有意义的。然后，我们将一些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过滤器起源于SVG过滤器，并且是相对浏览器

对比度交换技术：使用CSS过滤器提高图像性能

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么