热门工具
立即入驻

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

独立站5个月前发布 woodie
81 0 0

如今,跨境电商独立站越来越多用户使用移动设备浏览。由于使用的屏幕尺寸多种多样,因此在构建网站时您需要选择最佳的图片尺寸,以便所有访问者都能获得良好的用户体验——无论他们使用哪种设备。

如果您不优化图片,您的网站访问者可能会看到太小、太模糊或太大的图片,从而增加加载时间并迫使进行不必要的滚动和缩放。

好消息是,您可以轻松让图片兼容多种设备。通过选择正确的图片尺寸、保持文件大小最小以及使用响应式网站设计,您可以提供一流的浏览体验。

 

网站的最佳图像尺寸

像素宽度:在大多数情况下,2500 像素非常适合在浏览器中全屏显示。任何小于该值的图像如果需要填充浏览器宽度,可能会被截断或显得模糊。 

图像大小:图像的最佳整体(像素)尺寸取决于您的使用情况,例如,背景图像需要比博客文章图像更大。

文件大小:任何大于 20 MB 的文件都会严重影响您的网站速度。大多数情况下,较小的图像(最大 2 MB,但大约 500 KB)效果更好。

图片属性:图片属性(alt 文本或 alt 标签)是基于文本的,不会影响您网站的性能。但是,它们用于通过屏幕阅读器软件解释图片,因此请保持属性文本简短而简洁。

适合桌面和移动设备的最佳图像尺寸

下表提供了跨境电商最佳桌面版和移动版网站上图片的推荐尺寸:

网站图片类型桌面图像尺寸(宽 x 高)移动图像尺寸(宽 x 高)建议的长宽比
背景图2560 x 1400 像素360 x 640 像素16:9
全屏形象1280 x 720 像素360 x 200 像素16:9
网站横幅1200 x 400 像素360 x 120 像素3:1
博客图片1200 x 800 像素360 x 240 像素3:2
徽标(矩形)400 x 100 像素160 x 40 像素4:1
徽标(方形)100 x 100 像素60 x 60 像素1:1
网站图标16 x 16 像素16 x 16 像素1:1
社交媒体图标32 x 32 像素48 x 48 像素1:1
灯箱图像(全屏)1920 x 1080 像素360 x 640 像素16:9
缩略图300 x 300 像素90 x 90 像素1:1

 

这些是建议尺寸,可能需要根据您是否使用响应式网站设计进行调整。

图像的渲染尺寸小于其上传尺寸几乎总是一个好主意。

为什么图像大小对网站很重要?

对于网站来说,图像大小很重要,主要有三个原因:

  • 它创造了更好的用户体验。
  • 它提高了网站页面速度。
  • 它有助于网站排名。

创造更好的用户体验 

为网站上的每个用例提供正确大小的图像有助于改善用户体验。访问者可以访问适当级别的细节,而无需滚动查看整个图像。

如果图片质量低下、像素化或太小,则会影响内容的感知质量。对于电子商务网站而言,这可能会导致客户质疑您的业务或产品的质量。

相反,高质量、尺寸正确的图像可以提高产品的感知价值,并向潜在客户提供更多的视觉信息。

例如,看看可持续鞋店Allbirds的这些图片如何通过清楚地指出其产品的各种特点来增强用户体验:

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

提高网站页面速度

当您将大型图片上传到网站时,服务器需要更长的时间来加载页面。较小的图片(无论是尺寸还是文件大小)往往在各个设备上加载速度更快。 

图像加载速度通常被称为“内容绘制”。您可以使用 Google 的PageSpeed Insights检查网页的内容绘制和其他页面速度指标。

以下是大图像导致页面加载速度缓慢的一个例子。服务器花了 2.1 秒加载第一张图片,花了 4.1 秒加载最大的图片:

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

如果页面加载时间超过六秒,一半的客户 就会放弃购物车,因此优化页面速度以避免高跳出率非常重要。

帮助网站排名

网站排名是指您的网站在搜索引擎结果页面中的位置。针对搜索进行优化的网站将在相关用户搜索查询中排名靠前。

