如果你正在运营在线商店，尤其是独立站，那么如何有效利用有限的CPU、内存、带宽等资源，为访客提供尽可能快的加载速度是不得不考虑的。而在这个过程中，图片优化是十分重要的一个环节，因为图片占据着整个网站资源的相当大比例，而且也是视觉促进转化的关键因素。不论是从搜索结果上吸引消费者，还是到缩短网站加载时间，图片优化都是构建成功电子商务网站的重要组成部分。
什么是图片优化？
图片优化是在不牺牲质量的情况下尽可能地减小图片的文件大小， 从而使页面加载时间保持在较低水平。也就是说，让你的产品图片和装饰图片在谷歌和其他图片搜索引擎上取得更佳的排名。
下面的问题有让你抓狂了吗？
- 为什么当我做谷歌图片搜索时, 我的产品照片永远不会出现？
- 我是否需要向图片添加 alt 属性？
- JPEG、GIF 和 PNG 有什么区别？我应该什么时候使用其中一个而不是另一个？
先把10条必杀技奉上：
1、用简单的、清晰的、具有描述性的语言为图片命名。
2、仔细优化你的 alt 属性。
3、合理地选择图片尺寸和产品角度。
4、减小图片的文件大小。
5、选择正确的文件类型。
6、优化缩略图。
7、使用图片站点地图。
8、谨慎装饰图片。
9、使用内容分发网络 (CDN) 时要小心。
10、测试图片。
1、用简单的、清晰的、具有描述性的语言为图片命名。
按动快门的快感，和伴随着由你的相机分配的默认文件名，让摄影的乐趣油然而生。
且慢，当涉及到图片SEO时，请谨记重要的是要使用相关的关键字，以帮助你的网页在搜索引擎上取得较好排名。创建描述性的、关键字丰富的文件名对于图片优化至关重要。搜索引擎不仅抓取网页上的文本，同时也会抓取你的图片文件名。
我们以下面这张图片为例。
通常情况下，你可以使用相机分配给图片的通用名称 (例如DCIM8313. jpg)。不过，最好将文件命名为诸如“2018-VOLVO-S60-RED-沃尔沃-红. jpg”这种具体阐明图片内容的名称。
请站在客户的角度思考一下如何在你的网站上搜索他们想要的产品。他们在搜索时使用怎样的词汇排列？在上面的示例中，汽车购物者可能会搜索诸如:
- VOLVO S60 2018款
- 沃尔沃 S60 红色
- VOLVO 红色 S60
所以上面的图片文件名可以涵盖若干查询项，便于被搜索引擎收录，以及被客户搜索到。请查看和分析你的网站数据报告和搜索关键字趋势报告，了解客户遵循哪些关键字模式。确定他们使用的最常见的命名模式，并将该公式应用于图片文件命名中。
如果你不希望从繁冗的数据中寻找灵感，也请务必在命名图片时使用相关的、有用的关键字（即尝试描述性的关键字），而不是使用无关的、蹭热度的关键字。
查看来自 Moz 的这条问答，了解对网站上的图片文件进行战略命名的重要性。它肯定可以提升你的页面SEO质量，也可以帮助你的网页和图片取得较高的搜索引擎结果页面排名 (Serp)。
2、 仔细优化你的 alt 属性
当浏览器无法正确呈现图片时，alt属性是图片的文本替代方法。它们还用于 web 辅助功能。即使图片可以正确显示，如果将鼠标悬停在图片上，你也会看到 alt 属性文本（具体取决于你的浏览器设置）。
alt 属性还可以为你的网站增加 SEO 价值。在你的网站上的图片中添加包含相关关键字的适当 alt 属性可以帮助你在搜索引擎中获得更好的排名。事实上，使用 alt 属性可能是你的产品在 Google 图片和网络搜索中被显示的最佳方式。
让我们看一下这条代码：
<img src=“2018-VOLVO-S60-RED-沃尔沃-红. jpg” alt=“2018 VOLVO 沃尔沃红色S60. jpg”>
如果你为图片命名了alt属性，那么搜索引擎就可以搜索到以上代码中的关键字。
关于alt属性，以下是几条基本的原则：
- 用简单的语言描述你的图片，就像你对图片文件名所做的那样。
- 如果你销售的产品具有型号或特殊属性，请在 alt 属性中使用它们。
- 不要让你的 alt 属性堆满了关键字 (例如 alt = “2018年最新款VOLVO沃尔沃汽车整车进口现正在以最优惠的价格出售”)。
- 不要将 alt 属性用于装饰图片。搜索引擎可能会惩罚你的过度优化。
最后，定期做一次对文件名和alt属性的检查是件明智的事。查看网页的来源，并检查你的 alt 属性是否已正确填写。不要因为过于忙碌而忽略了这些琐碎却很重要的事情。
3、 合理地选择图片尺寸和产品角度
通常的做法是从多个角度显示你的产品。回到沃尔沃汽车的例子，你不会只想展示车的一方面，特别是如果你想卖它的情况。显示以下照片可获得更多的关注：
- 精致的内饰细节
- 熠熠生辉的轮毂
- 行驶的动态
- 全家畅游的温馨场景
- 驰骋原野的风景
利用这些额外照片的不只是可以增强对访客的吸引，也可以吸引搜索引擎的青睐。而方式就是为每幅图片创建独特的 alt 属性。
- 2018-VOLVO-S60-RED-沃尔沃-红-内饰. jpg 可以选用的alt属性是：alt=“2018 VOLVO红色沃尔沃S60内饰图”
- 2018-VOLVO-S60-RED-沃尔沃-红-轮胎轮毂. jpg可以选用的alt属性是：alt=“2018 VOLVO红色沃尔沃S60轮胎轮毂图”
这里的关键是添加描述到你的基本 alt 属性，以便潜在的搜索者登陆你的网站查看。如果你做了这项额外的工作，搜索引擎将奖励你相应的流量和排名。
4、减小图片的文件大小
请参考以下事实：
- 近50%的消费者甚至不会等3秒后才能加载的电子商务网站。
- 而且， 在全球范围内，平均页面加载时间实际上正在增加。
- 亚马逊发现：如果他们的网页加载增加一秒， 他们每年就会损失16亿美元。
- 谷歌使用页面加载时间作为他们的算法中的排名因素。
如果你的图片在屏幕上慢慢“流口水”，需要超过15秒的时间来加载，好吧， 你可以和那个潜在的顾客说BYEBYE了!
那么，你有什么对策？
当客户到达你的网站时，可能需要一段时间来加载所有内容，这具体取决于你的文件有多大。文件尺寸越大，加载网页所需的时间自然就越长。
如果你可以减小网页上图片文件的大小并提高页面加载速度，则访客跳出率更低，即更能留住访客。
减少图片文件大小的一种方法是使用 Adobe Photoshop 中的“存储为 Web所用格式”命令。使用此命令时，可以在保证图片质量的前提下，将图片调整为尽可能低的文件大小。
例如，同样一张图片，选用“最佳”质量的图片高达77K。
而选用“中”质量的图片仅为27K。
在Photoshop“存储为Web所用格式”命令中，有几处可以调节的属性：
- 品质：在右上角找到这个 (即 30)。通常值在30以上不会引起明显的图片质量缺失。
- 文件格式：在右上角找到此文件 (即 JPEG)。
- 优化：在右上角勾选此复选框 (即 “优化”)。
- 颜色：在右上角勾选此复选框 (即转换为 sRBG)。
- 缩小和锐化：在右下角找到这个 (即 W: 和 H:)。注意根据页面需要调整为合适的大小。
- 预期文件大小：在左下角找到此数值
没有Photoshop怎么办？
如果你没有桌面版的Adobe Photoshop，还有许多在线工具可用于图片编辑。Adobe甚至有一个免费的图片编辑应用程序，名以Adobe Photoshop Express，可运行于智能手机IOS/Android和平板电脑。此工具并不具备 Adobe Photoshop 桌面版本的所有功能，但它涵盖了图片编辑的基础功能, 不需要花费大量的成本。
当然，也有另外一些不错的在线编辑器可选择：
- COMPRESS JPEG：快速压缩jpg和jpeg格式文件，完全免费，无需注册，立用立取。
- Pic Monkey ： 一些专家描述为“惊人的伟大的照片编辑工具”，功能较为强大，适合对图片压缩功能之外有要求的用户使用。基本费用为7.99美金每月。
- PIXLR ：界面十分友好，支持移动端应用程序，所以你可以在旅途中编辑。
- Canva ：另一个功能相对均衡的在线编辑器。
最后，不得不提及的是GIMP。GIMP 是一个开源的免费图片编辑软件应用程序，可以在 Windows、Mac 或 Linux 上运行。它可以做 Photoshop 能做的一切，但往往显得有点笨重。但作为一个免费的图片编辑应用程序，这是无法抗拒的使用理由。
多大的图片才合适？
对于电子商务网站所用的图片，一个很好的经验法则是尝试将图片文件大小保持在 70 kb 以下。这有时会很困难，特别是对于较大的图片。但尝试去尽可能优化是值得的。
5、选择正确的文件类型
目前有四种常用的图片文件格式：JPEG(扩展名可为.jpg或.jpeg)、GIF、PNG、WEBP。
- JPEG（.jpeg或.jpg）：虽然在某种程度上是旧文件类型，但JPEG 已成为互联网事实上的标准图片格式。JPEG 图片可以有很高的压缩率，这使较高质量的图片可能以更小的容量呈现。在上图中，JPEG 格式允许在较低的文件大小下获得体面的质量。
- GIF（.gif）：其图片质量低于 JPEG 图片，通常用于更简单的图片，如图标和装饰图片。GIF也支持动画，相信你不会陌生。关于图片优化，GIF非常适合网页上的那些简单的图片（其中仅包含几种颜色）。但对于复杂的图片和照片，GIF并不总是那么有吸引力。对于大型图片尤其如此。
- PNG（.png）：作为 GIF的替代品，PNG 图片正变得越来越受欢迎。PNG支持比GIF更多的颜色，并且它们不会像JPEG那样随着时间的推移而退化。尽管 PNG 文件类型开始使用的频率越来越高，但文件大小仍可能比 JPEG 图片大得多。请注意：PNG-24图片的文件大小是PNG-8 的三倍之多。这就是为什么你需要非常小心的使用PNG。
- WEBP（.webp）：WEBP格式是现代图像格式中的一位“多面手”，它由Google开发，旨在以更小的文件大小提供高质量的图像。有损压缩比同质量的JPEG小25-34%，无损压缩比PNG小26%。它还支持透明度（Alpha通道），这点类似于PNG，WEBP支持8位的透明通道，可以实现平滑的渐变透明效果，远超GIF的1位透明度（要么完全透明，要么完全不透明）。另外，它还能创建动画图像，直接作为GIF的替代品。动画WEBP支持有损、无损和透明度，通常比GIF文件小得多。WEBP是现代Web图像优化的首选格式，在确保有兼容性后备方案的前提下，应尽可能地用WEBP替代JPEG、PNG和GIF。
为了更直观地对比，我们可以看下面的表格：
| 特性 | WEBP | JPEG | PNG | GIF |
|---|---|---|---|---|
| 有损压缩 | ✅ (优) | ✅ (标准) | ❌ | ❌ |
| 无损压缩 | ✅ (优) | ❌ | ✅ (标准) | ✅ (简单) |
| 透明度 | ✅ (8位Alpha通道) | ❌ | ✅ (8位Alpha通道) | ✅ (1位，不平滑) |
| 动画 | ✅ (支持有损/无损) | ❌ | ❌ (有非标APNG) | ✅ (标准) |
| 文件大小 | 通常最小 | 较小 | 通常最大 | 较大 |
下面是一个极端的示例，其中所有三种文件类型的图片文件大小都保持不变，为 24kb：
正如你所看到的，JPEG 是明显赢家。GIF和PNG必须在质量上降低，才能保持相同的低文件大小。
以下是选择文件类型时需要记住的一些提示：
- 在大多数情况下，尤其是在电子商务网站中，WEBP、JPEG将是你的最佳选择。它们以相对最小的文件大小提供了最佳质量。
- 切勿将GIF用于大幅图片。文件将变得非常大，目前没有好的方法来减小它。请仅将GIF用于缩略图和装饰图片。
- PNG可以是JPEG和 GIF的一个替代品。如果你只能获得 PNG 格式的产品照片，请尝试使用PNG-8而非PNG-24。PNG-8擅长作为简单的装饰图片，尤其是背景是透明图案时。
大多数图片编辑软件可以将图片保存到上面讨论的任何图片格式。
6、优化缩略图
许多电子商务网站会使用缩略图图片，尤其是在目录页面上。它们迅速展示产品，而不占用太多资源。
缩略图是很棒的创意，但也要小心，因为它们可能是个“无声的杀手”，受害者就是页面加载速度。缩略图通常在购物过程中的关键点显示。如果它们阻止类别页面快速加载，可能会让缺乏耐心的潜在的客户转身而去。
那么我们可以怎么做呢？
- 使缩略图文件大小尽可能小。这可能是值得平衡质量和尺寸的最佳方法。请记住，缩略图会在不同页面频繁出现，缩略图的累积将对页面加载时间产生巨大影响。
- 改变 alt 属性文本，使其与同一图片的大版本采用不同的文本。
7、使用图片站点地图
如果你的网站使用 Javascript 库、图片弹出窗口或其他“华丽”的方式来改善整体购物体验，图片站点地图将帮助你的图片被Google等搜索引擎注意。
爬虫无法对网页源代码中没有专门调用的图片进行抓取。因此，为了让爬虫识别身份不明的图片，你必须在图片站点地图中列出它们的位置。
你可以在 robots.txt 文件中插入以下行，显示站点地图的路径:
Sitemap: http://example.com/sitemap_location.xml
或者，你也可以使用Google搜索控制台将网站地图提交给 Google。
谷歌有许多关于图片发布的指导方针，这可能有助于你的网站在 Serp 上排名较高。此外，你还可以使用 Google 网站地图向 Google 提供有关你网站上图片的更多信息，这可以帮助 Google 找到比自己更多的图片。
提交站点地图并不能保证你的图片一定会被谷歌编入索引，但这无疑是迈向图像 SEO 的积极一步。Google 搜索中心（之前称“网站站长工具”）对正确设置网站地图格式也有许多建议。
为所有图片添加特定标记非常重要。你还可以创建一个单独的站点地图来专门列出图片。重要的是在使用特定标记时，将所有必要的信息添加到你已经拥有或将要创建的任何站点地图中。在创建包含图片信息的站点地图时，请遵循这些 Google 建议的准则。
8、谨慎装饰图片
网站通常有各种装饰图片，比如大到背景图片，小到按钮和边框。任何与产品无关的东西都可能被认为是装饰图片。
虽然装饰图片可以增强网页的美观，但它们也可以导致一个较大的累积文件和缓慢的加载时间。因此，你可能需要仔细查看装饰图片，这样它们就不会损害你的网站将访问者转换为客户的能力。
方案就是检查网站上所有装饰图片的文件大小，并最大限度地减少文件大小。以下是几条相关的建议：
- 对于构成边框或简单图案的图片，请将其制作为 PNG-8 或GIF。你可以创建大小只有几百个字节的图片，同样十分美观。
- 如果可能，请使用 CSS 创建色块区域，而不是使用图片。尽可能地使用 CSS 样式来替换任何装饰图片。
- 仔细审查那些大规格壁纸风格的背景图片。这些可能是巨大的文件。在不破坏图片质量的情况下，尽可能地缩小它们。
这里有一个小妙招，那就是尽可能使用单色、灰度图片做重复铺底，而不是用一块大的背景图，这可以大大减少文件大小。
9、 使用内容分发网络 (CDN) 时要小心
CDN的全称是Content Delivery Network，即内容分发网络。其通过分布式的储存节点为不同地理位置的浏览者提供更快捷的浏览体验。目前许多电子商务网站也运用了这项服务。
正如任何事都有优缺点，CDN的一个缺点就是：涉及到反向链接的负面影响。你可能知道，反向链接是搜索引擎优化的一个关键因素，网站拥有较多的反向链接，其在搜索结果中的排名会做得越好。
而通过将图片放置在 CDN 上，你很可能会从自身域名中删除图片，并将其放置在 CDN 的域名上。因此，当有人链接到你的图片时，他们实际上是链接到了CDN 域名，并没有把这项权重带来的收益回馈给你的网站。
所以，关于是否使用CDN有以下提议供你参考：
- 仅仅因为某种东西是“潮流”， 并不意味着你也应该跟随它。首先确定这是否真的适合你的业务。
- 如果你的网站每个月都进行着大量的业务，那么 CDN 很可能是个好主意，因为它可以帮助解决带宽问题。
- 如果你的网站现在每天只是成千上万的访问量， 很有可能你目前的托管情况可以处理这种负载。
10、 测试图片
优化图片的全部意义在于帮助你获得更多的访问量和转化率。我们已经讨论过减少文件大小和让搜索引擎为你的图片编制索引的方法，但是如何测试这种方法的有效性呢？
- 你可能会通过提供客户希望看到的视图来提高客户忠诚度。解决这个问题的一个很好的方法是在顾客查看你的产品图片时，做一个小小的调查。一般来说，在线调查和与客户交谈是一个很好的习惯。不过，也要通过多重分析。
- 测试一下每个目录下面展示多少幅图片更合适。是选择每页10、30、100个产品，还是无限瀑布流的方式来展示？这需要测试网站的加载能力和访客的偏好。
以上，我们探讨了关于电子商务网站图片优化的10条技巧，希望不至于让你感到无从下手。
你知道了一些图片搜索引擎优化策略，了解了如何让你的产品照片易于被谷歌图片搜索到。你也知道了要如何充分利用 alt 属性，更了解了文件类型之间的区别以及何时选择正确的格式。
当然，图片优化本质上仍然是复杂的，我们刚刚触及表面，但是积极做好每一步，必然会带来长久的优化效果和奖赏。