高级图像优化技巧

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

可以使用自动图像优化工具压缩图像。但是,如果您还花时间手动优化它们,您可以进一步改进结果。以下是手动优化图像的五种技巧。

高斯模糊JPEG优化

高斯模糊软化图像的细节。在照片编辑中,它通常用于提高照片的质量或给它一个有趣的视觉效果。然而,如果你只在照片中引入少量的高斯模糊——这个量不会太大地改变它的视觉保真度——你可以降低它的文件大小。

示范

下面的图片是60.9 KB:我们将在Photoshop中打开图像,然后我们将应用滤镜>模糊>高斯模糊。然后我们增加半径选项,直到它开始显著降低图像的清晰度。然后选择一个我们在视觉上可以接受的值。

在应用高斯模糊滤镜后,我们以正常的方式保存我们的图像。这是优化后的图像:优化后的图像为58.7 KB——一个文件大小减少3.6%。

图像多色调分色法

多色调分色法允许我们降低图像的文件大小,而不太损害图像质量。多色调分色法通过将连续颜色渐变转换为需要较少颜色渲染的非连续段来工作。

示范

在这个演示中,我将使用一个PNG图像免费的东西上面的PNG图片是51.0 KB。我在Photoshop中打开PNG图片进行分隔。要对图像进行分隔,请转到图像>调整>偏隔

多色调分色印对话框窗口,检查预览选项查看您的编辑实时。设置水平选项的最小值,你可以摆脱。举个例子,在a水平值小于76,我就不能再接受图像质量的下降。

在应用图像调整后,我们就像通常那样保存PNG。下图为优化后的图像:因为我非常积极地进行了分隔,优化后的图像只有37.6 KB——一个文件大小减少26.3%。

进一步的阅读

Pixel-fitting

Pixel-fitting是一种有用的技术,用于确保将矢量图形转换为光栅图形的高质量结果。简单的非摄影图像,如图标和标志,最好创建为矢量图形,因为这样做允许我们缩放到不同的大小而不损失保真度。然而,当矢量图形转换为静态图像格式(光栅图形)时,通常会出现一个问题JPEGPNG

当我们使用像Photoshop这样的图像编辑软件自动将矢量图形转换为栅格图形时,它会尽量平滑边缘——一个被称为抗锯齿的自动化过程。抗锯齿效果各不相同。这通常会导致低质量的结果。

为了提高图形的质量,我们可以手动编辑像素,以确保它们适合像素网格。这就是所谓的pixel-fitting(或像素暗示)。来源:dcurt.is使用图像编辑器,如Photoshop,你可以缩放到矢量图形,然后手动移动它的矢量路径,直到它们完全适合像素网格,然后将矢量保存为栅格:像素拟合只适用于直线,所以你必须依靠抗锯齿显示曲线。

像素拟合的进一步阅读

8像素网格JPEG优化

我在Smashing杂志的一篇文章里发现了这个技巧聪明的JPEG优化技术.在同一篇文章中,您还将发现优化jpeg的其他有用技巧。JPEG图像被划分为8x8px的块,每个块可以被视为自己的实体。

通过仔细地在8x8px网格中对齐图像的部分,可以降低图像的文件大小,并获得更好的图像质量结果。为了演示:我创建了两个相同的8x8px正方形对象,然后使用非常高的压缩级别将它们保存到JPEG中(以使差异更明显)。顶部的正方形没有在8x8px的网格内对齐。

请注意质量差异和额外的像素,因为没有对齐到8x8px的网格。这种优化技巧对于包含矩形对象的JPEG图像非常有用,因为您可以轻松地将它们放入网格中。

进一步的阅读

  • JPEG优化。第1部分- Sergey Chikuyonok(上面提到的Smashing Magazine文章的作者)在本教程中讨论了8x8px的JPEG概念

有选择性的JPEG压缩

典型的JPEG压缩的工作方式是对整个图像应用固定级别的压缩。在选择性JPEG压缩中,我们手动为图像的不同区域指定不同的压缩级别。例如,我们可能希望照片的重要区域具有较低的压缩级别/较高的质量,因为我们想确保这些区域看起来很好。

但对于同一图像的其他部分,比如照片的背景和低细节部分,我们可能会使用更高级别的压缩/较低质量。

示范

可以使用Adobe Fireworks进行选择性JPEG压缩。下面这张照片是用80的画质水平压缩的。其文件大小为54.0 KB。看看原始照片,我们似乎使用了选择性的图像压缩,特别是通过增加压缩/降低背景中的蓝天和大部分黑线的质量。在Adobe Fireworks中,我们可以屏蔽想要保护的区域。

遮罩区域将具有更高的质量级别(80)/更低的图像压缩。其余的图像——未被屏蔽的部分——将得到较低的质量级别(60)/较高的图像压缩。我们可以使用套索工具(在我的例子中,我使用Polygon Lasso工具)在我们想要保护的部件周围放置一个选框。

一旦你完成选择周围的高质量区域,去修改> Selective JPEG > Save Selection as JPEG Mask。图像中质量等级为80的部分现在会高亮显示:优化面板,降低质量选项设置为60,并设置选择质量选择80。(如果你看不见优化面板,确保窗口>优化检查)。那就去文件>另存为将原始图像保存为JPEG格式。下图使用了选择性压缩。这是50.2 KB——一个文件大小减少7.0%而不是我之前展示的非选择性压缩。

为了得到您想要的结果,您将不得不使用选择性压缩设置和屏蔽。在上面的例子中,注重细节的人会注意到两张图片之间的巨大差异。然而,在大多数人的标准下,优化的结果可能是好的。

选择性JPEG压缩是非常耗时的,在大多数情况下文件大小只减少一点点。如果你要处理很多照片,这是不切实际的。但是,如果您真的关心优化图像质量和图像文件大小,这是一个选择。

进一步的阅读

  • 选择性压缩图像的区域——Adobe.com上的一个老教程详细介绍了使用Fireworks进行选择性图像压缩的步骤

结论

还有更简单的方法来优化图像。只是使用自动化工具,如Photoshop的保存为Web和设备命令和无损压缩工具,如Smush。它可以大大减少您的图像文件大小。然而,如果你正在寻找更好的图像优化控制,甚至更多的文件大小缩小,尝试以上技巧。

理想的工作流程是使用无损压缩工具,比如Kraken.io或被压。它将在不影响图像质量的情况下删除图像文件大小的一大块。然后您可以使用上面讨论的适当技巧来微调您的结果。

相关内容

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!