Web质量图像始终是在使用尽可能小的文件大小与提供良好图像质量之间的一种平衡行为。直接在DSLR上嵌入照片可能看起来不错,但会减慢网站对爬网的负载,而过度压缩的图像可能会提高网站的速度,但会破坏设计和整体外观。对于我们主要处理的两种图像资产(照片和图标/插图),我们混合使用了图像质量检查和压缩技术,这些技术在大多数情况下均能很好地发挥作用。

常见的图片文件类型

建立网站时,我们使用三种图像文件类型:.jpg .png和.svg。

JPG最适合用于风景,风景或人物等照片。对于内容图像,例如博客文章图像,我们的目标是20-70kb。较大的背景照片可以达到500kb,但是200kb是一个很好的平均值。JPG有损(每次导出时它们都会重新压缩并降低图像质量),并且它们不能很好地管理渐变。如果图像中有渐变,则有时可以将图像分成两个切口,以便可以使用CSS渐变在单独的背景中渲染渐变。

PNG最适合徽标和图标之类的资产,因为它们支持透明性,并且徽标和图标通常使用更有限的调色板-因为PNG通过减少颜色数量实现压缩。PNG可能有损,但是我们通常使用无损,这意味着每个像素都被精确保存而不会降低图片的质量,从而获得了更高质量的图像。

SVG具有最高的质量,并且由于其可伸缩性而被用于矢量艺术。我们通常将它们与徽标一起使用,但是,SVG确实会为浏览器进行更多工作以使其呈现,并且在页面加载时可能会产生迟缓现象,因此,应始终在图像质量和复杂性之间取得平衡。

图片优化技术

为了获得最佳效果,优化图像非常重要。要做到这一点,我们利用三个方案:ImageOptim(JPG格式为PNG图像和),ImageAlpha(为PNG格式)和冲刷(用于SVGs)。

优化JPG

优化JPG文件

ImageOptim减小JPG和PNG的文件大小。对于较大的图像(例如用于背景面板的图像),我们将尺寸上限设置为1600x1200px。对于内容照片(例如在博客文章中插入的图片),我们将宽度限制在200-800px之间。

调整为最终分辨率后,将使用可用的最佳质量在Photoshop中输出图像。每次压缩图像时,图像都会失去一定的保真度,因此我们宁愿完全依靠ImageOptim进行压缩,而不是让Photoshop进行传递。Photoshop的效率明显较低:其质量为65的“网络保存”所生成的图像大小与ImageOptim的质量85相同,但保真度较差。

视网膜JPG

当针对视网膜或其他高密度显示器时,我们发现最好以两倍的分辨率保存单个JPG,但是在ImageOptim中使用更高的压缩率(约50-60),可以生成看起来不错的高质量图像在视网膜和标准低密度显示器上。这种技术使我们可以将单个资产用于视网膜和标准显示器,而无需剪切和加载多个版本,而无需将图像大小增加三倍。

优化PNG

优化PNG文件

对于PNG,我们使用PNG 24的“保存为网络”选项从Photoshop中输出,然后通过ImageOptim运行它。如果检测到图像使用的颜色少于256种颜色,ImageOptim将无损地将图像转换为PNG 8,PNG 8是一种更简单的文件格式,可以生成非常轻便的文件。使用ImageOptim,我们最终图像的输出不会太复杂(最小的颜色,简单的形状以及小于200x200px的分辨率)的大小范围从15kb到1kb以下。

优化更大的PNG

对于更复杂的图像,如果使用ImageOptim无法生成15kb至50kb之间的文件,则可以使用ImageAlpha。ImageAlpha用于处理从PNG 24(数百万种颜色)到PNG 8(最大256色)的PNG,将图像从无损变为有损,最终针对的是颜色数量最少的图像。

优化SVG

优化SVG文件

对于SVG,在从Illustrator导出图像之前,我们会尽可能降低复杂性。由于它们的大小,这通常是一个繁琐的过程,我们首先尝试将层数减少到最少,同时仍能准确显示艺术品。然后将其保存为Illustrator中的SVG,并使用名为Scour的程序进行了优化。

我们使用此自动脚本使它在macOS中更容易使用,允许您右键单击Finder中的SVG文件并通过“服务”菜单优化SVG。我们通常使用名为Glyphs的程序将字体文件用于单色的矢量图形。

适当优化图像只是我们改善网站性能,减少服务器和带宽资源使用,加快页面加载时间,保持开发基础结构清洁并为最终用户提供更理想的体验的另一种方法。 我们希望对我们在JPG,PNG和SVG文件类型,图像压缩和质量工具方面的经验的探索对您有所帮助,因为我们会不断完善自己的流程来制作高质量的网站。