Squarespace会自动处理大量图片优化工作——Imgix CDN分发、WebP转换和响应式尺寸调整——但您仍然需要以正确的尺寸上传图片。太小会导致英雄图在Retina显示屏上显得模糊；太大则会拖慢页面加载速度。本指南涵盖2026年Squarespace网站每个版块的精确图片尺寸。

Squarespace图片尺寸 — 快速参考

Squarespace如何处理图片

了解Squarespace自动处理的内容有助于您做出更好的上传决策：

Imgix CDN：所有上传的图片都通过专业图片CDN Imgix提供。Squarespace会自动为每种设备和屏幕尺寸调整图片大小和压缩——访客获得的是优化版本，而不是全分辨率的上传文件。
自动WebP转换：Squarespace 7.1会自动将上传的图片转换为WebP格式，供支持的浏览器使用。上传前无需自行转换为WebP。
上传最大版本：由于Squarespace会为每种设备缩小图片，请始终上传您拥有的最高质量、最大尺寸的版本。CDN会提供合适的尺寸——上传太大不会有问题，但上传太小会导致 Retina和4K屏幕上显示模糊。
文件大小仍然重要：尽管有CDN优化，压缩不足的原始文件仍可能拖慢速度。上传前请适当压缩原始文件。

横幅或英雄图是页面顶部的大图片，通常横跨整个浏览器宽度。2026年Squarespace的建议：

在移动端，Squarespace从中心裁剪横幅图片。将焦点内容——面孔、产品、关键文字——保持在图片宽度的中央60%以内。Squarespace编辑器提供焦点工具，使用它来精确控制图片在小屏幕上裁剪时哪个区域保持可见。

对于照片，使用质量85的JPEG或WebP。避免对大型英雄照片使用PNG——对于摄影内容，PNG会产生不必要的大文件，而没有任何质量优势。

版块背景遵循与横幅图片相同的规则。Squarespace在版块的文字内容后面显示图片：

对每个版块背景都使用焦点工具——它告诉Squarespace在不同屏幕尺寸下版块高度变化时，应将图片的哪个部分保持居中。背景图片通常与叠加层一起显示以增强文字对比度，设计时请考虑这一点。

Squarespace画廊块以网格和幻灯片方式显示图片。为获得最清晰的效果：

上传前使用图片调整大小工具将画廊图片标准化为统一的尺寸和比例。

Squarespace博客图片有两种不同的用途：

特色图片（缩略图）：1500×844 px（16:9）——此图片显示在博客列表页、社交分享预览和文章页眉中。16:9比例确保在所有场景中正确渲染。
文章内图片：Squarespace博客编辑器在大多数模板中显示最大约800 px宽的图片，但请以1500–1600 px上传，以便在Retina屏幕上显示清晰。为保持页面加载速度，文章内每张图片目标大小低于300 KB。

使用图片调整大小工具将特色图片调整为精确的1500×844 px，然后在上传前压缩到300 KB以下。

Squarespace Commerce商品图片在正方形且整个店铺保持一致时效果最佳：

使用调整大小工具将所有商品图片标准化为1500×1500 px。如果原始照片比例各不相同，上传前请调整大小并裁剪为正方形。

Squarespace的Logo显示在网站页眉中，并根据模板进行缩放。最佳做法：

绝对不要将Logo上传为JPEG——JPEG不支持透明度，因此在非白色页眉上，Logo后面会出现白色或彩色矩形背景。