Neatbo.

图片与 CSS 发布检查：尺寸、配色、对比度和布局

按发布位置处理图片尺寸、透明背景、压缩和水印，并用对比度与色觉差异检查验证配色，避免只看文件大小。

Neatbo 编辑部更新于 约 8 分钟阅读

例子：为同一页面准备一组素材

产品卡片在桌面大图中很精美：柔和阴影、浅色标签和照片封面。到了窄屏，标签断行、封面裁掉主体，阴影也无法区分卡片与背景。问题不在生成的 CSS 是否有效，而在验收条件只覆盖了一张静态图。

先确定图片尺寸与显示用途

先确定内容与图片展示比例。围绕主体裁剪副本，按显示需要缩放，再比较编码和压缩结果。在真实显示尺寸检查小字、透明边缘及渐变。联系表可将 2–20 张图排成一张 PNG 审阅网格，并可标编号文件名；长名称可能在单元内截短，应保留完整文件名列表，对可疑图片仍需单独放大检查。

把配色和样式放回页面检查

最后把规则放进实际界面测试。流式字号需按所选根字号核对两端与中点、窄屏换行及 200% 浏览器缩放；网格需要窄屏行为，滤镜也可能改变照片的表观对比度。把最终参数与素材一起保存，对照浅色和深色效果。真正有价值的是可重复的设计决定与已验证组件，而不只是能解析的 CSS。

可重复的 SVG 背景需要对边对齐的单元文件。先看平铺预览，在 CSS 中保持原生单元尺寸，再在实际页面检查接缝和文字可读性。

卡片网格要在窄容器与较宽容器中用真实标题和说明检查。生成的 auto-fit 规则随容器宽度改变列数，但连续不换行的子项仍可能溢出；请检查最终组件。

图片滤镜应在实际本地照片上比较前后效果，同时调节五项参数。检查周围背景和子内容后再复制 CSS；原图文件不会被改写。

交付文件本身需要呈现灰阶时，应转换图片像素并与原图比较。检查不同颜色是否变成难以区分的灰阶、透明边缘是否仍可用。灰阶外观的 RGB PNG 不等于印刷用 Gray 或 CMYK 色彩空间。

制作带水印的样张时，给单张图片加入自己的文字，并按原尺寸检查导出的 PNG。核对文字对比度、右下角位置和重要细节是否仍可见。可见标记可以被裁剪或编辑。

制作简单外边框时，为四边指定同一像素宽度，再将未裁切的画面与导出的 PNG 对照。放进固定尺寸的社交或打印版式之前，先确认新画布的尺寸及宽高比。

制作长截图时，先按阅读顺序排列原图；若边缘本就相接，间距可设为零。之后按原像素检查拼接处是否重复或缺失内容；简单拼接不会识别滚动截图的重叠区域。

小样的判断依据
黑对白的对比度为 21:1；实际组件仍需要清晰焦点、不只依靠颜色的提示和合适文字尺寸。

交付前检查窄屏、细节和对比度

最后把规则放进实际界面测试。流式字号需要合适上下限，网格需要窄屏行为，滤镜也可能改变照片的表观对比度。把最终参数与素材一起保存，对照浅色和深色效果。真正有价值的是可重复的设计决定与已验证组件，而不只是能解析的 CSS。

常见误判与替代检查
不能单凭应该补查
文件更小检查文字边缘、透明背景和纹理
颜色好看按实际字号核对文本对比度
缩略图正常在目标尺寸检查裁剪主体与留白
  • 先裁剪，再缩放，最后按目标格式压缩。
  • 抽查浅色和深色背景下的透明边缘。
  • 整组比较图表配色，再用文字或图案及真实用户验证最终设计。

参考资料

本文相关工具

WebP 转 JPG →转成常用 JPG，保存、分享都省心。PNG 转 JPG →给透明区域选个底色，再另存为 JPG。批量 JPG 转 PNG →将一张或多张 JPG 转为真正的 PNG 文件，满足 PNG 格式要求。图片转 WebP →把 JPG 或 PNG 换成 WebP 格式。调整图片尺寸 →输入需要的宽高，让图片刚刚好。压缩图片 →缩小图片体积，发送、上传更方便。裁剪图片 →留下画面里，你最想保留的部分。旋转与翻转图片 →转正画面，或按需要水平、垂直翻转。图片转 Base64 →把图片转成一段可复制的 Base64。提取图片配色 →从图片里挑出一组主要颜色。清除图片元数据 →清除支持的图片元数据；方向允许时保留原有图像编码数据。网站图标生成 →选一张图片，生成常用尺寸的网站图标。颜色格式转换 →HEX、RGB、HSL，换种写法还是同一种色。颜色对比度检查 →比较文字和背景的颜色对比度。渐变生成器 →调出喜欢的渐变，直接复制 CSS。调色板与混色 →按色彩规则生成调色板，或比较两个 RGB 颜色的比例混合。CSS 阴影与圆角 →调整多层阴影，并可同时输出独立角的圆角样式。色觉差异预览 →并排比较图表或界面配色在三类色觉模拟及灰度下的变化。流式字号 clamp 生成器 →按两组字号和视口宽度生成 CSS clamp()；使用 rem 上下界，并可设定根字号假设。SVG 背景图案生成 →下载用于网页背景平铺的圆点、网格或斜线 SVG 单元。CSS 网格生成 →按容器宽度生成自适应卡片网格，预览窄容器并复制 CSS。CSS 滤镜生成 →叠加 CSS 图片滤镜，实时对比前后效果并复制生成的规则。图片转灰度 →将一张彩色图片转为灰阶外观的 PNG，并与原图对比。图片添加水印 →给单张图片右下角添加自定义文字，并对比导出的 PNG。图片边框与留白 →给单张图片四边添加等宽纯色外边框，不裁切原画面。图片拼接 →按顺序将至少两张图片纵向或横向拼成 PNG，不缩放原图。图片联系表 →将 2–20 张图片缩排成一张 PNG 联系表，可选编号文件名。