在一个顾客期待得到即时满足的世界里，快速加载电商网站至关重要。响应式图片可以帮助你提升加载速度和转化率。
图片质量固然对于高转化率很重要，但对于在线商店的用户体验和搜索引擎优化（SEO）而言，图片优化更是重中之重。学习如何优化图片可以带来丰厚的回报，既能提升品牌形象，又能吸引浏览谷歌图片的消费者。
什么是图片优化？
图片优化是指确保图片在桌面和移动端上看起来完美，不会影响网页性能的过程。其中涉及到为特定设备修改图片格式、尺寸和分辨率，并同时保持质量。
这里涉及到三个主要元素：
- 图片文件格式
- 图片尺寸（高度和宽度）
- 屏幕分辨率
为什么要优化图片？
图片对于良好的在线购物体验至关重要。如果顾客无法看到你的产品，他们就不会购买。根据HTTP Archive的数据显示，移动设备上未优化的图片占网页总大小的38%左右。
图片优化有助于降低网页大小，是良好电商网页设计的核心原则，可以带来以下好处：
平衡速度与质量
网络和移动设备的图片优化旨在平衡速度与质量。展示美观图片在电商中至关重要，它们为消费者创造了更好的浏览体验。
谷歌曾表示，谷歌算法用来排名页面的因素之一就是网站速度。页面加载缓慢意味着搜索引擎在其抓取预算中抓取的页面较少，这可能对你的检索产生负面影响。
改善搜索表现
优化后的图片有助于读者和搜索引擎更好地理解你的网站，从而提高在线内容的可见性。最新数据表明，图片在谷歌搜索中占到18%的搜索查询量。
图片优化可以帮助你的图片在谷歌的图片搜索中获得排名，从而为你的网站带来更多流量，并提升品牌形象。
如何优化网站图片
1. 使用简洁直接的图片名称
上传图片到你的网站，并保留相机默认命名真的很容易。当涉及到图片 SEO 时，重要的是利用相关关键词，帮助你的网站在搜索引擎上获得排名。
创建描述性的、关键词丰富的文件名对于图片优化至关重要。搜索引擎不仅会抓取网页上的文本，还会抓取图片文件名。
以下图为例：
你可以使用相机分配给图片的默认命名（例如 DCMIMAGE10.jpg）。不过，将其命名为 2012-福特-野马-LX-红色.jpg 会更好。
想一下顾客是如何在你的网站上搜索产品的。他们在搜索时会使用什么命名模式？在上面的例子中，汽车消费者可能会搜索以下关键词：
- 2012 红色福特野马 LX
- 福特野马 LX 红色 2012
- 红色福特野马 LX 2012
查看网站分析数据，了解顾客遵循什么关键词模式。确定他们最常用的命名模式，并将该公式应用于图片文件命名过程。
如果你不想以数据为导向，请确保在为图片命名时使用相关的、有帮助的关键词（即尽量具有描述性）。
查看这份来自 Moz 的问答，了解策略性地为网站图片文件命名的重要性。这肯定可以提升你的站内SEO，同时也可以帮助你的页面和图片在搜索引擎结果页面（Search Engine Results Page, SERP）上排名更靠前。
2. 仔细优化alt属性
Alt 属性是浏览器无法正确呈现图片时的替代文本。它们还被用于网站可访问性。即使图片已经呈现了，如果把鼠标悬浮在上面，也会看到 alt 属性文本（取决于浏览器设置）。
Alt 属性还为网站增加了 SEO 价值。为网站上的图片添加包含相关关键词的适当 alt 属性，有助于在搜索引擎中获得更好的排名。事实上，使用 alt 属性可能是电商产品出现在谷歌图片和网站搜索中的最佳方式。
让我们看一下 alt 属性的源代码。
图片优化的首要任务是为网站上的每张产品图片填写 alt 属性。
以下是 alt 属性的一些简单规则：
- 用简单的语言描述你的图片，就像你为图片文件命名那样。
- 如果你销售的产品有型号或序列号，请在 alt 属性中使用它们。
- 不要在 alt 属性中堆满关键词（例如，alt=“福特野马肌肉车马上购买便宜最优价”）。
- 不要对装饰性图片使用 alt 属性。搜索引擎可能因为过度优化而惩罚你。
最后，经常时不时地做一次完整性检查。查看网页访问来源并检查 alt 属性是否填写正确。当你以创业的速度前进时，你会惊讶于自己遗漏了什么。
3. 明智选择图片尺寸和产品角度
展示产品的多个角度是常见做法。回到福特野马的例子，你不会想只展示汽车的一个镜头，尤其是如果你想出售它的话。你最好展示以下镜头：
- 内部
- 尾部，尤其是空气扰流板
- 轮圈
- 发动机……它毕竟是一辆野马
利用这些额外照片最好的方法就是填写 alt 属性。实现这点的方式是为每张产品图片创建独一无二的 alt 属性。
- 2012-福特-野马-LX-红色-真皮-内饰-轮圈.jpg -> 使用 alt 属性：alt="2012 福特野马LX红色真皮内饰轮圈"
- 2012-福特-野马-LX-红色-尾部-视图-空气-扰流板.jpg -> 使用 alt 属性：alt="2012 福特野马LX红色尾部视图空气扰流板"
此处重点是添加描述到基本 alt 属性，以便潜在的搜索者登录你的网站。如果你做了额外的工作，谷歌会通过搜索者的搜索给予你回馈。
4. 调整图片大小
你需要处理网站上的图片，以确保适配所有设备，尤其是移动设备和高分辨率屏幕。
为了适配高分辨率显示屏，你需要至少2倍分辨率的图片，才能确保图片清晰不模糊，因为这类显示屏在相同物理空间中容纳更多像素。举例来说，如果你的网站有一个200像素 x 200像素的图片插槽，则你的图片需要达到400像素 x 400像素，才能在高分辨率显示屏上保持清晰。目前几乎所有手机的屏幕分辨率都是2倍或更高。
实现这一点的最简单方法是使用内容分发网络（CDN）。CDN会处理调整图片大小，为用户设备提供最佳图片格式。它还能提高图片文件本身的加载速度，因为其服务器位置更接近最终用户。
💡注意：如果你是Shopify商家，则你的Shopify模板使用的是我们的图片CDN。想知道它如何工作？上传图片并尝试Shopify的CDN。如果你是主题开发者，请了解如何在Liquid中编写响应式图片代码。
5. 选择正确的图片格式
图片格式是网站最重要的元素之一。有些图片格式的质量高于其他格式，有些占用空间多，影响网站加载时间。
首先，有两种主要类型的图片格式：光栅图片和矢量图片。
矢量图片是基于数学公式构建的。如果你需要能够缩放至不同尺寸而不牺牲质量的图片，请使用矢量图片。最常见的矢量图片是可缩放矢量图片（SVG）文件。它是徽标、图标和其他简单图形的理想选择，无论缩放多少，都能保持清晰度和锐利度。
光栅图片由像素组成，可以形成高度精细的图像，如照片。图片包含的像素越多，图片的大小和分辨率就越高。
随着时间的推移，光栅图片更新和改进了编解码器。例如，GIF是早期版本的网页图片编解码器，但由于压缩技术将相邻像素平均化了，因此质量较差。最新技术寻求以人眼更难察觉的方式进行编码和压缩，这意味着使用最新图片格式时，我们可以提供质量更高的图片，同时文件大小更小。以下格式是目前网络上最常用的：
- JPG：广泛使用的照片图片格式。它使用有损压缩来减少文件大小，但牺牲了一些质量。
- PNG：因其处理透明背景图形而受到网页设计师的欢迎。该文件类型在压缩时保留了所有原始数据，适合网站上的图形和图表。
- WEBP：专为网络构建的现代格式。它支持有损和无损压缩，比JPG和PNG更小，但能保持相似或更好的质量。
- AVIF：最新的图片格式，AVIF能很好地压缩图片，同时质量不会降低。
并非所有浏览器都支持所有版本。这时，图片CDN再次发挥作用，它可以自动选择适合特定浏览器的最佳格式并转换你的原始图片。如果你没有使用具有此功能的CDN，则需要在HTML中使用<picture>标签。
💡注意：Shopify的CDN会自动检测浏览器支持的文件格式，并发送最佳选项。例如，它可以将图片转换为WebP或AVIF（如果支持），并将PNG或JPEG图片作为旧浏览器的后备选项。
6. 使用图片网站地图
如果你的网站使用 Javascript 图库、图片弹窗或其他“浮夸”的方式来提升整体购物体验，图片网站地图将有助于你的图片引起谷歌关注。
网页爬虫无法抓取网页源代码中没有指定调用的图片。因此，为了让爬虫器知道未识别的图片，你必须在图片网站地图中列出它们的位置。
你可以在 robots.txt 文件中插入以下行，显示网站地图的路径：
网站地图：http://example.com/sitemap_location.xml
或使用 Search Console（搜索控制台）将网站地图提交给谷歌。谷歌有许多图片发布准则，可以帮助你的网站在 SERP 上排名更高。此外，你可以使用谷歌网站地图向谷歌提供更多关于你网站上图片的信息，相比让谷歌自己查找，这样有助于谷歌找到更多你的图片。
作为Shopify商家，你将获得自动生成的网站地图，其中包含有你的产品图片。这意味着，你的产品页面上的图片以及博客或系列中使用的任何其他重要图片，都可以通过你的网站地图被搜索引擎发现。这提高了你的图片出现在搜索结果中的机会，并为你的网站带来更多曝光量。
Shopify会在添加新页面或产品时，或现有页面被移除时自动更新网站地图。因此，你无需手动创建或更新网站地图。
7. 使用优秀的图片内容分发网络（CDN）
专业的图片CDN提供图片转换功能，因此你只需上传一张高质量图片，图片CDN即可根据每个请求调整大小、重新格式化和缓存图片。使用Shopify的图片CDN时，文件大小在你上传图片时会自动优化。文件质量的变化人眼无法察觉，但会改善页面加载时间。CDN还会自动检测客户端支持的文件格式，并提供动态编辑功能，使你能够在不丢失原始文件的情况下裁剪和转换图片。
💡Shopify商家可以获得专业服务团队的支持，以帮助提高你的网站速度、转化率和搜索引擎优化。
8. 测试图片
图片优化的重点是帮助提高利润。我们已经讨论过缩小图片文件大小，并让搜索引擎为你的图片建立索引，但如何测试图片以了解那些图片可以转化更多顾客呢？
- 测试每个页面的产品图片数量。由于加载时间对一些非托管电商网站是一个问题，你可能发现减少页面图片数量将会提高点击率和销售额。也有可能每页提供大量图片将会改善用户体验并带来更多销售额。确定这点的唯一方法就是进行测试。
- 测试你的顾客喜欢什么角度。通过提供顾客想要看到的视图，你可能会看到顾客忠诚度有所提高。弄清这点的一个好方法是调查顾客，了解他们在查看产品图片时最喜欢什么。一般来说，与顾客进行调查和交谈是一个很好的习惯。不过，还是要通过测试来验证。
- 测试分类页面上应该有多少个产品列表。10、20、100款产品？测试分类页面上列出的产品数量，以了解你的顾客最喜欢哪个数量。
图片优化工具
现在你已经了解了一些图片优化的最佳实践，让我们来看看一些可用于网站的图片优化工具和插件吧。
请注意，如果你在使用Shopify或专业图片CDN，则无需使用这些工具。唯一例外情况是SVGOMG——大多数图片CDN不提供对SVG的优化。
Squoosh
Squoosh是一款易于使用的基于网络的图片压缩应用。只需将图片拖放到工具中，并选择优化后的图片格式即可，如JPEG XL、WEBP、PNG等。
TinyPNG
TinyPNG是另一款流行的图片优化工具。其使用智能有损压缩技术为网页（WEBP）、JPEG和PNG图片缩小图片文件大小。
你可以为应用程序或商店缩小图片文件大小，还可以缩小动画图片。它不仅可用于图片压缩，还提供API集成和开发者工具，以将TinyPNG集成到自定义软件解决方案中。
TinyPNG的API会自己调整缩略图片大小，删除任何不必要的部分并添加更多背景。如果你在WordPress上运行网站，也可以将其作为WordPress插件使用。
SVGOMG
SVGOMG是另一款简单的图片优化工具。它提供多个选项清理和缩小SVG文件。只需上传或复制SVG源代码即可开始操作。你可以调整各种控件，创建一张与原始图片相同但更小的图片。
通过图片优化保持图片的功能性
优化图片对于成功运营在线业务至关重要。它不仅提升产品的外观，还帮助创造顺畅的购物体验，并让你在网上被发现。
像Shopify这样的电商平台会自动以最佳格式向观众传递你的图片，从而帮助你增加销量，发展在线业务。
阅读详细内容
图片优化常见问题
如何在不损失质量的情况下优化图片？
在不损失质量的情况下优化图片的最佳方法是，使用适合特定情况的正确图片大小和格式。你可以使用本文中列出的手动工具生成文件，并编写正确的HTML供浏览器使用。或者使用Shopify上的专业图片CDN，实现在任何设备上自动转换和提供高质量图片。
有哪些优秀的图片优化器？
Squoosh和TinyPNG是一些常见的优秀图片优化器。它们都是基于网络的工具，提供多种格式选项，如JPG和PNG图片。如果你有更复杂的SVG，请使用SVGOMG来优化图片。
我需要在Shopify上优化我的图片吗？
你无需在上传之前优化图片。如果你这样做，有时可能导致图片质量变差，从而导致转化率降低和退货增加。Shopify的CDN会自动以更适合电商的质量设置压缩图片。你的主题代码应使用Liquid的image_url和image_tag编写，以自动利用诸多响应式图片功能。
