作为购物网站，卖产品，首先得卖图，所以一个购物网站的图片大小，图片加载方式都会影响网站的加载速度，影响顾客体验，以及谷歌百度搜索排名;
那么有网友就会问，优化图片不就是把图片尺寸调小就行了么？但是你要想一下，调小图片尺寸，会导致像素急速降低，另外一种情况是网速不是太好，打开网页图片半天加载不出来，一篇空白，真心体验差，有没有比较合理的优化图片速度的方式呢？
这里就是要介绍的shopify图片优化方式;使用progressive image这种技术优化网页图片，
什么是progressive JPEG？他是与Baseline JPEG对应，如下通过加载效果来看出他们的区别;
如下是用进步的JPEG的网页加载效果：
Progressive JPEG的优点：
体验用户
一个以渐进方式编码的JPEG文件，在浏览器上的渲染方式是由模糊到清晰的。用户能在渐变的图像当中获得所需信息的反馈。如果内容不是用户所期待的，用户就能提前前往新的页面。
文件大小
有实验证明，在JPEG文件小于10KB的时候，使用标准型编码（霍夫曼表已经被优化）的JPEG文件要小于使用渐变式编码的JPEG文件（发生概率为75 ％）。当文件大于10KB时，渐变式编码的JPEG文件有94％的概率拥有比标准编码的文件更小的体积。
知道了他的优点之后，我们就开始使用Progressive JPEG工具压缩图片;
第1步 - 分析您的网站
要找到可以用渐进式替换的baslicline JPEG图像，我们将使用WebPageTest.org。此工具非常棒，因为您还可以在不使用任何其他工具的情况下获得基线JPEG图像的渐进版本。
英文的分析以下测试站点后的性能评估部分的查询查询查询查询结果：
第2步 - 下载渐进式JPEG图像
。有各种各样的工具可以让您将baslicline JPEG图像转换为渐进式图像以下是一些：
选项1 - 使用WebPageTest.org将基线JPEG压缩为渐进式
找到可以替换的图像列表后，导航到“ 详细信息”部分，然后按查看所有图像
该部分将显示您网页上的所有图片。在本教程第1中步的每张图片上按分析JPEG并向下滚动到底部。
在那里会你发现原始图片的质量85图像。将所有质量85图像保存到您的计算机并继续下一步。我们强烈建议使用与原始文件名相同的文件名保存图像，这样更换过程将更加容易。
选项2 - 使用Optimizilla将Baslicline JPEG转换为渐进式
如果您计划将来向您的网站上传更多图片，或者您的网站尚未上传，则可以使用Optimizilla将Baslicline JPEG图片转换为渐进式图片。使用此工具，您可以优化多达20个图像，并使用有损压缩算法将其缩小到质量85甚至更低。
重要！低于85可能会导致质量下降。保持谨慎。
选项3 - 使用CMS插件优化图像
如果您有WordPress博客，则可以使用WP Smush轻松优化基线JPEG图像。查看本教程，了解有关如何使用WP Smush的详细说明
第3步 - 替换旧图像
重要！在继续之前，请务必备份您的网站或您计划替换的图像。
使用文件管理器或任何FTP客户端，找到步骤1的图像。并删除用步骤2中电子杂志的新质量85图像替换它们。确保再次它们具有相同的文件名，以避免任何404错误或加载问题。
第4步 - 测试更改
上传完所有图像后，清除浏览器缓存并打开您的网站，看看是否所有内容都正常运行。之后，您可以使用WebPageTest.org分析您的网站，以检查是否所有内容都已正确完成。以下是您应在“ 详细信息”部分中看到的结果：
