注:本篇文章基于HTML5/CSS3,较少考虑浏览器兼容性(兼容性查询可以见caniuse.com网站),需要读者注意。
前端开发≠切图,但前端开发需要会切图,切图是衔接PSD与HTML静态页面的桥梁。作为需要涉猎前端的后端工程师,在切图中需要掌握如下的知识:
如何评价切图切的好
切图质量的好坏评价可以从如下几个方面来判断:
- 业务角度:制作完的HTML网页还原度高,甚至做到像素级还原;
- 技术角度:图片体积小(减少网络传输)、图片数量少(减少请求数量);
- 配合角度:便于后续制作HTML,特别是制作自适应屏幕的网页。
要不要切
一般来说,图片总是比字符形式的HTML/CSS体积大,因此总体原则是能用HTML/CSS实现的就不切图。常见的比如:
- 纯色背景色:用CSS2的
background-color
来实现; - 渐变背景色:用
background-image
配合CSS3的渐变属性(线性渐变linear-gradient
、径向渐变radial-gradient
)来实现; - 边框颜色:用CSS2的
border-color
来实现,另外边框线型可以用border-style
实现,如果边框颜色特别花哨甚至有精妙的图案(我是没有见到过),那就只能用图片加border-image来实现; - 背景投影/阴影:用CSS3的
box-shadow
实现,可以实现不同样式颜色的阴影; - 椭圆等不规则图形:这个难度相对较大,用CSS3的圆角(
border-radius
)、变换(transform
)来实现,当然我个人对于一些图标喜欢用SVG来做,SVG的语法和CSS、HTML极其类似,入门学习(http://w3school.com.cn/svg)一小时左右即可。
要切多大,是否合并
从网页体积来看,切图必然是切得小一些更好,比如能切1像素宽然后repeat的,就不要切出一长条。重复的图形能切一个循环,就不要切n个循环。图片越小,存储量越小,对网络的负担也相应会小。
但是如果一堆小图片在一个网页中加载,会产生大量的HTTP请求,从而拖慢网页加载速度,这时候就需要考虑把小图片合并为大图片,只进行一次加载。这种图片适合用CSS的background
进行加载,并用background-position
对图片里的具体图标进行定位,如:.div{ background:url(abc.jpg) no-repeat -30px -50px;}
。
但具体怎么切,其实还需要看网页布局,因此切图和HTML静态页面制作不能割裂开来,否则切的图和静态页面不在一个频道上,会导致返工。
切图工具的操作
常用的切图工具比如Photoshop(收费)、GIMP(免费),Photoshop的基本操作基本是每一个切图人员必备知识。
对于切图来说,Photoshop最常用的技能就是图片放大(Ctrl++
)、缩小(Ctrl+-
)、图层选择(F7
调出图层面板)、区域宽度高度的判断(F8
调出信息面板)、取色(快捷键:I
)等。对于这些功能的使用,可以自行百度。
图片格式的选择
常见的网络图片格式有:JPG/JPEG、GIF、PNG、SVG,对于这些图片格式的比较如下表(每种格式不考虑同种格式版本的差异):
JPG/JPEG | GIF | PNG | SVG | |
---|---|---|---|---|
透明度 | × | √ | √(24位时不支持) | √ |
矢量 | × | × | × | √ |
颜色 | 24位 | 256色(索引色) | 8、24、32位(索引色) | RGB等各种色表 |
压缩 | 有损/无损 | 无损 | 无损 | 无损 |
压缩率 | 可调节 | 网络传输时可用文本的压缩方式压缩 | ||
动画 | × | √ | × | √ |
一般来说SVG格式的体积最小,但是IE仅IE9及以上原生支持。
如果有动画,那么考虑GIF或SVG,SVG本身除了一些类似CSS3的动画控制,还能用JS进行控制。
对于图片的颜色,如果仅仅少量颜色,那么GIF有很大的优势,甚至有时单色/双色GIF体积能小至10字节左右。如果颜色繁多且需要透明,那么考虑PNG。如果不透明,那么需要考虑颜色细腻程度,如果过于细腻那么JPG在有损压缩时会丢失细节,而无损压缩时又体积过大。
上述原则有时候不能一概而论,经常需要把图片存成多种格式、多种颜色位数进行实际比较,在色彩和体积之间找到一个平衡点,其中每张图片尽量不要大于100kB。