前端技巧之如何切图

注:本篇文章基于HTML5/CSS3,较少考虑浏览器兼容性(兼容性查询可以见caniuse.com网站),需要读者注意。

前端开发≠切图,但前端开发需要会切图,切图是衔接PSD与HTML静态页面的桥梁。作为需要涉猎前端的后端工程师,在切图中需要掌握如下的知识:

如何评价切图切的好

切图质量的好坏评价可以从如下几个方面来判断:

  1. 业务角度:制作完的HTML网页还原度高,甚至做到像素级还原;
  2. 技术角度:图片体积小(减少网络传输)、图片数量少(减少请求数量);
  3. 配合角度:便于后续制作HTML,特别是制作自适应屏幕的网页。

要不要切

一般来说,图片总是比字符形式的HTML/CSS体积大,因此总体原则是能用HTML/CSS实现的就不切图。常见的比如:

  1. 纯色背景色:用CSS2的background-color来实现;
  2. 渐变背景色:用background-image配合CSS3的渐变属性(线性渐变linear-gradient、径向渐变radial-gradient)来实现;
  3. 边框颜色:用CSS2的border-color来实现,另外边框线型可以用border-style实现,如果边框颜色特别花哨甚至有精妙的图案(我是没有见到过),那就只能用图片加border-image来实现;
  4. 背景投影/阴影:用CSS3的box-shadow实现,可以实现不同样式颜色的阴影;
  5. 椭圆等不规则图形:这个难度相对较大,用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。

上一篇:数据市场API产品接入-上架指南


下一篇:使用PHP结合Ffmpeg快速搭建流媒体服务实践