网页中常用的图像格式和优化方法

作者:Aini99
Aini99 更新时间:2021-02-20 09:25:33 浏览次数:

网页质量的图像总是在使用尽可能小的文件大小和提供良好的图像质量之间取得平衡。直接在你的数码单反上嵌入一张照片可能看起来很不错,但它会减慢你网站的加载速度,而过度压缩的图像可能会提高你网站的速度,但会损害网站的设计和整体美感。

对于我们主要处理的两类图像资产 —— 照片和图标/插图,我们混合了图像质量检查和压缩技术,这在大多数情况下都能很好地工作。

图像文件类型和常见用途

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

JPG 格式最适合拍风景、风景或人物之类的照片。对于内容中的图像,如博客文章图像,我们的目标是 20-70kb。较大的背景照片可以达到 500kb,但平均 200kb 也不错。

优化 JPG 格式的图片文件

JPG 格式是有损的 (每次导出时都会重新压缩并降低图像质量),而且它们不能很好地管理渐变。如果你在一个图像中有一个渐变,有时候你可以将图像分成两个部分,这样你就可以使用 CSS 渐变在一个单独的背景中渲染渐变。

PNG 格式是徽标和图标最好的选择,因为它们支持透明度,而且徽标和图标通常使用更有限的调色板——因为 png 通过减少颜色的数量来实现压缩。

优化 PNG 格式的图片文件

PNG 格式可能是有损的,但我们通常使用无损的,这意味着每个像素都被保存下来,而不会降低调色板,从而产生更高质量的图像。

SVG 格式具有最好的质量,并且由于其可扩展性而被用于矢量技术。我们经常将其与徽标一起使用。然而,svg 确实为浏览器创造了更多的渲染工作,并在页面加载时造成缓慢,所以你的图像质量应该总是与它的复杂性相平衡。

优化 SVG 格式的图片文件

举个例子,当我们使用 png 和 svg 时,比较一下 Silver Screen Insider 和 Bozeman 网站的 logo。对于前者,我们使用 SVG。对于 Bozeman 网站,因为当用户向下滚动时,CSS 动画会带来复杂性,所以我们选择使用 png 来代替,以免影响浏览器的性能。

有时最好的解决方案是两者的结合:对于 JTech 网站上的 logo,“JT” 组件是 PNG,但 “Celebrating 20 Years” 是 SVG,以便在所有视口大小中保持其质量。

如何优化图像文件

为了获得最好的效果,优化图片是很重要的。为此,我们使用了三个程序:ImageOptim (用于 jpg 和 png)、ImageAlpha (用于 png) 和 Scour (用于 svg)。

优化 JPG 图像文件

ImageOptim 可减少 JPG 和 PNG 的文件大小。对于大图片,比如我们用于背景的图片,我们的上限尺寸为 1600x1200px。对于内容照片,比如插入博客文章中的图片,我们将尺寸限制在 200-800px 之间。

调整到最终分辨率后,图像在 Photoshop 中使用最好的质量输出。每次我们压缩图像时,它都会失去一些保真度,所以我们更喜欢仅仅依靠 ImageOptim 来压缩,而不是让 Photoshop 进行压缩。Photoshop 的效率明显较低:它的 “为网页保存”(save for web) 质量为 65,生成的图像文件大小相同,但保真度低于 ImageOptim 的质量为 85。

视网膜 JPG

当目标是视网膜或其他高密度显示器时,我们发现最好以两倍的分辨率保存一张 JPG,但使用更高的压缩率,ImageOptim 大约 50-60,这样可以产生高质量的图像,在视网膜和标准的低密度显示器上都看起来很好。这种技术允许我们使用视网膜和标准显示的单一资产,而不是切割和加载多个版本,也不会使图像大小增加四倍。

优化 PNG

对于 PNG,我们在 Photoshop 的 “save For web” 选项中使用 PNG 24 输出,然后通过 ImageOptim 进行优化。如果它检测到图像使用少于 256 种颜色,ImageOptim 将无损地将图像转换为 PNG 8,一种更简单的文件格式,可以产生非常小的文件。

有了 ImageOptim,我们最终输出的图像没有太多的复杂性 (最小的颜色,简单的形状,低于 200x200px 的分辨率),大小可以从 15kb 到 1kb。

优化较大的 PNG

对于更复杂的图像,如果不能使用 ImageOptim 生成 15kb 到 50kb 之间的文件,则可以使用 ImageAlpha。ImageAlpha 用于处理 PNG 从 PNG 24 (百万种颜色) 到 PNG 8 (最大 256 种颜色),从无损图像到有损图像,最终目标是一个最小的颜色数量。

这种格式的损耗主要是指对调色板进行其他的优化,消除最不引人注目的颜色,以在降低复杂性的同时生成仍然看起来很棒的图像。

从 ImageAlpha 导出之后,我们通过 ImageOptim 运行它,以便进一步优化它。

优化 SVG

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

我们使用这个自动脚本使它在 macOS 中更容易使用,允许您在 Finder 中右键单击 SVG 文件,并通过 Services 菜单优化 SVG。我们经常使用带有名为 Glyphs 程序的单色矢量图形的字体文件。

结论

正确优化图像只是另一种方法,可以提高我们的网站的性能,防止浏览器过于消耗资源,减少服务器和带宽资源的使用,加快页面加载时间,保持开发基础设施干净,并为最终用户提供更理想的体验。

我们希望这次探索 JPG、PNG 和 SVG 文件类型、图像压缩和质量工具的经验是一个资源,为您不断完善我们自己的过程,以产生高质量的网站。

Aini99

Aini99

本网站搬运了CC社区和XJ社区的cskzwr数据,大家可以在这里查询cskzwr数据,下载cskz地图和demo,同时还提供了一些kz视频制作教程。