为 Web 优化图像：实用指南

他们说一张图片值一千字，这就是图片在电子商务中如此重要的原因之一。 如果客户无法拿起、触摸和检查产品，他们将严重依赖图像来了解产品的颜色、质量和故事。

所以不用说，您的图像需要高分辨率和清晰。 但是，这是有代价的。 大型高清图像可能具有巨大的文件大小。 将其中的一些放在您的网站上，浏览您的在线商店的快速体验最终会让人感觉更像是在糖蜜中游泳。 这不仅会导致访问者反弹，而且随着时间的推移，Google 也会注意到，这会影响您的 SEO。

在电子商务中，当您为网站保存图像时，在图像质量和图像文件大小之间找到良好的平衡至关重要。 我们将在这篇文章中向您展示如何做到这一点。

如果您知道拍摄产品照片并将其直接上传到您的商店，那么本教程适合您。 如果您没有正式的知识或过程来保存文件大小的图像，本教程适合您。 如果您的网站有大量图片并且感觉缓慢，那么本教程适合您。 如果您还没有开始构建您的在线商店，本教程特别适合您。

准备好优化您的图像了吗？

图像文件类型选项

为了保存针对 Web 优化的图像，我们需要关注三种主要文件类型：GIF、JPG 和 PNG。 每种文件类型都有自己的优点和缺点，在保存图像时了解并牢记这些非常重要。

使用 JPG

JPG（也称为 JPEG）是网络上最流行的图像文件类型。 JPG 非常适合包含大量颜色、阴影、渐变或复杂图案的照片或复杂图像。 JPG 可以很好地处理这些类型的图像，因为 JPG 有一个巨大的调色板可供使用。

JPG 也可以保存为高质量、低质量或介于两者之间的任何位置。 这使您可以根据需要调整和保存图像，平衡质量和文件大小。

使用 PNG

PNG 是另一种流行的在线文件格式。 在 Adob​​e Photoshop 中，您可以选择将 PNG 保存为 PNG-8 或 PNG-24。

• PNG-8 的调色板非常有限，只有 256 种颜色。 虽然图像尺寸较小，但对于复杂的图像和照片，这不是一个好的选择。
• PNG-24 提供了更高质量的图像，但代价是文件更大。

最重要的是，PNG 可以处理透明度。 这是 PNG 和 JPEG 之间最大的区别点之一。

使用 GIF

许多年前，GIF 更受欢迎，但对于只需要几种颜色的小图像尺寸来说，它仍然是一种选择。 与 PNG-8 非常相似，GIF 文件仅限于 256 色。 因此，永远不应将 GIF 用于产品照片。

正确保存图像

正如预期的那样，加载大图像需要更长的时间。 当我们说大时，我们指的是文件大小而不是图像的尺寸，即以 KB、MB、GB 等为单位的值。 47% 的用户希望网页在 2 秒内加载，而 40 % 将放弃加载时间超过 3 秒的页面，重要的是您的图像足够小以确保快速的网站。

您可以通过三件事来正确优化在线商店的图片：

保存正确的尺寸

您必须在 Photoshop 中打开图像并以 100% 的比例查看它。 这使您可以在将图像保存到 Web 时以在计算机显示器上显示的精确尺寸查看图像。

为 Web 保存图像

可以在不显着降低图像质量的情况下减小文件大小。 我们最喜欢在不显着降低图像质量的情况下减小文件大小的方法是使用 Photoshop 的“Save for Web”功能。 在 Photoshop 中打开您的图像，然后转到“文件”>“导出”>“另存为 Web（旧版）...”。 将出现一个窗口，允许您选择导出质量。 我们发现 60 的质量效果最好，因为它将文件大小降低到 1 兆字节以下，并且质量没有明显差异。

压缩网络图像

图像压缩应用程序是减小图像文件大小的最简单方法。 这些类型的工具会删除图像文件中不需要的隐藏数据，例如其他颜色配置文件和元数据（例如照片拍摄地点的地理位置）。 这些工具提供了一种快速简便的方法来减小文件大小而不会损失任何图像质量。

图像压缩应用程序和服务

• 图像优化
• 短像素
• 小JPG
• 小PNG
• Compressor.io
• 海妖
• 图像优化器
• 粉碎图片（Shopify 应用程序）
• 缩小器（Shopify 应用程序）

为 Web 保存图像：演练示例

