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

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

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

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

网站的最佳图像尺寸

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

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

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

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

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

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

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

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

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

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

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

创造更好的用户体验 

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

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

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

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

提高网站页面速度

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

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

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

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

帮助网站排名

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

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

网站图片尺寸指南 

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

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

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

背景图像

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

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

建议图片宽度： 2560像素

建议图片高度： 1400像素

长宽比： 16：9

建议文件大小： 20 MB

全屏图片

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

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

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

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

长宽比： 16：9

建议文件大小： 10 MB

网站横幅图片

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

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

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

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

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

宽高比：多种

建议文件大小： 150 KB（请与广告平台核对）

博客图片

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

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

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

建议图片宽度： 1200像素

建议图片高度： 800像素

长宽比： 3：2

建议文件大小： 3 MB

徽标

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

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

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

建议图片宽度： 100像素

建议图片高度： 100像素

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

建议文件大小： 1 MB

移动端图片尺寸建议 

选择正确的图像尺寸

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

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

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

记住文件大小

图像文件越大，会影响网站速度，尤其是当访问者使用智能手机时。许多网站建设平台还对上传文件的最大大小有限制。例如，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 浏览器。

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

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

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

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

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

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

图像优化工具

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

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

图片调整器

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

Squirai 的图像优化器

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

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

LoyaltyHarbour 图像优化器

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

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

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

故障排除：图像格式问题

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

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

图片尺寸不正确

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

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

加载时间缓慢

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

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

图像质量差

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

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

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

图像根本不显示

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

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

优化网站图片以获得成功

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

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

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