Web 质量影像始终是在使用尽可能小的档案大小同时提供良好影像质量之间的平衡行为。直接从您的数码单反相机上嵌入照片可能看起来不错，但它会减慢您的网站的负载，而过度压缩的影像可能会提高您网站的速度，但会损害设计和整体审美。

　　对于我们主要处理的两种类型的影像资产：照片和图示/插图。我们执行影像质量检查和压缩技术的混合，在大多数情况下都能很好地工作。
 
　　档案类型以及何时使用它们
 
　　我们在构 WordPress 建网站时使用三种影像档案类型：jpg 、 png 和 svg 。
 
　　JPG 最适合用于风景，风景或人物等照片。对于内容中的影像，例如部落格文章影像，我们的目标是 20-70kb 。较大的背景照片可以达到 500kb，但 200kb 是一个很好的平均值。
 
　　JPG 是有损的（每次汇出时它们会重新压缩并降低影像质量），并且它们不能很好地管理渐变。如果影像中有渐变，有时可以将影像分成两个切割，以便您可以使用 CSS 渐变在单独的背景中渲染渐变。
 
　　PNG 最适用于徽标和图示等资产，因为它们支持透明度，因为徽标和图示通常使用更有限的调色盘，因为 PNG 通过减少颜色数量来实现压缩。 PNG 可能是有损耗的，但我们通常使用是无损，这意味著每个画素都可以精确储存而不会降低调色盘的质量，从而获得更高质量的影像。
 
　　SVG 具有最好的质量，并且由于其可扩充套件性而被用于向量艺术。我们经常将它们与徽标一起使用，但是，SVG 确实为浏览器建立了更多的工作，并且可以在页面载入时产生迟缓，因此影像的质量应始终与其复杂性相平衡。
 

 
　　作为我们使用 PNG 和 SVG 的示例，请比较 Silver Screen Insider 和 Bozeman 网站的徽标。对于前者，我们使用了 SVG 。对于博兹曼网站，由于多用户向下滚动时 CSS 动画引入了复杂性，我们选择使用 PNG，以免影响浏览器效能。
 

 
　　有时最好的解决方案是两者的结合：对于 JTech 网站上的标识，“JT” 元件是 PNG，但 “庆祝 20 年” 影像是 SVG，以便在所有视口大小中保持其质量。
 
　　优化技术
 
　　为了获得最佳结果，优化影像非常重要。为此这些软件设计功能打破了我们的大脑和业务，我们使用三个程序：ImageOptim（用于 JPG 和 PNG），ImageAlpha（用于 PNG）和 Scour（用于 SVG）。

       优化 JPG

 

　　ImageOptim 减少了 JPG 和 PNG 的档案大小。对于大影像，例如我们用于背景面板的影像，我们将尺寸设置为 16001200px 。对于内容照片，例如插入部落格文章中的影像，我们将尺寸限制在 200-800 画素宽之间。
 
　　调整到最终解析度后，将使用最佳质量在 Photoshop 中输出影像。每次我们压缩影像都会失去一些保真度，所以我们更喜欢单独使用 ImageOptim 进行压缩，而不是让 Photoshop 进行传递。 Photoshop 的效率显著降低：质量为 65 的 “网络储存” 会产生相同档案大小的影像，但保真度比 ImageOptim 的质量差 85 。
 

       Retina JPGs

　　当针对视网膜或其他高密度显示器时，我们发现最好以两倍的解析度储存单个 JPG，但使用更高的压缩，在 ImageOptim 中约 50-60，这可以产生看起来很好的高质量影像在视网膜和标准，低密度显示器上。这在之前的分享现代国外响应式设计的卓越典范也可以看出，这种技术允许我们将单个资产用于视网膜和标准显示，而不是切割和载入多个版本，而不会使影像的大小翻两番。
 
　　优化 PNG

　　对于 PNG，我们使用 PNG24 在 “save for web” 选项中输出 Photoshop，然后通过 ImageOptim 执行。如果它检测到影像使用少于 256 种颜色，ImageOptim 将无损地将影像转换为 PNG8，这是一种更简单的档案格式，可以生成非常轻量级的档案。
 
　　使用 ImageOptim，我们的影像最终输出没有太多的复杂性（最小的颜色，简单的形状和低于 200200px 的解析度），其大小范围可以从 15kb 到 1kb 以下。
 
　　优化更大的 PNG
 
　　对于更复杂的影像，如果我们无法使用 ImageOptim 生成介于 15kb 和 50kb 之间的档案，我们使用 ImageAlpha 。 ImageAlpha 用于处理从 PNG 24（数百万种颜色）到 PNG8（最多 256 种颜色）的 PNG，将影像从无损变为有损，最终瞄准具有最少颜色数量的 PNG 。
 
　　这种格式的损耗主要意味著对调色盘进行战略性改进，消除最不显著的颜色，从而产生仍然看起来很棒的影像，同时降低其复杂性。从 ImageAlpha 汇出后，我们通过 ImageOptim 执行它，以便进一步优化。
 
　　优化 SVG

　　在 SVG 中，我们在从 Illustrator 汇出影像之前尽可能减少复杂性。由于它们的大小，这是一个经常繁琐的过程，我们首先尝试将层数减少到最小，同时仍然准确地显示艺术品。然后将其储存为 Illustrator 中的 SVG，并使用名为 Scour 的程序进行优化。
 
　　我们使用此 automator 指令码使其在 macOS 中更容易使用，允许您在 Finder 中右键单击 SVG 档案并通过 “服务” 选单优化 SVG 。我们经常将字型档案用於单色向量图形，并使用名为 Glyphs 的程序。
 
　　结论
 
　　正确优化影像只是我们改善网站效能，防止浏览器膨胀，减少 WooCommerce 服务器和频宽资源使用，加快页面载入时间，保持开发基础架构清洁并为最终多用户提供更理想体验的另一种方式。
 
　　我们希望通过 JPG，PNG 和 SVG 档案类型，影像压缩和质量工具来探索我们的经验，因为我们不断完善自己的流程以生产高质量的网站。