网页质量的图像始终是在使用尽可能小的文件大小，同时提供良好的图像质量之间的平衡。直接在DSLR中嵌入照片可能看起来不错，但会降低网站的抓取速度，而过度压缩的图像可能会提高网站的速度，但会损害设计和整体美感。
对于我们主要处理的两种图像资产（照片和图标/插图），我们执行图像质量检查和压缩技术的混合，在大多数情况下都能很好地工作。
在网站建设时，我们使用三种图片文件类型：.jpg .png和.svg。
JPG最适合用于风景，风景或人物等照片。对于内容中的图像，如博客文章图像，我们的目标是20-70kb。较大的背景照片可以达到500kb，但200kb是一个很好的平均值。
JPG是有损的（它们会在每次导出时重新压缩并降低图像质量），而且它们不能很好地管理渐变。如果图像中有渐变，有时您可以将图像分成两个切口，以便您可以使用CSS渐变将渐变渲染到单独的背景中。
PNG最适合用于徽标和图标等资产，因为它们支持透明度，而且徽标和图标通常使用更有限的调色板 - 因为PNG通过减少颜色数量来实现压缩。
PNG可能是有损的，但我们通常使用无损，这意味着每个像素都可以精确保存，而不会降低调色板的质量，从而获得更高质量的图像。
SVG具有最好的质量，并且由于其可扩展性而被用于矢量艺术。我们经常使用它们的标识，但是，SVG确实为浏览器创建了更多的工作，并且可能会在页面加载时产生缓慢的效果，因此图像的质量应该始终与其复杂性相平衡。
为了获得最佳结果，优化图像非常重要。要做到这一点，我们利用三个方案：ImageOptim（JPG格式为PNG图像和），ImageAlpha（为PNG格式）和冲刷（用于SVGs）。
ImageOptim可减少JPG和PNG的文件大小。对于大图像，例如我们用于背景面板的图像，我们将尺寸设置为1600x1200px。对于插入到博客文章中的图片等内容照片，我们会将尺寸限制在200-800像素之间。
在调整到最终分辨率后，图像将在Photoshop中以可用的最佳质量输出。每次我们压缩图像时，都会失去一些保真度，所以我们更愿意仅仅依靠ImageOptim进行压缩，而不是让Photoshop进行压缩。Photoshop的效率明显较低：在质量为65的情况下，其“保存为网页”产生的文件大小相同，但保真度比ImageOptim的质量更差85。
当瞄准视网膜或其他高密度显示器时，我们发现它最适合以两倍的分辨率保存单个JPG，但使用更高的压缩率，在ImageOptim中约为50-60，可以产生看起来不错的高质量图像在视网膜和标准的低密度显示器上。这项技术使我们能够使用单一资产用于视网膜和标准显示器，而不是切割和加载多个版本，并且不会使图像尺寸翻两番。
对于PNG，我们在Photoshop中使用PNG 24的“save for web”选项输出，然后通过ImageOptim运行它。如果它检测到图像使用的颜色少于256色，ImageOptim将无损地将图像转换为PNG 8，这是一种更简单的文件格式，可以生成非常轻量级的文件。
借助ImageOptim，我们的图像最终输出没有太多复杂性（最小的颜色，简单的形状和小于200x200px的分辨率），大小可以从15kb到小于1kb。
对于更复杂的图像，如果我们无法使用ImageOptim生成15kb到50kb之间的文件，我们使用ImageAlpha。ImageAlpha用于将PNG 24（百万种颜色）的PNG处理为PNG 8（最多256种颜色），将图像从无损图像变为有损图像，最终针对颜色数量最少的图像进行处理。
这种格式的损失主要意味着调色板的战略性改进，消除最不显眼的颜色，以产生仍然看起来很好，同时降低其复杂性的图像。
从ImageAlpha导出后，我们通过ImageOptim运行它，以便进一步优化。
谈到SVG时，我们在从Illustrator中导出图像之前尽可能降低复杂性。由于它们的大小，通常是一个繁琐的过程，我们首先尝试将层数减少到最小，同时仍然准确地显示作品。然后在Illustrator中将其保存为SVG，并使用名为Scour的程序进行优化。
我们使用这个automator脚本使它在macOS中使用起来更容易一点，允许您右键单击Finder中的SVG文件并通过Services菜单优化SVG。我们经常使用字体文件来制作矢量图形，这些矢量图形是一种名为Glyphs的程序的单色。
正确优化图像是我们改善网站性能，防止浏览器膨胀，减少服务器和带宽资源使用，加快页面加载时间，保持开发基础设施清洁并为最终用户提供更理想的体验的另一种方式。
我们希望通过对JPG，PNG和SVG文件类型，图像压缩和质量工具的体验的探索，为您提供一个资源，因为我们不断完善我们自己的流程以生产高质量的网站。
最新推荐