跳到主要内容

图片规范

💡 本篇你将完成：在添加产品、装修首页之前，先知道图片要做多大、怎么压缩、看不准尺寸时怎么判断。预计 5 分钟。

图片尺寸要放在上传前考虑。很多新手是先把产品、Banner 都填完，最后才发现图片糊了、被裁掉、加载很慢。更稳的做法是：先判断模块大概尺寸，再准备对应比例的图片。

开始前必须先看

图片要用压缩后的webp格式，图片超500kB肯定加载慢，必定影响网站打开速度。

产品主图、Banner、图片画廊都依赖图片尺寸。先把图片比例和大小弄清楚，再去编辑产品页面，会少返工很多。

常用图片尺寸先记住​

图片位置建议尺寸文件大小说明
首页 Banner / 轮播图1800 x 1000 左右尽量 300KB 以内横图，适合首页第一屏
产品主图和相册800 x 800 或 1000 x 1000单张尽量 300KB 以内统一使用正方形，同一产品保持相同比例
文章主图1200 x 700尽量 300KB 以内横图，适合文章列表和文章顶部展示
产品和文章详情描述图片宽度不超过 1500；建议 1500 x 1000 或 1500 x 600单张尽量 300KB 以内根据内容选择横图比例，同一篇详情尽量统一宽度
Logo宽度 350px 以内尽量 100KB 以内透明 PNG 更常用
图标 / Favicon512 x 512尽量 100KB 以内正方形

图片超过建议大小时，可以先使用图片压缩与格式转换工具：

https://imagestool.com/zh_CN/compress-images

压缩或转换格式后，再上传到 AllinCMS 网站后台。

稍微有偏差没关系

例如截图里 Banner 模块大约是 1825 x 1000，图片做成 1800 x 1000 就可以。尺寸不需要一模一样，比例接近就能正常显示。

产品主图和相册统一使用正方形​

产品主图和产品相册统一做成 800 x 800px 或 1000 x 1000px 的正方形。同一个产品不要混用不同的图片比例。主要产品放在画面中央，主体集中显示，建议占画面约 70% 到 80%；四周预留均匀留白，避免产品贴边。

重要内容不要放在边缘，防止前端裁剪后显示不完整。简单理解就是：主体居中、四周留白、不贴边。

800 x 800 px 产品图构图示例 - 主体集中在中间，四周预留安全留白，避免前端裁剪后产品显示不完整

不知道模块多大怎么办​

如果你不知道某个模块要做多大，可以用最简单的方法判断：

  1. 把浏览器窗口放到最大。
  2. 打开前台页面或设计器预览。
  3. 用截图工具框选这个模块。
  4. 看截图工具显示的宽高。
  5. 按这个比例准备图片。

AllinCMS 网站后台模块尺寸测量示例 - 将浏览器放到最大后截图查看 Banner 模块宽高，示例尺寸约 1825 x 1000，因此图片可以做成 1800 x 1000

上图这个 Banner 模块显示约 1825 x 1000，所以可以准备：

1800 x 1000

如果你做不到完全一样，也可以用接近比例，例如：

1600 x 900
1920 x 1080
1800 x 1000

先看用途，再做图片​

1准备图片
2用在哪里?
3横图，约 1800 x 1000首页 Banner
4正方形，800 x 800 或 1000 x 1000产品主图和相册
5同一组图片比例一致画廊/案例
6透明或正方形图标Logo/Favicon

上传前先压缩​

网站加载慢，很多时候不是系统慢，而是图片太大。上传前先压缩，尤其是首页 Banner、产品图、文章主图和详情描述图片。

压缩工具可以使用：

https://imagestool.com/zh_CN/compress-images

推荐做法：

  • JPG / PNG 太大时，优先转成 WebP。
  • 单张 Banner 尽量控制在 300KB 以内。
  • 产品主图、相册、文章主图和详情描述图片，单张尽量控制在 300KB 以内。
  • 不要上传手机原图，手机原图通常太大。

图片显示不完整怎么办​

如果图片上传后被裁掉，先不要反复换图。先检查模块里的图片显示方式。

常见处理：

问题处理方式
产品图被裁掉模块属性里改成 Fit inside
Banner 文字看不清保留图片蒙版，或换更干净的图
画廊图片高低不齐统一图片比例，再上传
图片糊原图尺寸太小，换更清晰图片

AllinCMS 网站后台图片显示方式设置 - 右侧 Media 下拉中选择 Fit inside，用于让产品图完整显示不被裁切

更多处理方法见 图片显示不全。

图片描述也要写​

上传到网站后台时，尽量给图片补描述。不要写“图片1”，要写清楚图片内容。

示例：

Black wireless earbuds with charging case on white background

这对 SEO 和无障碍访问都有帮助。

避坑汇总​

坑后果怎么避
🟡 上传前不知道尺寸上传后容易裁切或变形先截图测模块比例
🟡 图片太大首页加载慢上传前压缩
🟡 产品图比例不统一列表不整齐产品主图用正方形
🔴 Banner 文字看不清首屏转化差保留蒙版或换图
🟡 alt 写“图片1”SEO 信息弱描述图片内容

接下来​

📌 添加产品 —— 图片尺寸准备好后，再去上传产品图和产品相册。

📚 图片显示不全 —— 图片被裁切时看这篇。