图片规范

从设计师到程序员

1. 图片依然很大时，应借助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 文件转化为组件直接使用

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！