Google 使用一系列指标来确定哪些网页在搜索结果中排名靠前。图像的质量(或者更准确地说,它们产生的更好的用户体验)可能是Google 算法中的一个因素。

网站图片尺寸指南 

您会在网站上看到五种主要类型的图像:

  • 背景图像
  • 英雄图片
  • 网站横幅图片
  • 博客图片
  • 徽标

每种类型的网络图片都有不同的尺寸要求。让我们来看看最常见的尺寸。

背景图像

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

背景图像通常是网站上最大的图像。该图像用作主页或其他登录页面的背景。

例如,自行车零售商Cowboy将其产品用作主页背景,让其产品成为焦点。无论在什么设备上查看,它都会填满整个屏幕。

建议图片宽度: 2560像素

建议图片高度: 1400像素

长宽比: 16:9

建议文件大小: 20 MB

全屏图片

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

英雄图像与背景图像类似,但高度通常较小(大约是背景图像的一半)。如果您需要在屏幕上显示更多文本,而又不想让用户滚动查看,英雄图像是一个不错的选择。

在上面的例子中,BLK&Bold使用具有较窄纵横比的英雄图像来填充屏幕,同时为下方的内容留出空间。

建议图片宽度: 1280 像素至 2500 像素之间

建议图片高度: 720 像素至 900 像素之间

长宽比: 16:9

建议文件大小: 10 MB

网站横幅图片

横幅图像可以有不同的大小和形状,具体取决于访问者所在的位置以及您想要向访问者展示的内容。最典型的网站横幅类型是横幅广告

Google Ads是推广横幅广告最受欢迎的服务之一。他们为提交的图片提供了尺寸指南

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇
加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇
自适应展示广告的常见尺寸 – Google Ads帮助

如果您正在考虑非广告的横幅图像,则矩形选项(例如,300 x 200 像素或 970 x 90 像素)通常更好。

建议图片宽度:请与广告平台联系

建议图片高度:请与广告平台核实

宽高比:多种

建议文件大小: 150 KB(请与广告平台核对)

博客图片

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

博客图片的类型和大小各不相同。上面的帖子来自睡眠专家Kulala,虽然特色图片的上传尺寸为 1200 x 620 像素,但渲染尺寸较小,为 894 x 462 像素。

为您的网页设置渲染大小有助于优化您的设计并保持文件较小(Kulala 帖子中的图像仅为 95.1 KB)。

当谈到博客文章的主要标题图像(位于页面顶部的图像)时,它们应该在整个博客中具有统一的大小。

建议图片宽度: 1200像素

建议图片高度: 800像素

长宽比: 3:2

建议文件大小: 3 MB

徽标

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

您的徽标很可能是您网站上最小的图像之一(除非您将标签栏中的图标算在内)。根据您的徽标设计,您应该选择矩形或正方形的长宽比。

大多数标志都采用 1:1 的正方形比例,您可以在上面的 Kulala 示例的左下角看到。

矩形比例适用于较长的品牌名称或徽标由文字而非图形组成的情况。Shopify 自己的网站徽标使用较长的 4:1 比例。

建议图片宽度: 100像素

建议图片高度: 100像素

长宽比: 1:1、2:3、4:1

建议文件大小: 1 MB

移动端图片尺寸建议 

选择正确的图像尺寸

在较小的手机屏幕上,许多用户喜欢能够放大图片。因此,请尝试在图片大小和文件大小之间取得平衡。

高分辨率图像可让您的网站看起来专业而全面,并具有出色的缩放功能。保持相似图像的纵横比相同,以在各种页面类型中保持统一的设计。

例如,您可以将电子商务商店中的所有产品图片设为正方形。正方形图片在较小的屏幕上更容易重新定位。此外,正方形和垂直图片非常适合移动设备屏幕,让访问者无需滚动即可看到更多图片。

 Shopify 上,您可以上传最大尺寸为 5000 x 5000 像素、文件大小最大为 20 MB 的图像。

对于方形产品图片,建议尺寸为 2048 x 2048 像素。

请记住,要使缩放功能发挥作用,您的图像必须大于 800 x 800 像素。

记住文件大小

