图片最佳实践_确保要合并的小图坐标数值和合并后的 sprites 图尺寸均为偶数-CSDN博客

本文链接：https://blog.csdn.net/xuewenjie0217/article/details/115620453

本文介绍了图片在设计和开发中的最佳实践，包括使用tinypng进行压缩，避免使用无透明需求的PNG格式，选择合适的图片格式如JPEG、PNG、WEBP，保持图片质量在60-80之间，控制图片大小在200kb左右，适应不同Retina屏幕的图片处理。此外，建议使用CSS Sprites减少请求，考虑SVG用于简单图形，并提供了SVG转组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片规范

从设计师到程序员

图片依然很大时，应借助tinypng工具压缩【目前不考虑 webp 格式】。

tinypng 在极限压缩【多次】后可能会在某些机型中有显示问题

# 命令行工具，不限次数压缩
npm i -g super-tinypng

图片格式

常见的图片格式有 GIF、PNG8、PNG24、JPEG、WEBP，根据图片格式的特性和场景需要选取适合的图片格式。

没有透明层的图片不要保存成 PNG 格式

图片质量

保存的图片质量应在 60-80 之间

图片大小

单张图片应在 200kb 左右，太大的图片应切割成多份

图片分辨率

2022 年了很多手机 Retina 倍率都提升到了 3-4，合理的做法是全部支持根据 api 读取到的 Retina 值读取pic-name@Nx图片

现实场景下项目手机图片应选择最小@2x 图片，PC 页面高分辨率屏幕也要采用@2x

例如

selector {
  background-image: url(no-image-set.png);
  background: image-set(url(foo-low-res.png) 1x, url(foo-high-res.png) 2x) center;
}

CSS Sprites 使用建议

适合使用频率高更新频率低的小图标
尽量不留太多的空白
体积较大的图片不合并
确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数

简单的图形和插图可以使用 svg

SVG 文件的大小可能比同一图像的 PNG 或 JPG 小得多、可以无限扩展而不会失去清晰度

借助svg2jsx可以将 svg 文件转化为组件直接使用