大数跨境

如何优化电商产品图片,以实现更快的页面加载速度和更高的转化率

如何优化电商产品图片,以实现更快的页面加载速度和更高的转化率 电商实践
2015-07-06
0
导读:电商产品摄影需要传达商品的价值与功能,同时激发消费者的购买欲望。在可能的情况下,产品图片还应保持简洁、加载迅速。

电商产品摄影需兼顾价值传达与购买欲激发,同时保持图片简洁、加载迅速。核心挑战在于以较小文件体积生成大尺寸、高吸引力的图片。

沃尔玛(Walmart)作为线上线下零售巨头,在画质与文件大小间取得了出色平衡。例如,其网站“Junior Wonder Woman”印花T恤图片尺寸为450×450像素,仅12 KB。

沃尔玛可能通过脚本优化图片并提供WebP格式,使450像素见方的图像仅占12 KB。

Hot Topic的神奇女侠印花T恤图片同样展示了良好平衡:尺寸443×598像素足以辅助销售,而45 KB的文件大小有效减少了页面加载时间。

Hot Topic这张相对较大的产品图片仅为45 KB。

相比之下,Popfunk同款T恤图片尺寸为1,000×1,000像素,大小达1,349 KB(约1.3 MB)。尽管画质尚可,但远超前两者优化水平。数据显示,沃尔玛每KB可承载超16,000像素。

Popfunk图片虽支持放大,但文件体积显著更大。

如表所示,沃尔玛和Hot Topic在产品图优化上表现优异,Popfunk则较差。(宽高单位为像素)

常见优化策略包括使用图像压缩工具、专业处理软件(如Adobe Photoshop CC 2015)或PHP、Python等脚本语言。

图像压缩工具

市面上有大量付费及免费压缩工具,涵盖在线网页版与本地下载版。以下为常用工具推荐:

基于网页的工具:

  • TinyPNG
  • PunyPNG
  • JPEG Reducer
  • JPEG Optimizer
  • 在线图像优化器
  • 缩小图片
  • 立即压缩
  • 图像优化器
  • 压缩 JPEG
  • Compressor.io
  • Optimizilla
  • 压缩 PNG
  • Kraken.io
  • 在线 WebP 转换器

可下载的图像压缩工具:

  • Trimage (Linux, OS X, Windows)
  • JPEGmini (Linux server, OS X, Windows)
  • Radical Image Optimization Tool (RIOT) (Windows)
  • PNG Gauntlet (Windows)
  • ImageOptim (OS X)
  • PNGOUT (Windows)
  • iResize (OS X)

图像处理软件

Adobe Photoshop CC 2015是当时顶尖的摄影处理方案,其新增的图像生成器专为网页设计优化,相比传统“保存为Web所用格式”,能在同等压缩级别下输出更小文件。

以下以SnapStock.io上Anthony Delanoix发布的知识共享许可图像为例,模拟女士“日落”T恤产品图进行演示。

示例原始图像在Photoshop CC 2015中的显示效果。

原图大小2.53 MB,分辨率3744×5616像素(240 PPI)。调整为电商标准规格后,尺寸变为500×750像素(72 PPI)。

在Photoshop CC 2015中,可通过“文件”>“导出”>“导出为”或使用快捷键(Windows: Ctrl+Alt+Shift+W;OS X: Cmd+Opt+Shift+W)调用新导出功能。

新版图像导出功能取代了旧版“保存为Web所用格式”,支持菜单或快捷键启动。

导出对话框提供文件格式、质量及分辨率选项,设置简洁易用。

导出对话框选项精简,操作便捷。

将格式设为JPEG、质量设为75%后,导出的日落图像仅31.7 KB,即每KB约11,829像素,画质良好且加载迅速。

导出图像在保证画质的同时实现了小体积,利于快速加载。

图像处理脚本

使用脚本是兼顾美观与加载速度的最有效方式。主流编程语言均提供图像处理库,虽需一定开发技能,但易上手且效果显著。例如Laravel PHP Framework搭配Intervention Image库(支持GD Library或ImageMagick)便是高效组合。

各语言常用图像处理库如下:

PHP:

  • GD Library
  • ImageMagick

Python:

  • Pillow
  • Python Imaging Library
  • scikit-image
  • PythonMagick

Ruby:

  • rMagick
  • DevIL Image Library
  • ChunkyPNG

Node.js:

  • node-canvas
  • GraphicsMagick for Node
  • node-imagemagick
【声明】内容源于网络
0
0
电商实践
电商实践
内容 8035
粉丝 0
电商实践 电商实践
总阅读1.1k
粉丝0
内容8.0k