如何获得快速加载、外观精美的产品图片

已发表: 2016-02-25

任何店主都知道,照片是每个产品页面的重要组成部分。 就其本身而言,产品照片可以说服购物者在购买过程中采取下一步行动——提供精美的、高度详细的产品照片,让您更接近点击“添加到购物车”按钮.

然而,为您的购物者提供所有这些照片可能是有代价的。 随着您添加到产品页面的每个大型照片或媒体文件,加载时间都会增加。 而您的购物者,无论他们多么感兴趣,都不愿意等待超过几秒钟。

店主面临的挑战是:找到一种方法为购物者提供他们想要的高分辨率照片,同时保持产品页面的快速加载。 这听起来像是一个难以克服的挑战,但实际上有很多方法可以平衡快速和美妙,从图像压缩到 WordPress 插件。

您的客户确实可以拥有他们的蛋糕并吃掉它。 让我们看看如何在保持质量的同时加快产品照片的加载时间。

为什么商店的速度很重要(提示:不仅仅是 SEO)

拥有快速加载的产品照片与拥有吸引人的照片同样重要的原因有几个。 大多数店主首先想到的是搜索引擎。

谷歌从 2010 年开始将网站速度作为其搜索结果的排名因素。从那时起,几乎所有针对电子商务网站的搜索引擎优化建议都包含“加快商店速度”或“减少加载时间”的建议。

确实,速度更快的网站在搜索排名中的表现会更好,所有其他条件都相同。 但 SEO 并不是速度如此重要的唯一原因。 由于用户体验,谷歌首先将速度作为排名因素。

真正归结为:购物者不想等待。 他们不想等待发货,不想等待答复,当然也不想等待您的商店加载。 因此,如果您为潜在客户提供一个缓慢、滞后的产品页面……那么,这说明他们与您的其他体验可能会怎样?

没有人喜欢等待。尤其是你的潜在客户。
没有人喜欢等待。 尤其是你的潜在客户。

因此,虽然大图像文件大小可能会导致页面加载缓慢,这可能会损害您的 SEO,但这些缓慢的页面也会——更重要的是——激怒你的购物者。 这就是为什么在快速和美丽之间取得平衡如此重要的原因。

考虑到这一点,让我们继续讨论可用于使图像文件更小同时保持其质量的方法。

先试试这个:使用特定于 Web 的压缩来保存您的图像

购物者想要大的、非常详细的并且能够放大的产品照片(如果你的商店启用了缩放功能,那就是)。 如果您的任务是减小文件大小,这似乎是不可能的。

谢天谢地,事实并非如此。 各种应用程序和网站为您的照片提供网络就绪压缩,允许您压缩文件同时保持其质量。 许多这些应用程序变得如此高效,以至于未经训练的眼睛无法发现压缩图像和未压缩图像之间的差异。

以网络就绪格式保存时,即使是最高分辨率的照片仍然看起来很棒 - 并且加载速度很快。
以网络就绪格式保存时,即使是最高分辨率的照片仍然看起来很棒 - 并且加载速度很快。

以下是您如何使用网络就绪压缩直接从相机保存原始产品照片。

如果您可以访问 Adob​​e Photoshop,请尝试“保存为网络”选项

如果您使用任何版本的 Adob​​e Photoshop, “保存为网络”选项正是您为商店压缩产品照片所需要的。 在 Photoshop CC 2015 中,可以在文件 > 导出 > 保存为 Web 下找到该选项; 在以前的版本中,该选项位于“文件”>“另存为 Web”中。

通过 Photoshop 进行压缩就像“保存为 Web”一样简单。 (图片来源:Adobe)
通过 Photoshop 进行压缩就像“保存为 Web”一样简单。 (图片来源:Adobe)

从出现的新菜单中,您可以调整生成的图像大小、压缩和格式。 您还将获得一个近似的加载时间和文件大小——如果您对压缩照片的要求,您需要知道的一切。

没有 Photoshop? 没问题:试试这些免费的在线工具之一

不是每个人都可以使用 Photoshop,但这不应该阻碍你。 有很多免费的在线工具旨在压缩您的照片

最好的两个是 Kraken Image Optimizer 和 TinyPNG。 这两种工具都可以将您的图像缩小到令人惊讶的小尺寸,同时仍然保持质量。

