在使用移动设备上网的用户多于使用PC端用户的今天，线上品牌需要在构建网站时选择最佳的图片尺寸（来匹配不同的设备尺寸），以便所有访问者都能获得良好的用户体验。如果您不优化图片，您的网站访问者可能会看到太小、太模糊或太大的图片，从而延长加载时间并迫使不必要的滚动和缩放。不过无需过分担心，让您的图片与多种设备兼容并不复杂。通过选择正确的图片尺寸、保持文件大小最小并使用响应式网站设计，您可以给消费者提供一流的浏览体验。像素宽度（像素宽度是指图片在宽度方向上的像素数）：在多数情况下，2500像素非常适合在浏览器中拉伸全屏。任何小于该数字的图片需要填充浏览器宽度将会被截断或不清晰。图片大小：图片的最佳整体（像素）大小取决于您的具体使用情况，例如，背景图片需要比博客文章图片大。文件大小：任何大于20MB的尺寸都会影响网站速度。在大多数情况下，较小的图片（最大为2 MB，但约为500 KB）会更好。图片属性：图片属性（alt text 或 alt tag）基于文本，不会影响网站的性能。但是，它们用于通过屏幕阅读器软件解释图片，并且是Web可访问性的关键元素。为保证属性文本简洁，可以将alt文本保持在 100 个字符以下。
| Website image type |
Desktop image dimensions (W x H) |
Mobile image dimensions (W x H) |
Recommended aspect ratio |
| Background image |
2560 x 1400 pixels |
360 x 640 pixels |
16:09 |
| Hero image |
1280 x 720 pixels |
360 x 200 pixels |
16:09 |
| Website banner |
1200 x 400 pixels |
360 x 120 pixels |
3:01 |
| Blog image |
1200 x 800 pixels |
360 x 240 pixels |
3:02 |
| Logo (rectangle) |
400 x 100 pixels |
160 x 40 pixels |
4:01 |
| Logo (square) |
100 x 100 pixels |
60 x 60 pixels |
1:01 |
| Favicon |
16 x 16 pixels |
16 x 16 pixels |
1:01 |
| Social media icons |
32 x 32 pixels |
48 x 48 pixels |
1:01 |
| Lightbox images (full screen) |
1920 x 1080 pixels |
360 x 640 pixels |
16:09 |
| Thumbnail image |
300 x 300 pixels |
90 x 90 pixels |
1:01 |
表格内是建议的尺寸，具体需要根据您是否使用响应式网站设计进行调整。通常，图片的渲染大小应小于其上传大小。当然，实际操作中，由于现在的手机分辨率都很高，几百像素的宽会有点模糊，我们一般宽度会给到1000像素，一般只要不放大看是不会模糊的。
- 它有助于提高网站排名。
为网站提供正确大小的图片有助于改善用户体验。访客可以访问适当级别的详细信息，并且无需滚动页面即可查看整个图片。当图片质量低或者像素太小时，会影响内容的感知质量。对于电商网站而言，这会让客户质疑您的业务或产品的质量。相反，高质量、大小正确的图片可以提高商品的感知价值，并为潜在客户提供更多视觉信息。例如，下面来自可持续鞋履品牌 Allbirds 的图片如何通过清楚地指出其产品的各种功能来增强用户体验。
当您将大尺寸图片上传到网站时，服务器需要更长的时间来加载页面；而较小的图片（尺寸和文件大小）往往加载得更快。图片加载速度通常称为“内容绘制”。您可以使用Google的PageSpeed Insights检查网页的内容绘制和其他页面速度指标。如果页面加载时间超过 6 秒，会有一半的客户放弃购物车。优化页面速度以避免高跳出率非常重要。
图示由大图片导致页面加载速度缓慢，服务器加载第一个图片花了 2.1 秒，加载最大的图片花了 4.1 秒。
网站排名是指您的网站在搜索引擎结果页面中的位置，针对搜索进行优化的网站在相关搜索查询中排名靠前。Google使用大量指标来确定哪些网页在其搜索结果中排名靠前。图片质量（或者更准确地说，它们产生的改进用户体验）是Google算法中的一个重要因素。
网站上有五种主要类型的图片：背景图片，主图图片，网站横幅图片，博客图片，和logo标志。每种类型的 Web 图片都有不同的大小要求。让我们来看看最常见的尺寸。背景图片通常是网站上最大的图片。该图片用作首页或其他登录页面的背景。
自行车零售商 Cowboy 将其产品用作主页背景，使其产品成为中心位置。无论在什么设备上查看，该背景图片都会填满屏幕。
主图图片与背景图片类似，但高度往往更小，大约是背景图片的一半。如果您需要在屏幕上显示更多文本而不让用户滚动查看，主图是一个不错的选择。BLK & Bold使用了一个纵横比较窄的主图图片来填充屏幕，同时为下面的内容留出空间。
建议图片宽度：介于 1280 像素和 2500 像素之间建议图片高度：介于 720 像素和 900 像素之间横幅图片可以有不同的大小和形状，具体取决于它们所在的位置以及您希望向访问者展示的内容。最典型的网站横幅类型是横幅广告。谷歌展示广告图片常见尺寸_移动端
如果您不考虑广告的横幅图片，矩形图片（例如，300 x 200 像素或 970 x 90 像素）会是一个更好的选择。博客图片的类型和大小可能会有所不同。上面的帖子来自睡眠品牌Kulala，虽然图片的上传像素为1200x620，但渲染大小较小：仅894x462像素。为网页设置渲染大小有助于优化您的设计并保持较小的图片（Kulala 帖子中的图片只有 95.1 KB）。当涉及到博客文章的主标题图片（main header images，页面顶部的图片）时，您应该在博客中统一这些图片的尺寸大小。
建议文件大小：3 MB
您的logo可能是您网站上最小的一个图片。根据您的标志设计，您应该选择矩形或方形纵横比。大多数徽标都采用方形比例1：1，您可以在上面的Kulala示例的左下角看到。矩形比例适用于较长的品牌名称或徽标由文字而不是图形组成的 Logo。如Shopify自己的网站logo使用更长的 4：1 比例。
建议文件大小：1 MB
在较小的移动端屏幕上，许多用户都喜欢能够放大图片。因此，请平衡图片大小和文件大小。高分辨率图片为您的网站提供专业和全面的外观，并具有出色的缩放功能。保持图片有相同的纵横比，以保证跨页面设计的一致性。您可以在电子商务商店方块中制作所有商品图片。方形图片在较小的屏幕上更容易重新定位。此外，方形和垂直图片非常适合移动端，使访问者无需滚动就能看到更多图片。💡 在Shopify上，您可以上传最大 5000 x 5000 像素、文件大小最大为 20 MB 的图片。对于方形商品图片，建议使用 2048 x 2048 像素的大小。注意，为保证图片的缩放功能能够正常进行，您的图片必须大于 800 x 800 像素。
文件大小较大的图片会影响网站速度，尤其对移动端设备而言。许多建站平台对上传也有最大尺寸限制。例如，Shopify使用的最大文件大小为 20 MB。如果您需要压缩图片以控制文件大小，您可以使用一些在线图片大小调整工具。使用这些工具，您可以将大型图片文件重新格式化为新的尺寸或文件类型。在大多数情况下，您需要低于10 MB的标题背景图片，产品照片大约300 KB。
Shopify会自动调整您的图片大小以适应移动端较小的屏幕。但在其他平台上，图片可能需要手动编辑才能使其可用于移动设备。值得注意的是，PC端和移动端的图片方向相反。同样，请记住，大文件会减慢您网站的加载时间。虽然无损压缩可以为您提供最高质量的图片，但它通常会创建大文件，您的网站可能需要很长时间才能加载。考虑使用具有最佳分辨率的最小图片文件。虽然Shopify的响应式设计和算法擅长跨设备调整图片大小和显示图片，但为它们提供合适的文件大小可以带来更流畅的购物体验。
最好使用的图片文件格式
合适的图片格式可以保证图片的高质量，同时保持文件大小可以获得更好的网站性能。以下是最常见的图片文件格式：JPEG（或 JPG）是使用最广泛的数字图片文件格式之一，因为它很好地平衡了文件大小和图片质量。在显示具有多种颜色的照片和复杂图片时，JPG是主流选择。但是，JPEG使用的是有损压缩，也就是说，在压缩图片时会丢失一些图片质量。PNG是一种无损压缩格式，这意味着它可以在不牺牲图片质量的情况下减小文件大小。它支持透明度，使其成为需要透明背景的图片的不错选择。虽然 PNG的文件大小通常比 JPEG大，但PNG的高清晰度使其适合于详细的图形和徽标。SVG（scalable vector graphic, 可缩放矢量图形）是一种矢量图片格式，这意味着它使用数学方程式来渲染图片。这允许将SVG图片缩放到任意大小而不会降低图片质量。SVG是需要在多个位置使用的徽标、图标和其他图形的理想格式。SVG的文件大小通常小于其他格式，有助于缩短加载时间。HEIC（high efficiency image format，高效图片格式），是Apple设备使用的一种文件格式。它使用先进的压缩技术来创建文件大小比同等 JPEG 更小的高质量图片。WebP是Google开发的一种图片格式。它为Web上的图片提供无损压缩，与JPEG或PNG相比，文件大小通常会减少 30%以上。这可以显著缩短网站加载时间，但是WebP尚未得到所有浏览器的普遍支持。GIF是一种位图图片格式（a bitmap image format），以其支持简单动画的能力而闻名。它使用无损压缩并将图片减少到最多 256 种颜色，从而产生更小的文件大小。虽然GIF在很大程度上已被PNG取代用于静态图片，但它仍然是简短、循环动画的流行选择，并且被浏览器普遍认可。TIFF（tagged image file format，标记图片文件格式）是图片编辑应用程序广泛支持的一种高质量、无损格式。由于其高分辨率和颜色深度，它是存储专业打印图片的最佳选择。使用TIFF，可以方便地将多个图片和页面保存在一个文件中。但是，文件大小往往很大。
在任何网页上查找图片大小的最快方法（无需下载图片）是使用浏览器的Inspect工具。此方法适用于Mac和 Windows，以及Safari、Chrome或 Firefox浏览器。转到网页并将鼠标悬停在要了解其信息的图片上。用鼠标右键单击以显示选项菜单并查找 Inspect：单击 Inspect 将显示页面的HTML代码（它可能看起来很吓人，但别担心）。在检查面板中，应突出显示有关您所单击图片的信息。将鼠标悬停在相关代码上时，图片也会高亮显示：在这种情况下，浏览器会告诉您图片使用了多少个像素。如果您调整网页大小，该数字将相应更改。如果要查找图片的原始上传属性，请将鼠标悬停在图片存储链接上：
退出检查器面板，只需单击右上角的 X。
在线图片优化工具是一种简单、快速（通常免费）的调整网站图片大小的方法。以下是三种流行的图片优化工具：图片调整器Image Resizer，图片优化器Squirai，和图片优化器LoyaltyHarbour。Image Resizer是Shopify的免费在线图片大小调整工具，它支持跨营销渠道和社交媒体使用。您可以从Instagram帖子和故事、YouTube缩略图和其他类型的社交内容的各种官方维度中选择要处理的图片。
Squirai的图片优化工具经过速度测试，确保您的图片符合SEO要求。它会自动优化您网站上的所有图片，包括您之后新增的图片。此外，您可以自定义和使用水印以保护您的产品图片，而无需了解任何代码。
LoyaltyHarbour的工作原理类似于Squirai，即可自动压缩您网站上的图片。此外，LoyaltyHarbour的仪表板允许您自动设置图片替代文本并转换为最佳图片文件类型，以提高页面速度。当然，您也可以使用Photoshop来帮助减小文件大小，但这个操作比上述的工具更复杂。
在管理网站时，您可能会在某个时候遇到图片格式问题。图片问题包括大小不正确，也可能是链接断开。以下我们一起看看网站图片的常见问题的解决方案。问题：图片显示太大或太小会破坏网页的布局，从而导致用户体验受到影响。解决方法：如果您使用的是网站主题或模板，请为您的设计查找有关正确图片尺寸的资源。在建站神器中，请务必为每个图片选择渲染大小，以便图片不会以其完整的原始大小显示。问题：图片的加载速度比网页的其余部分慢，或者根本无法加载。解决方法：错误的文件格式可能会导致不合适的文件尺寸，从而影响加载时间。使用图片编辑或转换工具更改图片的文件格式。对于图形或logo，请考虑使用SVG以实现可扩展性，同时不会降低图片质量。对于其他图片，请考虑转换为 WebP 以压缩大文件。解决方法：如果您的图片看起来模糊，可以尝试采购更高分辨率的版本。请记住，图片分辨率与图片大小不同。分辨率是指图片包含的细节量，通常以每英寸像素数（PPI） 为单位。分辨率越高意味着更清晰的图片，无论图片大小尺寸如何。如果压缩降低了图片质量，请调整其压缩设置或切换到无损压缩格式，如 PNG。解决方法：验证图片的源 URL。该URL应直接指向图片文件的位置。URL中的图片文件名应该与图片文件的实际名称完全一致，包括文件扩展名（.jpg、.png .svg）。
网站图片不仅仅是让网站看起来不错，它更是增强用户体验和提高搜索引擎排名的关键因素。图片的大小不合适会起到负面作用：太大，您的网页加载速度可能会很慢；太小，您的图片可能会显得像素化或模糊。请务必了解网站设计的图片尺寸要求，并选择正确的文件格式来平衡图片分辨率和文件大小。
文末，我们小小总结一下实践中的情况。deco德科团队资深UI设计师浩哥认为，实践中，文中的最佳比例可以作为参考。“在我看来，图片尺寸、硬件设备、软件代码，这三者是分不开的。” 拿banner举例，假如代码不做处理，只靠图片自适应的话，笔记本电脑看的时候是全屏，可能我们办公电脑只有大半屏了，或者，16：9的电脑看是全屏，16：10的电脑就不是了。假如代码做处理，不管你是什么电脑，都要全屏，那用户看到的图片并不完全一样，因为设备尺寸不一样，非要全屏肯定会有遮挡住的地方。“总之，不同功能的需求不一样，可以灵活变动。”
上期答案
您在黑色星期五怎么做推广？
每次购买时提供免费礼品或礼品卡
策划产品捆绑包
将游戏融入您的促销活动
将产品分解为每日优惠
每次购买时提供不同额度的免费礼物
与红人合作
每次购买都为一项事业捐款（公益）
通过电子邮件发送独家优惠
提供推荐奖励
创建礼品指南
创建BFCM集合
在结账时提供优惠券
包括倒数计时器
BFCM有哪些促销创意？
BFCM 促销活动旨在提高客户意识和紧迫感。您可以：
为捆绑商品提供折扣，向买家介绍您的整个商品目录
在结账时提供独特的优惠券，以推动持观望态度的购物者越过终点线
奖励向朋友和家人推广您的销售的客户
为下单超过一定价值的买家提供免费送货服务
包括倒数计时器以营造紧迫感
什么是好的黑色星期五活动？
一个好的黑色星期五活动可以吸引新客户进行购买，同时也会奖励现有客户。这可能意味着每个购物者都有很大的独家折扣或优惠券代码。您的广告活动应与您的品牌相关，并满足目标顾客的愿望和需求。 如何在Instagram上推广黑色星期五？
提前开始计划您的黑色星期五 Instagram 促销活动做预热。在整个促销活动期间，每天分享能吸引眼球的内容，以吸引尽可能多的客户。
Cite: Shopify Blog
品牌推广 | 出海咨询 | 资料获取 | 转载开白 | 商务合作
優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