图像文件越大,会影响网站速度,尤其是当访问者使用智能手机时。许多网站建设平台还对上传文件的最大大小有限制。例如,Shopify 的最大文件大小为 20 MB。

如果您需要压缩图片以减小其尺寸,可以使用在线图片整工具。使用这些工具,您可以将大型图片文件重新格式化为新的尺寸或文件类型。

大多数情况下,您会希望标题背景图像小于 10 MB,而产品照片应该小得多 – 大约 300 KB。

调整照片大小以适应移动设备屏幕尺寸

Shopify 会自动调整图片大小以适应较小的屏幕。但在其他平台上,图片可能需要手动编辑才能适应移动设备。请记住,桌面和移动屏幕的方向相反。 

再次提醒,大文件会减慢您网站的加载时间。虽然无损压缩可以为您提供最高质量的图像,但它通常会创建大文件,您的网站可能需要很长时间才能加载。请考虑使用具有最佳分辨率的最小图像文件。

虽然 Shopify 的响应式设计和算法擅长跨设备调整图像大小和显示图像,但通过周到的文件大小调整为他们提供帮助,可以获得更流畅的购物体验。

最好使用哪种图像文件类型?

正确的图像文件类型可确保图像质量高,同时保持文件大小可控,从而提高网站性能。以下是最常见的图像文件格式及其最佳用例:

JPEG

JPEG(或 JPG)是最广泛使用的数字图像文件格式之一,因为它在文件大小和图像质量之间实现了平衡。它是显示照片和多色复杂图像的流行选择。

但是,JPEG 采用有损压缩,这意味着在压缩图像时会损失一些图像质量。

巴布亚新几内亚

PNG 是一种无损压缩格式,这意味着它可以减小文件大小而不会牺牲图像质量。它支持透明度,因此对于需要透明背景的图像来说,它是不错的选择。

虽然 PNG 的文件大小通常比 JPEG 大,但它们能够保持清晰度,因此适合用于详细的图形和徽标。

SVG

SVG(可缩放矢量图形)是一种矢量图形格式,这意味着它使用数学方程式来渲染图像。这使得 SVG 图像可以缩放到任意大小而不会造成质量损失。

SVG 是徽标、图标和其他需要在多个位置使用的图形的理想格式。SVG 的文件大小通常也比其他格式小,有助于缩短加载时间。

赫伊克

HEIC,即高效图像格式,是 Apple 设备使用的一种文件格式。它使用先进的压缩技术来创建高质量的图像,文件大小比同等 JPEG 更小。

但是,非 Apple 设备并未普遍支持 HEIC。

WebP

WebP 是Google 开发的一种图像格式。它为网络上的图像提供无损压缩,与 JPEG 或 PNG 相比,通常可将文件大小缩小 30% 以上。

这可以显著提高网站的加载时间,但值得注意的是,WebP 尚未得到所有浏览器的普遍支持。

动态图片

GIF 是一种位图图像格式,以支持简单动画而闻名。它使用无损压缩并将图像减少到最多 256 种颜色,从而减小文件大小。

虽然在静态图像方面,GIF 已被 PNG 基本取代,但它仍然是短循环动画的热门选择,并得到浏览器的普遍认可。

TIFF

TIFF,即标记图像文件格式,是一种高质量、无损的格式,受到图像编辑应用程序的广泛支持。由于其高分辨率和色深,它是存储用于专业打印的图像的理想选择。

使用 TIFF,可以方便地将多幅图像和页面保存在单个文件中。但是,文件大小往往很大。

如何查找网站上的图片尺寸

查找任何网页上图像大小的最快方法(无需下载图像)是使用浏览器的检查工具。 

此方法适用于 Mac 和 Windows,使用 Safari、Chrome 或 Firefox 浏览器。

转到网页并将鼠标悬停在您想要了解信息的图像上。右键单击以调出选项菜单并查找“检查”:

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

单击“检查”将显示页面的 HTML 代码(它看起来可能令人生畏,但不要担心)。

在检查面板中,您单击的图像的信息应突出显示。将鼠标悬停在相关代码上时,图像也会突出显示:

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

在这种情况下,浏览器会告诉您图像使用了多少像素。如果您调整网页大小,该数字也会相应改变。