首先，让我们假设我们是 Stiff Salt（实际上由一位朋友和 Shopify 开发人员所有），并且我们想要更改我们在线商店的特色图片。

我们设置了一个场景，让我们的盐看起来绝对不可思议，然后我们用数码单反相机拍了一张照片。 太好了，我们有我们的照片。 真漂亮！

但是……文件很大！ 准确地说是 14.6 MB。 照片尺寸为 5184 × 3456 像素。 这现在完全无法使用。 它实际上足以打印电影大小的海报。 此图片大小为 14.6 MB，需要很长时间才能加载到访问者的计算机上。 这不好。

是时候开始工作并显着减小图像大小和文件大小了。

请记住，我们将对图像做三件事。

• 缩小图像尺寸：这是照片的尺寸
• 适当地保存图像以减小文件大小：这是文件的大小以及它在计算机硬盘驱动器和/或 Web 服务器上占用的空间
• 压缩图像文件：摆脱任何额外的隐藏数据占用空间

缩小图像尺寸

根据您决定使用的程序和个人喜好，您可以：

• 保存前缩小图像尺寸
• 保存图像时缩小图像尺寸
• 保存图像，然后缩小图像大小

为简单起见，我们将首先减小图像大小。 为此，我们将在 Photoshop 中打开图像（您可以使用任何您觉得最舒服的图像程序）。

为了确定尺寸，我们查看了主题建议的主页图像尺寸。 它是 1600 x 800 像素（记住原来是 5184 × 3456 像素）。

在 Photoshop 中，我们将选择图像 > 图像大小。

好的，我们已将图像的大小（尺寸）缩小到主题开发人员推荐的更合适的值。

适当地保存图像（保存为 Web）

在 Photoshop 中，有一个名为“Save For Web”的特定命令，可以优化图像文件以供在线显示。 这很重要，因为常规的“保存”命令最终会创建比“保存为 Web”命令大 2-3 倍的文件。

在“Save For Web”框中，我们需要进行一些选择。

• 图像类型：文件类型会影响输出文件的质量和大小
• 图像质量：这很重要，会严重影响最终文件大小
• 尺寸：我们在第一步已经做了这个，所以没有必要再做一次，但是如果我们在第一步没有这样做，我们可以在这里更改图像的尺寸

根据我们在本文开头学到的知识，我们知道 JPEG 是照片或任何具有多种颜色和复杂性的图像的最佳文件类型。 我们将选择JPEG。

对于图像质量，您可以选择 5 个预设的比例，范围从最大到低。 我们来看看每个质量级别的最终输出文件大小（此信息显示在图像保存窗口的下角）：

• 最大： 1.38 MB
• 非常高： 611 KB
• 高： 339 KB
• 中： 152 KB
• 低： 86k

您可以看到，每降低一个质量级别，图像大小就会减少近一半。 一般来说，我们发现高是大多数图像的最佳设置。 在这个级别，人眼几乎不可能看到图像质量有任何下降，而且文件大小比我们只选择最大值时小近 4 倍。

如果图像是具有大量细节的极其重要的图像，您可能需要选择更高的级别并保存为非常高。

从本质上讲，为 Web 保存是一种平衡行为 - 您必须平衡图形质量和媒体文件大小以满足您的个人需求。

压缩网络图像

如果您使用 Adob​​e Photoshop，它在缩小图像尺寸方面已经做得非常出色，但是，您仍然可以使用 ImageOptim 和/或 ShortPixel 等压缩应用程序将图像尺寸再缩小 5-10%。

如果您使用其他程序保存图像效果不如 Photoshop，那么 ImageOptim 也是快速减小图像文件大小的最简单方法。

将上一步中的每个文件放入 ImageOptim，我们能够进一步将图像大小再减小 5%。 不是很大，但同样，这些已经用 Photoshop 进行了优化。 无论如何，每个 KB 都很重要。

结论

回顾一下，我们开始时的照片非常大，但是，通过几个简单的步骤，我们将照片尺寸从 5184 × 3456 缩小到 1600 × 800，使其非常适合我们的主页，同时，它将计算机崩溃的 14.4MB 降至更合理的 336KB。

为网络适当地保存图像是尽早学习和认真实施的重要步骤。 即使您只在每张图片上节省 10-20%，随着时间的推移，随着您的商店和网站的发展，每一个小 KB 都可以增加一些显着的节省，这将为您的访问者、客户和客户带来更愉快的整体体验。谷歌。

如何为 Web 优化图像：视频演练