同一张照片，两种不同用途。
商品列表中的小图用于辨认椅子的外形和颜色，特写则需要展示织物纹理与缝线。两处都发送同一个大文件会浪费流量；两处都缩成小图，又会丢失有用的细节。
为商品列表和详情页准备合适的尺寸，并为真正需要放大查看的场景保留较大的文件。按顾客实际看到的大小逐一检查：适合缩略图的压缩程度，可能让特写中的布料变得模糊。
整把椅子展示外形和颜色，放大图展示顾客选择布料前需要仔细查看的细节。
把文件、尺寸和加载时机调整好。
先在手机上打开一个加载缓慢的页面。确定顾客首先需要看到哪张图片，再检查以下三点。
根据效果选择格式
在相同显示尺寸下比较候选格式。只有当顾客常用浏览器中的边缘、纹理和颜色仍然正常时，才选择较小的文件。
向浏览器提供合适的尺寸
显示宽度为 400 CSS 像素的图片，在两倍像素密度的屏幕上可能需要 800 像素宽的文件。提供多种图片版本和准确的显示尺寸，让浏览器选择。了解响应式图片的选择方式。
优先加载重要图片
让打开页面就能看到的主图尽快加载。将页面下方的图片延后加载，并预留空间，避免图片出现时价格和按钮突然移动。图片加载指南。
文件变小，只完成了一半检查。
在修改前后，用相同页面、相同视口宽度和相同测试条件进行比较。要检查顾客实际收到的内容，而不只是媒体库中的文件。
实际下载了什么？
记录实际下载的图片文件和字节数。如果页面仍在发送旧的原图，优化后的文件就没有发挥作用。
保留了哪些细节？
以相同显示尺寸比较相同裁切区域。以椅子为例，分别检查列表图、完整图片和放大图中的布料、缝线及颜色。
加载过程中发生了什么？
查看主图何时出现，以及价格或购买按钮是否移动。在相同条件下重复测试，再判断是否有所改善。
只是想发送一个大文件？使用 Devenia Send。