加快电子商务速度的 12 个图像优化技巧（SEO + 性能）

您想知道为什么以及如何为您的电子商务网站优化图像吗？ 图像优化的最终目标是在不影响图像质量的情况下创建最小的文件大小。 您希望在不影响网站性能的情况下显示高质量的图像。

研究一致表明，快速的页面速度将导致在 Google 上的更好位置和更高的转化率。 因此，您希望您的图像得到优化，并且对于访问者来说不会太大。

图片对于在线商店来说是必不可少的； 您的大部分销售取决于产品图片。 客户在进行任何购买之前总是希望检查产品的详细信息（例如颜色或材料）。

你可知道？ 根据 Salsify 的数据，73% 的购物者需要看到至少三张图片才能做出购买决定。

现在，如果您看下面的示例，您会为下一个夏季派对购买哪种产品？ 答案是A，对吧？

图片是提高转化率的必备品，但未经优化的图片会导致您的电子商务网站速度变慢（将潜在客户赶出您的商店）。 为避免这些性能问题，我们将分享优化图像、提高在线商店速度和提高您在 Google 上的排名的最佳技巧。

优化电子商务图像的 12 个 SEO 和性能提示

这里有 12 个 SEO 和性能提示，您可以应用这些技巧来优化您的电子商务图像、加速您的电子商务商店并在 Google 上获得更好的排名：

1. 正确调整图像大小
2. 压缩图像
3. 选择正确的文件格式
4. 使用浏览器缓存
5. 预加载图像以更快地显示它们并提升您的 LCP
6. 使用 Fetchpriority 属性
7. 包括宽度和高度大小属性以避免突然的布局移动 (CLS)
8. 使用图像 CDN
9. 启用延迟加载
10. 使用响应式图像
11. 优化图像文件名并包含对 SEO 友好的 Alt 文本
12. 创建图像站点地图

让我们深入了解每种图像优化技术，这些技术将提高您的电子商务网站的 SEO 和性能。

1. 正确调整图片大小

电子商务图像的最佳大小是尽量将图像文件大小保持在 70-80 KB 以下。 实际尺寸取决于您使用的 CMS 或电子零售商。

• WooCommerce 图片：600 x 600（最小）

• 亚马逊图片：1000 x 1000 像素（最小）
• Shopify 图片：800 x 800 像素（获得缩放功能的最低要求）

2.压缩图像

压缩图像意味着在不损失质量的情况下减小图像大小。 有两种类型的压缩：有损与无损。

• 无损 – 文件大小小幅减小而质量没有变化。
• 有损 – 文件大小更显着减小，但可能会影响质量。 “有损”压缩有几个级别：有些甚至是人眼看不到的，有些则更具侵略性并影响质量。

3. 选择正确的文件格式

Google PageSpeed Insights 建议使用 WebP 等下一代格式来优化您的图像。 通过在您的电子商务网站上将图像提供给 WebP，您将节省图像文件大小，如下图所示：

4.使用浏览器缓存

最有效的优化方法之一是图像缓存。 使用 WP Rocket 之类的 WordPress 插件，您可以将图像文件存储在用户的浏览器缓存或代理服务器上，以便将来更快、更轻松地访问。

5. 预加载图像以更快地显示它们并提升您的 LCP

预加载最大的首屏图像将增强最大的内容绘画 (LCP)，这是一个核心 Web Vital。 如何？ 预加载 LCP 图像可以在页面加载更早的时候显示您的英雄图像或网站横幅，从而带来积极的用户体验。

顾名思义，预加载允许您优先加载页面元素。 同样，WP Rocket 可以帮助您预加载图像、字体和链接：

如果您愿意，您还可以在图像上手动应用此预加载标签：

 <link rel="preload" as="image" href="https://mysite.com/images/myimagename.webp" />

6. 使用 Fetchpriority 属性

优化图像和获得更好 LCP 的另一个技巧是使用fetchpriority属性告诉浏览器它应该首先获取哪个图像。

您的 LCP 图像应具有 fetchpriority=”high” 以优先下载它，而页脚图像应具有 fetchpriority=”low” 因为它们不是立即需要的。 谷歌研究了他们自己的格斗搜索引擎，发现 99% 的首屏内容在不到 2 秒的时间内显示，这要归功于优先提示：

7. 包括宽度和高度尺寸属性以避免突然的布局移动 (CLS)

