做网站这个行业应该知道，网站优化的重要性对一个网站，他们那一部分取决于操作和维护人员，而另一部分则取决于程序和生产人员。因此，作为前端，在重构设计时应该如何处理图像?今天，通过seo优化，您将分享Web生产中的背景图片处理技术。
第一：在保持图片质量的情况下，尽可能减小图片的大小
当前端拿到设计稿在进行切图的时候，在存储为web所用格式的时候，可以调整图片的质量来缩小图片
第二：减少服务器请求次数，图片能少就少，能不用就不用
在处理图标的时候，把所有可设置成背景图的小图标放置在一张图片上，设置成背景图片，然后在background里调定位即可
例：现在有一个Search的按钮需要放置图标，便可使用如下方法
如上图，放大镜的位置是距顶部20px，距左95px
那我们就可以给Search的button设置背景图片为：
Background:url(/image/icon.png) 95px 20px no-repeat;
注意，小萌新不要忘记给button去默认样式，加上尺寸
还有一种就是设计稿中经常会出现带有底线的标题
对于处理这种东西的时候，好多萌新都采用做背景图片的方式来处理这种问题，这就无形中又多了一张图片。其实根本没有必要再去切一张图片，多麻烦啊，有一个叫border-bottom 的东西，完全可以把这个样式玩出来
首先，外层要给一个div，类名为title(个人习惯)，视情况而定给a标签或者是span标签也就是Css如下:
.title{ width:100%; height:24px; border-bottom:1px solid #999999;}
.title a{display:block; padding:12px 10px; background:#fff; font-size:24px; line-height:24px; margin:0 auto;}
div给了宽度和高度分别是100%，高度为24像素，底边1像素实线，颜色为#999;
文字的标签变为实体，内边距为上下12像素，左右10像素，背景颜色为白色(与设计稿的背景颜色相同)字体大小为24像素，行高24像素，居中。
现在可以看一下这些数据：div的高是24像素，a标签的高加在一起是48像素，div的高小于a标签的高，也就是a标签溢出了，但是你只要不给div over-flow：hidden的属性，就可以实现上图效果，也就是说减少了图片的使用数量，减少浏览器请求次数。
网站重构的过程中是十分灵活的，每一个标签，每一个元素都在你的掌握之中，灵活运用，才回做出更好的效果
