立即使用 Shopify 开展销售
立即开始免费试用 Shopify，然后使用这些资源引导您完成每个步骤。
如何确定网站图片最佳尺寸，使用这份备忘录，为你的桌面端和手机端网站制作大小合适的图片。
立即开创您的在线业务。
完全免费。
像素宽度：一般而言，2500像素非常适合在浏览器上全屏显示。如需填满整个宽度，图片宽度不应小于2500像素，否则可能导致图片被截断或显示模糊。
图片尺寸：图片的最佳整体（像素）尺寸取决于具体用途，例如，背景图片需要比正文插图大。
文件大小：文件大小一旦超过20MB，就有可能严重影响加载速度。使用较小的图片（不超过2MB，建议在500KB左右），网速表现更加。
图片属性：图片属性（alt文本或alt标签）是基于文本的，不影响网站性能。不过，屏幕阅读器软件需要通过属性文本解析图片，因此，属性文本是网站无障碍的关键因素，应尽量简短精炼——最佳做法是将alt文件控制再100个字符以内。
下表为桌面端和移动端网站的建议图片尺寸：
（全屏）
以上为建议尺寸，可根据是否采用自适应网站设计而进行调整。
图片的显示尺寸要尽量小于上传的尺寸。
网站图片主要分为五类：
每种图片有不同的尺寸要求。最常见的尺寸如下：
建议图片宽度：2560像素
建议图片高度：1400像素
纵横比：16:9
建议文件大小：20 MB
主页横幅与背景图片类似，但高度较小，约为背景图片的一半。如果想在屏幕上显示更多的文字，而又不想让用户滚动查看，可以使用主页横幅。
建议图片宽度：1280像素 ~ 2500像素
建议图片高度：720像素 ~ 900像素
纵横比：16:9
建议文件大小：10 MB
纵横比：多种纵横比
建议图片宽度：1200像素
建议图片高度：800像素
纵横比：3:2
建议文件大小：3 MB
大多数标识图片适合1:1的正方形比例，如上图示例的左上角Logo。
长方形比例适用较长的品牌名称，或由文字组成的标识图片。Shopify的网站标识图片是较长的4:1比例。
建议图片宽度：100像素
建议图片高度：100像素
纵横比：1:1， 2:3，4:1
建议文件大小：1 MB
移动端屏幕较小，许多用户喜欢放大图片。因此，应尽量在图片尺寸和文件大小之间，取得平衡。
高分辨率图片让网站看起来更专业、更强大，并支持缩放功能。相似的图片应使用相同的纵横比，以便在各个页面中保持一致的视觉效果。
例如，你可以将商店中的所有产品图片，都设为正方形。正方形图片更适合小屏幕布局。此外，方形和垂直图片，更适合移动设备的屏幕，因为易于布局，用户无需滚动页面，就能看到更多的图片。
如果是正方形的产品图片，建议尺寸为2048 x 2048像素。
请记住，如果要实现缩放功能，图片尺寸必须大于800 x 800像素。
大多数情况下，封面图片不应超过10MB，产品图片还要更小，以300 KB左右为宜。
Shopify将自动调整图片大小，以适应小屏幕。但其他一些平台，可能需要手动编辑图片尺寸，才能适应移动设备。请不要忘记，桌面端和移动端的显示方向是相反的。
虽然Shopify网站的自适应设计和算法能自动调整图片尺寸，支持在不同的设备上显示，但如果文件太大，也无法保证流畅的购物体验。
图片大小对网站很重要，主要有三个原因：
如果图片质量差、模糊不清，或尺寸太小，都会影响用户对内容的感知。如果是电商网站，用户可能会因此质疑企业的业务能力和产品质量。
高质量、大小合适的图片，可以提升用户对产品的好感度，并且能够展示更多的视觉信息。
例如，可持续发展鞋店Allbirds的网站图片，将图片重点放在产品的各大特色上，以增强用户的浏览体验：
以下是一个大图导致页面加载速度变慢的例子。服务器加载第一张图片耗时2.1秒，加载最大的图片耗时4.1秒：
选对图片文件类型，既能保证图片质量，又能控制文件大小，有助于提高网站性能。以下是最常见的图片文件格式，以及推荐使用场景：
JPEG（或JPG）是广泛使用的数字图片文件格式，平衡文件大小和图片质量，是照片和彩色复杂图片的优选格式。
不过，JPEG是有损压缩，可能导致损失一些图片质量。
PNG是无损压缩，可以在不影响图片质量的情况下，减小文件大小。支持调整透明度，如果需要透明化的背景图片，PNG是优选。
虽然PNG的文件大小通常比JPEG大，但PNG能更好地保证图片的清晰度，因此更适合展示一些细节图形和标识。
SVG是一种可缩放矢量图格式，利用数学公式渲染图片。SVG图片支持缩放至任意尺寸，而不会降低图片质量。
HEIC，也称作高效图片格式，是苹果设备使用的一种文件格式。利用先进的压缩技术，创建高质量图片，同时，文件大小比JPEG小。
不过，苹果以外的设备，不一定支持HEIC格式。
GIF是位图图片格式，支持简单的动画效果。采用无损压缩技术，最多能将图片压缩至256色，从而减小文件体积。
TIFF标记图像文件格式是一种高质量的无损格式，图片编辑应用软件大多支持这种格式。图片具有高分辨率，色域广，是打印的理想选择。
选择TIFF格式，可方便地将多张图片和页面保存在同一个文件中。然而，图片的文件较大。
查询网页图片尺寸最快捷的方式（无需下载图片）是使用浏览器的检查工具。
该方法适用于Mac和Windows，以及 Safari、Chrome和Firefox等浏览器。
打开网页，将鼠标悬停在图片上。鼠标右键单击，调出选项菜单，找到“检查”：
单击“检查”显示网页HTML代码（看起来有点吓人，不过不用担心）。
这种情况下，浏览器会显示图片像素。如果你调整网页大小，图片像素也会相应调整。
如果要查看图片的初始属性，请将鼠标悬停在图片的保存链接上：
要退出检查器面板，只需点击右上角的“X”。
你可以为Instagram帖子和故事、YouTube缩略图等社交内容，选择符合平台要求的图片尺寸。
而且，用户还可通过仪表板自动设置图片alt文本，转换为最适合的图片文件类型，以提高页面加载速度。
另外，如果你有能力，也可以使用Photoshop减小文件大小，但Photoshop要比上述工具更复杂。
在管理网站时，你可能会遇到图片格式问题。图片可能存在各种各样的问题，尺寸不合适，或者链接断开等等。
以下介绍网站图片常见问题的解决方法。
问题：图片过大或过小，破坏网页布局，影响用户体验。
问题：图片的加载速度比网页的其他部分慢，甚至无法加载。
解决方法：错误的文件格式将导致文件过大，从而影响加载时间。使用图片编辑或转换工具，更改图片的文件格式。图样或商标可使用SVG格式，以便在不降低图片质量的情况下，对图片进行缩放。其他图片可考虑转换为WebP格式，以压缩文件大小。
问题：图片像素化或模糊不清。
解决方法：如果图片像素化或模糊不清，请尝试更换为更高分辨率的版本。请注意，图片分辨率不同于图片大小。分辨率指图片的细节量，通常以每英寸像素（PPI）为单位。分辨率越高，图片越清晰，与尺寸无关。
如果图片质量因压缩而降低，请调整压缩设置，或改用PNG等无损压缩格式。
问题：图片链接断开，图片无法显示。
解决方法：验证图片的源URL。图片URL应是图片文件的路径位置。比较URL中的图片文件名和图片文件的实际名称，二者应完全匹配，包括文件扩展名（.jpg、.png、.svg）。
为网站添加图片不仅仅是为了美观，更是为了提升用户体验，提高搜索引擎的排名。
图片尺寸对这两二者都有影响。图片太大，网页加载速度慢。太小，模糊不清。
请务必了解网站设计对图片尺寸的要求，并选择合适的文件格式，以平衡图片分辨率和文件大小。
WebP是常见的网站图片格式，可确保网站的运行性能。WebP由Google开发，可无损压缩网络图片，与JPEG和PNG相比，文件大小减少30%，但并非所有浏览器都支持WebP。
图片大小指图片的尺寸，通常以像素为单位，比如图片的宽度和高度。图片分辨率指图片的细节量，通常以每英寸像素（PPI）为单位。无论图片的大小如何，分辨率越高，细节越多，图片越清晰。
使用无损压缩，可在不影响图片显示的情况下，删除文件中不必要的数据，从而减小图片文件的大小，而不降低质量。Adobe Photoshop等工具，或在线图片优化软件，均支持无损压缩图片。
编译：Zhang Jialei
随时掌握 Shopify 最新动态
免费获取开展电子商务业务的技巧、灵感和资源。所有这些资源都会直接发送到您的收件箱。
输入您的电子邮件地址即表示您同意接收来自 Shopify 的营销电子邮件。
利用 POS，把握所有销售商机。
随时取消订阅。输入您的电子邮件地址，即表示您同意接收来自 Shopify 的营销电子邮件。
随时随地学习。免费试用 Shopify，探索您开创、经营和扩展业务所需的全部工具。