如果 PageSpeed Insights 检测到某些内容突然移动，这将影响用户体验和网站的整体速度。 Cumulative Layout Shift (CLS) 是另一个 Core Web Vitals，用于衡量在加载期间是否发生任何突然的布局变化。 如果您通过为图片添加高度和宽度属性来保留图片空间，Google Page Insights 将为您提供良好的 CLS 等级。

未指定图像宽度和高度：图像加载后布局突然变化 = 错误 CLS	指定了宽度和高度：无布局偏移 = 良好的 CLS

8. 使用图片 CDN

图像 CDN（内容交付网络）是市场上用于图像优化的最佳工具之一。 根据 web.dev 的说法，它甚至可以节省 40-80% 的图像文件大小。 ​​从 CDN 加载的所有图像都将通过图像 URL 提供，该 URL 不仅指示要加载的图像，还指示大小、格式和质量等参数。 这对于为不同场景创建图像变体很方便：

从头开始设置 CDN 会让人感到不知所措。 如果你喜欢自动安装，你可以试试 RocketCDN。

9.启用延迟加载

延迟加载是优化在线商店图像的另一种策略。 它旨在将资源识别为非阻塞并仅在需要时加载这些资源。 简而言之，它仅在您的访问者滚动到该内容时才加载图像。

如果您对手动应用延迟加载脚本感到不自在，可以使用 WP Rocket 之类的插件来帮助您。

10. 使用响应式图片

为移动设备优化图片是提升用户体验和商店加载速度的另一种方式。 响应式图像是一组用于根据用户使用的设备加载正确图像的技术：台式机、平板电脑或移动设备。 它是根据设备分辨率、方向、屏幕大小、页面布局和网络连接计算得出的。

srcset和sizes属性可以帮助您使您的图像响应并获得更好的性能和出色的用户体验。 它是这样工作的：

• srcset = 描述源文件的实际宽度
• size = 告诉浏览器图像应该在屏幕上显示多宽。

Dev.to 写了一篇非常详细的文章，介绍了如何将两者用于响应式图像。 我们建议您阅读完整指南。

11.优化图像文件名并包含对 SEO 友好的替代文本

图像优化不会停留在文件本身的质量上。 它还扩展为文件的名称和替代文本。 始终使用清晰的替代文本为您的图像选择相关且特定的名称。 它将通过描述图片的内容来帮助您的图片在 Google 上排名。

12. 创建图片站点地图

将图像添加到站点地图有助于 Google 发现其他方式可能无法找到的图像（例如使用 JavaScript 加载的图像）。 它为您的在线商店提供了一点 SEO 提升。 以下是 Google 查找图片所需的站点地图标签：

既然您已经了解了我们加快在线商店速度的最佳优化技巧，那么有一些工具可以帮助您实施这些技巧。 例如，您可以使用 Imagify 插件，只需单击几下即可解决大部分优化点。 让我们来看看他们中的每一个。

使用 Imagify 优化电子商务图像

Imagify 插件可以帮助您解决我们在上一节中提出的大多数优化技巧，以加快您的在线商店。 在 WordPress 上安装免费插件后，您将解锁多项功能，帮助您加快网站速度并提高在 Google 上的知名度。 让我们深入了解 Imagify 的最佳功能！

感谢 Imagify，您可以通过以下方式优化图像：

• 使用三种压缩级别压缩和优化您的图像：正常、激进和超强。 您的图像质量将几乎保持不变，但您的文件大小会轻得多。

• 同时压缩和调整多个图像的大小：

• 来自 WordPress 库的优化——您还可以对选定的图像执行优化，就像我们下面的示例一样。 Imagify 节省了我 94% 的文件大小！

• 一键将您的图像转换为 WebP：

• 自动调整最大图像的大小：

最后但并非最不重要的一点是，Imagify 会优化您的图像以解决 Google 关于 PageSpeed Insights 的建议，例如“以下一代格式提供图像”（得益于其 WebP 转换功能）、“有效编码图像”和“适当大小的图像”。

没有 Imagify 的 PSI 问题	通过 Imagify 审核

最后，Imagify 的定价很简单：您每月可获得 200 MB 的免费数据，如果您需要无限资源，只需 9.99 美元！

包起来

图片极大地影响了您的产品的感知和销售。 使用像 Imagify 这样的插件优化它们将提高您的在线商店性能并提高您的搜索引擎优化 (SEO) 排名。 结果是显着节省了负载，改善了用户体验，并在 Google 上获得了更好的地位。 免费试用 Imagify，告诉我们您的在线商店的图像压缩情况如何！