如果您要查找图像的原始上传属性,请将鼠标悬停在图像存储链接上:

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

要退出检查器面板,只需单击右上角的 X。

图像优化工具

在线图片优化工具是一种简单、快速(通常免费)的调整网站图片大小的方法。以下是三种流行的图片优化工具:

  • 图片调整器
  • Squirai 的图像优化器
  • LoyaltyHarbour 图像优化器

图片调整器

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

 

您可以从多种官方尺寸中选择 Instagram 帖子和故事、YouTube 缩略图和其他类型的社交内容。

Squirai 的图像优化器

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

Squirai 的图片优化工具经过速度测试,可确保您的图片符合 SEO 要求。它会自动优化您网站上的所有图片,包括您稍后添加的新图片。

此外,您可以自定义和应用水印来保护您的产品摄影,而无需知道任何代码。 

LoyaltyHarbour 图像优化器

加载时长超过六秒,约50%客户就会放弃购物!跨境电商独立站图片优化篇

LoyaltyHarbour 图像优化器的工作原理与 Squirai 的工具类似,可以自动压缩您网站上的图像。

此外,仪表板允许您自动设置图像替代文本并转换为最佳图像文件类型,以提高页面速度。 

或者,如果你有能力,你也可以使用 Photoshop 来帮助减小文件大小。但这可能比上述工具更复杂。

故障排除:图像格式问题

在管理网站时,您可能会在某个时候遇到图片格式问题。图片问题的范围包括尺寸不正确或链接损坏。

让我们看一下网站图像的一些常见问题的解决方案。

图片尺寸不正确

问题:图像显得太大或太小,可能会破坏网页布局,从而影响用户体验。

修复:如果您正在使用网站主题或模板,请查找适合您设计的图像尺寸的资源。在您的网站构建器中,请务必为每张图片选择渲染尺寸,这样图片就不会以完整的原始尺寸显示。

加载时间缓慢

问题:图像的加载速度比网页的其他部分慢,或者根本不加载。

修复:错误的文件格式会导致文件大小过大,从而影响加载时间。使用图像编辑或转换工具更改图像的文件格式。对于图形或徽标,请考虑使用 SVG 以实现可扩展性而不会降低质量。对于其他图像,请考虑转换为 WebP 以压缩大文件。

图像质量差

问题:图像出现像素化或模糊。

解决方法:如果您的图片出现像素化或模糊,请尝试获取更高分辨率的版本。请记住,图像分辨率不同于图像大小。分辨率是指图像所包含的细节量,通常以每英寸像素数 (PPI) 为单位。无论大小如何,更高的分辨率意味着更清晰的图像。

如果图像质量因压缩而降低,请调整其压缩设置或切换到 PNG 等无损压缩格式。

图像根本不显示

问题:图像链接损坏导致不显示图像。

修复:验证图片的源 URL。此 URL 应直接指向图片文件的位置。将 URL 中的图片文件名与图片文件的实际名称进行比较。它们应完全匹配,包括文件扩展名(.jpg、.png、.svg)。

优化网站图片以获得成功

在您的网站上添加图片不仅仅是为了让内容看起来美观,它还是增强用户体验和提高搜索引擎排名的关键因素。

图片的大小会影响这两个因素。太大,网页加载速度会很慢。太小,图片会显得像素化或模糊。

确保了解您的网站设计的图像尺寸要求,并选择正确的文件格式来平衡图像分辨率和文件大小。

图像大小如何影响网站加载时间?

图片文件越大,下载并显示在用户屏幕上所需的时间就越长。这会减慢网页的加载时间,从而对用户体验和搜索引擎性能产生负面影响。因此,通过平衡质量和文件大小来优化图片非常重要。

如何在不损失质量的情况下减小图像文件的大小?

您可以使用无损压缩来减小图像文件大小而不会损失质量,无损压缩会从图像文件中删除不必要的数据,而不会影响图像的外观。Adobe Photoshop 或在线图像优化器等工具提供了无损压缩选项。亦或者找专业设计师协助解决。
© 版权声明

相关文章

暂无评论

暂无评论...