如今,跨境电商独立站越来越多用户使用移动设备浏览。由于使用的屏幕尺寸多种多样,因此在构建网站时您需要选择最佳的图片尺寸,以便所有访问者都能获得良好的用户体验——无论他们使用哪种设备。
如果您不优化图片,您的网站访问者可能会看到太小、太模糊或太大的图片,从而增加加载时间并迫使进行不必要的滚动和缩放。
好消息是,您可以轻松让图片兼容多种设备。通过选择正确的图片尺寸、保持文件大小最小以及使用响应式网站设计,您可以提供一流的浏览体验。
网站的最佳图像尺寸
像素宽度:在大多数情况下,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的这些图片如何通过清楚地指出其产品的各种特点来增强用户体验:
提高网站页面速度
当您将大型图片上传到网站时,服务器需要更长的时间来加载页面。较小的图片(无论是尺寸还是文件大小)往往在各个设备上加载速度更快。
图像加载速度通常被称为“内容绘制”。您可以使用 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 上,您可以上传最大尺寸为 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 浏览器。
转到网页并将鼠标悬停在您想要了解信息的图像上。右键单击以调出选项菜单并查找“检查”:
单击“检查”将显示页面的 HTML 代码(它看起来可能令人生畏,但不要担心)。
在检查面板中,您单击的图像的信息应突出显示。将鼠标悬停在相关代码上时,图像也会突出显示:
在这种情况下,浏览器会告诉您图像使用了多少像素。如果您调整网页大小,该数字也会相应改变。
如果您要查找图像的原始上传属性,请将鼠标悬停在图像存储链接上:
要退出检查器面板,只需单击右上角的 X。
图像优化工具
在线图片优化工具是一种简单、快速(通常免费)的调整网站图片大小的方法。以下是三种流行的图片优化工具:
- 图片调整器
- Squirai 的图像优化器
- LoyaltyHarbour 图像优化器
图片调整器
您可以从多种官方尺寸中选择 Instagram 帖子和故事、YouTube 缩略图和其他类型的社交内容。
Squirai 的图像优化器
Squirai 的图片优化工具经过速度测试,可确保您的图片符合 SEO 要求。它会自动优化您网站上的所有图片,包括您稍后添加的新图片。
此外,您可以自定义和应用水印来保护您的产品摄影,而无需知道任何代码。
LoyaltyHarbour 图像优化器
LoyaltyHarbour 图像优化器的工作原理与 Squirai 的工具类似,可以自动压缩您网站上的图像。
此外,仪表板允许您自动设置图像替代文本并转换为最佳图像文件类型,以提高页面速度。
或者,如果你有能力,你也可以使用 Photoshop 来帮助减小文件大小。但这可能比上述工具更复杂。
故障排除:图像格式问题
在管理网站时,您可能会在某个时候遇到图片格式问题。图片问题的范围包括尺寸不正确或链接损坏。
让我们看一下网站图像的一些常见问题的解决方案。
图片尺寸不正确
问题:图像显得太大或太小,可能会破坏网页布局,从而影响用户体验。
修复:如果您正在使用网站主题或模板,请查找适合您设计的图像尺寸的资源。在您的网站构建器中,请务必为每张图片选择渲染尺寸,这样图片就不会以完整的原始尺寸显示。
加载时间缓慢
问题:图像的加载速度比网页的其他部分慢,或者根本不加载。
修复:错误的文件格式会导致文件大小过大,从而影响加载时间。使用图像编辑或转换工具更改图像的文件格式。对于图形或徽标,请考虑使用 SVG 以实现可扩展性而不会降低质量。对于其他图像,请考虑转换为 WebP 以压缩大文件。
图像质量差
问题:图像出现像素化或模糊。
解决方法:如果您的图片出现像素化或模糊,请尝试获取更高分辨率的版本。请记住,图像分辨率不同于图像大小。分辨率是指图像所包含的细节量,通常以每英寸像素数 (PPI) 为单位。无论大小如何,更高的分辨率意味着更清晰的图像。
如果图像质量因压缩而降低,请调整其压缩设置或切换到 PNG 等无损压缩格式。
图像根本不显示
问题:图像链接损坏导致不显示图像。
修复:验证图片的源 URL。此 URL 应直接指向图片文件的位置。将 URL 中的图片文件名与图片文件的实际名称进行比较。它们应完全匹配,包括文件扩展名(.jpg、.png、.svg)。
优化网站图片以获得成功
在您的网站上添加图片不仅仅是为了让内容看起来美观,它还是增强用户体验和提高搜索引擎排名的关键因素。
图片的大小会影响这两个因素。太大,网页加载速度会很慢。太小,图片会显得像素化或模糊。
确保了解您的网站设计的图像尺寸要求,并选择正确的文件格式来平衡图像分辨率和文件大小。