图片对电子商务至关重要。首页、分类页面和活动落地页上的图片都能帮助吸引顾客。但这里有个挑战:你是否针对最佳性能优化了这些图片?
没有人比克里斯·扎卡里亚斯更有资格讨论图像优化,他是实时图像处理平台 imgix 的创始人兼首席执行官。作为 YouTube 最早的 Web 开发者之一,他创建了 YouTube 的 HTML5 视频播放器以及 Feather——一个加载速度极快的 YouTube 超轻量版本,以帮助全球网络连接缓慢的用户。
实用电子商务:为什么图片对电子商务公司如此重要?
克里斯·扎卡里亚斯:图片是你与用户的第一次互动,它们在大脑中注册的速度远快于阅读文字。如果你想留下美好的第一印象,就必须拥有出色的图片。互联网日益以图片为中心,而这也是你销售产品的方式。
PEC:加载缓慢的图片如何影响转化率?
扎卡里亚斯:对于加载缓慢的页面,人们会很快离开网站——每增加一秒加载时间,跳出率就会高出 56%。你希望消费者留下来,但在移动设备上处理这个问题正变得越来越困难,因为移动设备用户经常在低质量和高质网络之间切换。如果你不解决这个问题,发送的图片就会太大,导致用户直接放弃。
此外,其他国家的带宽资源往往不成比例地少,或者带宽性能较差。如果你试图进入这些国际市场,可能会因为未针对它们优化网站而错失巨大的机会。
PEC:在线零售商如何轻松优化图片?
扎卡里亚斯:最重要的是,除非绝对必要,否则不要向移动设备提供高分辨率照片。如果你没有将照片调整大小和裁剪为适合网页的形式,你就只是在向最终用户发送大量他们根本看不到的信息。
接下来是确保为你的图像内容使用正确的格式。否则,你会通过线路传输更多不必要的图像内容。
最后是正确校正颜色。一般来说,当缩小图像时,它们往往会变得灰暗。你需要在调整大小后返回并校正颜色,适当微调,以保持你所期望的视觉冲击力。
作为电子商务网站或移动应用,你应该重点关注这三项主要工作。
PEC:你的公司 imgix 如何解决这三个问题?
扎卡里亚斯:我们提供一个平台来实时处理图像,这样你就不必在自己的服务器上完成这项工作。你不必自己处理这些图像——无论是手动在 Photoshop 中操作还是编写脚本来完成——而是可以连接到我们的平台,我们会与你合作进行设置。
将其与我们连接后,我们提供动态提供图像的方式。这意味着你可以按需请求任意尺寸的图像。你可以说:“我要这个图像为400乘400像素的正方形;我需要裁剪它,同时保留所有空间;我希望将图像的鲜艳度提高10%。”所有这些都可以按需完成。
我们的平台设置为适应任何网络速度。我们已部署工具,可根据你的规格调整压缩率。随着这些新技术日益标准化,我们能够根据浏览器或移动设备实际报告的情况进行动态响应。例如,如果用户位于撒哈拉以南非洲的2G网络上,我们可以发送较低分辨率的图像,而不是像在新加坡等主要大都市(拥有更高带宽)的用户那样发送高分辨率图像。
动态处理意味着我们不断为用户提供他们希望看到的内容。因此,每当苹果发布具有新像素比的iPhone时,我们都能在第一天自动提供支持。
PEC:如果我使用你的平台,考虑到你会生成所有这些不同版本,我应该从什么样的图片分辨率开始?
扎卡里亚斯:绝大多数公司不需要对图片或格式施加任何限制。对我们来说,小于 100 MB 的文件是最理想的。
PEC:你能描述一下 Feather,然后将这项工作与 imgix 联系起来吗?
扎卡里亚斯:在 YouTube 的最后一年里,我以各种形式参与了网站的各个方面工作。一位工程师抱怨 YouTube 的一个页面大小增长到了约 1.2 或 1.3 MB。他提出了一个挑战,说:“我们应该能够在不包含视频的情况下,以不到 100 KB 的大小提供 YouTube。”我将此视为我新项目的个人使命,这就是 Feather 的由来。
Feather令人着迷之处在于其加载速度极快。当我们将其推向市场时,我们将其设为YouTube的一个可选版本。但我们发现延迟数据上升,这意味着YouTube变慢了。
我们花了几天时间才弄清楚原因。通过Feather,我们突然打开了此前从未触及的部分地区。那些试图加载1.2MB网页的人,在撒哈拉以南非洲、西伯利亚农村、印度郊区等互联网连接非常缓慢的地方无法加载该页面。但通过Feather,他们首次能够访问YouTube并观看视频。这令人惊叹。
这引导我走上了一条探索之路,深入研究了网页性能以及网页的不同组成部分如何影响人们访问内容的方式。了解图片的来源、它们如何进入网页、我们如何处理它们,以及这些做法如何真正造福全球用户,最终催生了 imgix 的理念。Feather 是 imgix 的精神前身。

