网站设计干货：适用于网页设计师的JPEG优化指南

建设网站您不应该以100％的质量保存JPEG图像。这不会产生最可能的“优化”图像。它实际上是通过优化限制公式来计算的，该公式会过度增加文件大小。

即使与90％或95％的质量相比，您也会看到文件大小明显下降。

大多数情况下，建议您保存的图像质量远低于90％。如果在Photoshop中打开“存储为Web所用格式”对话框，您会发现它们提供了可供您选择的预设值。

我在下面添加了可能的JPEG值 - 注意固有的命名约定。

• 低- 10％

• 中等- 30％

• 高- 60％

• 非常高- 80％

• 高- 100％

即使在Adobe Photoshop中，60％的图像质量也被认为是“高”。许多网站开发人员将担保50％ - 70％是一个安全范围坚持。

图片多低最合适？

您选择用于优化的值完全取决于手头的项目。您将不得不考虑哪种类型的图形将输出大的文件大小 - 这些是真正需要压缩的文件。

我认为低于30％你真的会削减基本的图像质量。其他设计师将发誓50％作为降低好值的“限制”。

但这里最好的建议是尝试不同的设置，看看哪个看起来最好！一些优化用于网络的JPEG图像的测试研究不会出错。

压缩网站图片的选项

我们首先应该澄清两个术语“压缩”和“质量”，它们是彼此相反的。

这意味着如果以40％的压缩率保存JPEG，您将获得60％的质量（相比之下，没有压缩的高质量为100％）。

这些是最基本的选择 - 在为网络保存时它们应该足够了。一般用户不会进行更深入的自定义。

在您将RGB图像转换为YCbCr（亮度，色度蓝，色度红）时，子采样会变得更加复杂。

在亮度或亮度设置始终在JPEG压缩高可能值举行。通过单独通道上的此亮度值，可以更轻松地优化红色和蓝色的各个颜色值。

这也称为色度子采样。有兴趣弄脏手的设计师会喜欢阅读有关此压缩算法的更多内容。

看看这篇关于色度采样的博文，专门关注JPEG图像。

作为一个有趣的附注，Adobe Photoshop并不总是使用子采样进行压缩。通过“Save for Web”对话框保存的任何图像仅使用低于50％质量值的色度子采样。

不同的网络媒体

网络也充满了各种图像媒体。你可以有照片，图标，按钮，徽章和其他图形。但值得注意的是，比较按钮和照片之间的质量是没有意义的。

使用照片或详细图像时，请考虑链接到单独的较小压缩的JPEG文件。然后，您可以在网站上设置缩略图，压缩率更高，文件更小。

唯一的缺点是你需要为媒体库提供两组图像。注意您在整个网站中缝制的许多不同图形，并分别考虑每个图形的优化技术。

使用压缩工具

您可能想要组织在您的网站上易于翻找的图像文件。您还可以在Amazon S3，Google Cloud Storage等云服务上托管他们的照片，也可以通过CDN托管，以便更快地交付图像。不过，您仍然希望使用一些压缩工具来减小图像大小。任何额外的字节，你可以削减每个文件的大小是至关重要的。以下是您要查看的一些工具：

TinyJPG

TinyJPG是一个基于浏览器的Web应用程序，您可以在其中上传图像以及所有不必要的额外字节以优化文件大小。它是100％无损的，意味着图像质量根本不会降低。您可以同时上传最多20张5Mb的图像。

如果您正在为您的网站使用WordPress。您可以使用其官方插件，压缩JPEG和PNG图像。此插件还连接到其姐妹网站TinyPNG，允许您使用PNG格式优化图像。

IrfanView的

这个免费的Windows软件允许您查看和优化任何大型图像集。我特别喜欢这个软件，因为它支持从多个目录中的图像进行批量转换。您可以自动在数百个JPEG图像上应用相同的功能。

更好的是来自第三方开发者的插件支持。一个这样的例子是RIOT（激进图像优化工具）。此插件适用于其他类似的开源图形编辑器，如GIMP。

它提供双图像视图，您可以在其中手动调整每个图像的压缩参数。

软件支持非常棒，RIOT功能非常易于使用。除了图像压缩，您还可以删除其他元数据，如EXIF和Adobe XMP。这些额外的数据只能添加到您的总文件大小上，而且很少需要它们。

适用于Mac的ImageOptim

如果您正在运行OS X并需要一个功能强大的压缩应用程序，那么请不要再看了ImageOptim是一个强大的工具来压缩网络图像 - 有时甚至比Photoshop更好。

整个应用程序支持拖放功能，因此可以轻松优化大量图像。您可以直接在终端和设置shell脚本中运行命令。

结论

即使我们的现代互联网连接速度随着4G和即将到来的5G而增加，我们也需要减小网页的大小。每个字节最终都会为您的用户带来一些财富。所以你网站的图片需要优化优化了。

本文标题：网站设计干货：适用于网页设计师的JPEG优化指南
当前路径：/news/79798.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站设计等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联