小图像尺寸,大图像影响。 (图片来源:Kraken.io)
小图像尺寸,大图像影响。 (图片来源:Kraken.io)

一旦工具完成了您上传的图像,您就可以保存它们并将它们添加到您的商店。 当然,它增加了一个额外的步骤,但想想所有(加载)时间它会节省你的购物者。

使用 WooCommerce? 编辑 WordPress 设置或尝试插件

您可能知道也可能不知道图像压缩内置于 WordPress中。 这种压缩将您的 JPEG 压缩到其原始大小的 90%,但这对于选择巨大、高度详细的照片或大型画廊的商店来说可能还不够。

您必须控制此内置压缩的一个选项是编辑 WordPress 的 functions.php 文件。 如果您愿意,这将允许您增加或减少在图像进入媒体库之前发生的自动压缩量。

想要更轻松的路线? 您可以随时尝试插件。 TinyPNG 有自己的,适用于 JPEG 和 PNG。 使用免费帐户,您每月最多可以缩小 100 张图像。

除非您需要透明度,否则请选择 JPEG

要记住的另一件事:文件格式。 当然,您可以随心所欲地压缩图像,但有些格式自然会比其他格式大。

一般来说,JPEG 应该是您选择的格式,除非您出于某种原因需要透明度。 如果需要透明度,您应该选择透明 PNG。

其他格式更大或更不方便在线压缩。 虽然您可能想在您的产品页面上使用有趣的动画 GIF……但您可能应该重新考虑。 加载时间的权衡不值得您的购物者可能会发出短暂的笑声。

为您的商店启用内容交付网络

尽管现代 Internet 连接和改进的托管功能加快了购物者加载商店所需的时间,但仍可能出现无法预料的延迟。 如果购物者在您的服务器所在的全球范围内,有时这些延迟是不可避免的。

幸运的是,有一种方法可以为他们加快速度(不仅仅是产品照片等较大的文件)。 内容交付网络 (CDN) 利用缓存从本地服务器交付存储的内容,而不是从单个位置交付按需内容,从而加快所有购物者的体验。

使用 CloudFlare 或 Amazon CloudFront 之类的 CDN,您的商店的缓存(即,不是最新的)副本将显示给访问者。 访问者还将从离他们最近的 CDN 服务器接收内容。 这两件事都大大加快了加载时间,尤其是对于大型照片和媒体文件。

您的商店在使用和不使用 CDN 的情况下如何运作。 (图片来源:Cloudflare)
您的商店在使用和不使用 CDN 的情况下如何运作。 (图片来源:Cloudflare)

除了压缩之外,使用 CDN 是一种非常快速地提供产品照片的绝妙方法,尤其是在您不非常频繁地更新商店的情况下。 (当然,如果有什么需要紧急更新,您可以关闭 CDN。)

其他一些可以快速平衡的方法

上面提供的想法是您可以做的最大、最有意义的事情,以在看起来不错的产品照片和快速加载之间取得平衡。 但这里还有一些提示要记住:

  • 选择白色背景。 一般来说,图像包含的颜色越少,文件大小就越小。 一旦压缩开始发挥作用并且调色板进一步减少,这将更加真实。
  • 消除不必要的产品镜头。 有十个不同角度的鞋子照片吗? 您可能可以减少到五个并将加载时间减少一半。
  • 首先加载缩略图,然后单击时仅显示完整大小。 这样购物者就会期待等待更大的照片。
  • 如果照片不起作用,请尝试视频... 异地托管。 从 YouTube 或 Vimeo 加载视频不会减慢您的商店速度,而且它是对产品照片概念的巧妙转折。

惊人的产品图片不必减慢您的网站(或您的购物者)的速度

看起来拥有华丽产品照片的唯一方法是满足于缓慢的商店……或者获得快速加载产品页面的唯一方法是满足于微小、高度压缩的照片。 但我们不敢苟同。

只需对您的产品照片进行一些优化,您就可以在快速加载和精美外观之间找到完美平衡。 您的网站和购物者都不会放慢速度。

对如何在您的 WooCommerce 商店中获得令人惊叹的产品照片而又不让事情变得迟缓有任何疑问吗? 或者更好的是,您想分享您自己的任何提示? 我们很乐意在评论中收到您的来信!