电商网站的产品图片往往远超实际需求，导致页面加载速度不必要的拖慢。例如，Graze.com 的某张图片实际尺寸比显示需求大了约 75%。
在线零售商常面临图像优化问题：用于展示产品的图片过大且加载缓慢，直接导致顾客流失。幸运的是，通过一个简单的 HTML 属性即可显著改善网站性能，同时保持图像的视觉吸引力。
产品图片是电商销售的核心工具。由于线上购物无法触摸实物，顾客高度依赖图片和描述做出购买决策，因此高质量的产品图能有效提升转化率。
然而，低效的图片也会带来隐性成本。Akamai 2017 年报告显示，若网站加载超过 3 秒，超半数移动用户会放弃访问；加载时间每延迟 100 毫秒，转化率下降 7%；每延迟 2 秒，跳出率增加 103%。
适当尺寸
要在“呈现出色产品图像”与“提供快速加载体验”之间取得平衡，关键在于精准控制图像尺寸。
以健康零食订阅商 Graze 为例，其首页使用了多张订阅服务展示图。在 13 英寸 MacBook Air 上查看时，这些图片的分辨率和文件大小均远超屏幕显示所需。例如，某张图片在屏幕上仅宽 464 像素，但实际交付宽度达 830 像素。
该图片完整尺寸为 830×495 像素（约 41 万像素），压缩后约 81 KB；若调整为实际显示尺寸 464×277 像素（约 12.8 万像素），大小仅为 20 KB 左右。
单张图片差异看似微小，但 Graze 首页图片总重约 2 MB。若所有图片均按此比例优化，首页图片负载可减少 1.5 MB（降幅达 75%），这将显著提升移动端加载速度。
Graze 已在使用 CDN 并做了不错的图像压缩，表现优异。但若能将上述产品图尺寸减少 75% 并保持同等画质，便可真正实现美观与性能的兼得。
Fred Perry：作为另一案例，服装零售商 Fred Perry 在其产品图中应用了 HTML srcset 属性。该属性为浏览器提供多个版本的产品照片，确保无论在大屏还是小屏设备上，都能自动加载尺寸最匹配的图片。
Fred Perry 网站通过 srcset 属性为浏览器提供了多种产品图片选项。
srcset 属性
HTML srcset 属性兼容主流移动及桌面浏览器，覆盖约 90% 的互联网用户，旨在为不同屏幕尺寸提供最佳图像。
<img src="product-400.png" srcset="product-200.png 200w, product-400.png 400w, product-600.png 600w, product-800.png 800w, product-1000.png 1000w, product-1200.png 1200w" alt="product name">
在上述示例中，不支持 srcset 的旧版浏览器将回退使用 src 指定的默认图像，虽非最优但不影响正常显示。
绝大多数现代浏览器则会根据屏幕宽度和分辨率自动选择最佳图像。例如，当页面显示宽度为 750 像素时，浏览器通常会选择 “product-800.png”。虽然仍略大于实际需求，但相比 1200 像素或 200 像素的版本，已大幅接近理想尺寸。
对于常规产品图展示，此方案已足够高效。该流程通常可自动化实现，具体取决于电商平台架构，可能需少量开发配置。
一般做法是上传最大尺寸原图至电商平台，再由脚本自动生成较小版本并嵌入产品详情页。
若需更精细地控制各断点下的图像选择，还可搭配使用 sizes 属性。
<img src="product-400.png" srcset="product-200.png 200w, product-400.png 400w, product-600.png 600w" sizes="(max-width: 200px) 200px, (max-width: 400px) 400px, 600px" alt="product name">
sizes 属性允许开发者明确指定每个断点对应的图像尺寸。结合 srcset 与 sizes，可构建一套强大的响应式图像策略，有效提升网站性能。