CSS+div网页制作PS切图攻略

在css+div网页制作中，PS切图是比较重要的，图片切得好就使工作事半功倍，现在我们来讲讲网页制作PS切图教程。

认识Photoshop(PS)CSS切图必用工具

Adobe PHOTOSHOP平时我们又被称为PS。

 

div CSS必备切图工具PS截图

多数人对于PHOTOSHOP的了解仅限于“一个很好的图像编辑软件”，并不知道它的诸多应用方面，实际上，PHOTOSHOP的应用领域很广泛的，在图像、图形、文字、视频、出版各方面都有涉及。

请看下面介绍：

平面设计

平面设计是PHOTOSHOP应用最为广泛的领域，无论是我们正在阅读的图书封面，还是大街上看到的招帖、海报，这些具有丰富图像的平面印刷品，基本上都需要PHOTOSHOP软件对图像进行处理。

修复照片

PHOTOSHOP具有强大的图像修饰功能。利用这些功能，可以快速修复一张破损的老照片，也可以修复人脸上的斑点等缺陷。

广告摄影

广告摄影作为一种对视觉要求非常严格的工作，其最终成品往往要经过PHOTOSHOP的修改才能得到满意的效果。

影像创意

影像创意是PHOTOSHOP的特长，通过PHOTOSHOP的处理可以将原本风马牛不相及的对象组合在一起，也可以使用“狸猫换太子”的手段使图像发生面目全非的巨大变化。

艺术文字

当文字遇到PHOTOSHOP处理，就已经注定不再普通。利用PHOTOSHOP可以使文字发生各种各样的变化，并利用这些艺术化处理后的文字为图像增加效果。

网页制作

网络的普及是促使更多人需要掌握PHOTOSHOP的一个重要原因。因为在制作网页时PHOTOSHOP是必不可少的网页图像处理软件。

建筑效果图后期修饰

在制作建筑效果图包括许多三维场景时，人物与配景包括场景的颜色常常需要在PHOTOSHOP中增加并调整。

绘画

由于PHOTOSHOP具有良好的绘画与调色功能，许多插画设计制作者往往使用铅笔绘制草稿，然后用PHOTOSHOP填色的方法来绘制插画。

除此之外，近些年来非常流行的像素画也多为设计师使用PHOTOSHOP创作的作品。

绘制或处理三维帖图

在三维软件中，如果能够制作出精良的模型，而无法为模型应用逼真的帖图，也无法得到较好的渲染效果。实际上在制作材质时，除了要依靠软件本身具有材质功能外，利用PHOTOSHOP可以制作在三维软件中无法得到的合适的材质也非常重要。

婚纱照片设计

当前越来越多的婚纱影楼开始使用数码相机，这也便得婚纱照片设计的处理成为一个新兴的行业。

视觉创意

视觉创意与设计是设计艺术的一个分支，此类设计通常没有非常明显的商业目的，但由于他为广大设计爱好者提供了广阔的设计空间，因此越来越多的设计爱好者开始了学习PHOTOSHOP，并进行具有个人特色与风格的视觉创意。

图标制作

虽然使用PHOTOSHOP制作图标在感觉上有些大材小用，但使用此软件制作的图标的确非常精美。

界面设计

界面设计是一个新兴的领域，已经受到越来越多的软件企业及开发者的重视，虽然暂时还未成为一种全新的职业，但相信不久一定会出现专业的界面设计师职业。在当前还没有用于做界面设计的专业软件，因此绝大多数设计者使用的都是PHOTOSHOP。

上述列出了PHOTOSHOP应用的13大领域，但实际上其应用不止上述这些。例如，目前的影视后期制作及二维动画制作，PHOTOSHOP也有所应用的。

PHOTOSHOP的特色：

从功能上看，Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。

图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。photoshop提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。

校色调色是photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方面应用。

特效制作在photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于photoshop的研究的原因。

以上信息引用百度百科photoshop介绍：http://baike.baidu.com/view/2929.htm

我们推荐使用Adobe Photoshop CS 8.0版本

总结：

photoshop这里对于我们来说主要是让大家认识是网页美工制作工具，网页美工开发工具，div+css重构必备工具，一般设计的网页美工都是没有合层的是以PSD格式保存的，所以注意的是如果你用PS设计网页美工最后不要将文件图层合并，最后一PSD格式保存，以便以后的修改及切图。

PS软件在DIV CSS开发中用于做什么

Photoshop软件简称PS在DIV CSS开发中用于做什么?

在DIV CSS开发中PS软件是必不可少的软件，主要用于DIV+CSS开发时切出布局图片素材、获取宽度值、获取高度值、获取颜色值、获取padding值、获取margin值等。

在整个CSS开发PS扮演角色

在CSS DIV开发中PS软件一直是使用的，因为整个开发全程都需要PS打开美工图(常见PSD文件)，因为我们布局时所设置样式单词或样式值都需要使用PS软件获得，所以整个开发过程中CSS代码开发时软件与PS软件同时打开使用。

PS开发中得到什么?

在CSS布局中所有样式值都是从美工图上获取得到，而非猜测随意设置样式值。比如设置宽度、高度、padding、margin的尺寸值都是使用PS软件从打开美工图中使用切片工具获得，具体获得方法技巧截图DIVCSS5会在后面PS教程给出;当然网页布局中设置背景颜色、字体颜色、边框颜色等这些具体的值当然也是100%从美工图获取准确的颜色值，而非自己凭空猜测大概设置。

我们在布局CSS时，具体长度尺寸很大时候不能误差1px，颜色值也是不能有误差，不然这里误差一点那里误差一点最后制作出HTML可想而知，当然是不能使用而且不严谨。

DIVCSS5最后提示：

在开发CSS过程中随时都是开发CSS软件和PS软件都是一直同时打开，开发代码过程中需要值马上回到PS软件准确获取，当然很多都不会PS软件，不过没事其实在CSS开发中用到PS软件就那几个功能和技巧，接下来DIVCSS5会陆续为大家以图文教程方式奉献出。

PS软件CSS切图应用常用快捷键

Photoshop软件CSS切图应用常用快捷键介绍

本节DIVCSS5为大家介绍在切图时PS软件的常用快捷键，通过快捷键介绍让不会PS的您也对PS有一定应用。

1、放大美工图

ctrl+++

按住“Ctrl”键不放然后按“+”加号键即可不断放大所打开美工图

2、缩小美工图

ctrl---

按住“Ctrl”键不放然后按“-”减号键即可不断缩小所打开美工图

3、拖动美工图

按住“空格键”不放时鼠标会变成手掌一样图标，这个时候鼠标点击不放移动即可拖动整个网页美工图

4、全屏与固定屏幕模式

将网页美工图转为不固定拖动范围，英文小写输入情况按“F”字母键，切换，可以三种模式互转

Photoshop之CSS切图时常用工具

Photoshop切图时常用工具,CSS div制作前PS软件常用工具介绍。

1、移动工具

 

ps 移动工具截图

常用于选中图层对象使用，移动选中图层对应内容(图片或文字图层)在美工图位置

2、切片工具

 

ps切片工具截图

切片工具，是切图最重要的工具，在美工图上直接可以画好要切出的图片区域，最后即可导出为可以使用CSS布局的图片素材。

3、切片选择工具

 

ps切片选择工具截图

切片选择工具其实是与切片工具对应，在一个美工图中，使用切片工具会切出很多切片区域，但是要修改或选择以前切片划分好的切片这个使用就只能使用切片选择工具才能选中对应切片区域进行选择或修改。

4、前景色

 

前景色

两个正方形一样是方块，浮动最上面为前景色。前景色可以使用快捷键“alt+del”组合键，填充对应虚线选区或图层。

5、背景色

 

ps背景色工具截图

两个正方形一样是方块，靠后为背景色。背景色可以使用快捷键“ctrl+del”组合键，填充对应虚线选区或图层。

6、字体工具

 

ps字体工具截图

字体工具可以点击后在设计图上直接点击后输入文字，文字可以改变字体大小、字体、加粗、斜体等美化效果。

刚来公司上班的时候，看到以前的程序员写的程序里面调用http地址是，不是用http而是用双斜杠//开头，刚开始不知道这样写有什么好处，虽然能够正常浏览，后来在网上找了资料，才发现原来是这么回事。

不知道大家有没有见过下面这种 url 写法：

<IMG src="file://xxx.net/img/logo.png">

img 中的url是以双斜杠“//”开头的，这种写法有特殊的用途，它会判断当前的页面协议是http 还是 https 来决定请求 url 的协议。防止IE下出现“This Page Contains Both Secure and Non-Secure Items”的报错。

但是当你浏览本地文件的时候，它会解析为 file:// 协议。这种特性可以用来加载CDN：

也适用于CSS：

.omgomg { background: url(//lvtao.net/lvtao.gif); }

注意：如果在IE7，IE8中使用 和 @import 引入 CSS 的时候，会下载两次 CSS 文件。

参考：http://www.paulirish.com/2010/the-protocol-relative-url/

响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。

1.计划

与往常一样，计划总是要放在第一优先级的。一旦你在纸上开始解决你的设计难题，你就已经准备好建立你的站点了。

2.充分利用好原型软件

 

 

推荐使用Adobe Edge Reflow，它能让你使用媒体查询，在程序内设置断点并设计适配桌面电脑、平板电脑和手机的布局。然后，你可以将CSS复制到另一个像Adobe Dreamweaver或者其他HTML编辑器来进一步优化你的设计。

3.首先考虑一个移动端策略

如果你是第一次创建手机网站，接着就可以扩大规模，在平板和桌面电脑上设计网页了。这三个平台的重点都在网页logo和文字上。如果文字能在移动设备上能读得很轻松，然后你在平板和台式机平台上就不会有什么问题了。

4.谨慎使用导航

如果你的站点只有两到三个导航按钮，你可以把这些按钮包含在屏幕上一个简单的菜单里。如果有更多的菜单元素，你可能想考虑创建一个有下拉菜单项的单个图标。

 

 

5.先大致把网站创建起来，整体感受下

一些像Jiffy软件之类的公司，会首先创建整个页面布局，然后才开始写代码，这样能保证他们做到客户想要的外观和感觉。当创建一个移动端的页面时，非常重要的一点是把按钮设计足够指尖能覆盖住那么大，另外一点就是使界面保持既简洁又实用的状态。许多设计者倾向于往移动端界面添加太多的元素，这会导致设计和实用性的问题。当有疑问时，保持简洁的页面就好了。

6.准备好使用很多软件程序

对许多用户来说，使用一个WordPress模板就足够了，但如果你想实现一个复杂的设计，你可能需要使用自定义程序，并且为每个站点单独写点个性化的代码了。

 

 

举个例子，如果你的布局很简单，你可以使用一个像Moboom之类的模板，但对一个更复杂的布局，你可能就需要使用像Adobe Dreamweaver之类的程序来设计桌面电脑布局，用像GoMobi来设计移动端网页布局了。

7.图像

当创建响应式设计布局时，要为每个布局使用优化的图像。这会减少缩放和宽带的问题，使用JPEG、GIF和PNG-8格式的图像，而不要使用PNG格式，因为它会让你的文件大小膨胀5到10倍。

8.使用精确的图像参数

比如500X300像素，100ppi，并且把图像的尺寸大小调整匹配，这样会消除缩放比例，也将保留图像的分辨率和质量。如果你的图像还需要缩放的话，这可能会导致颜色深度和分辨率等一系列的问题。

9.使用视差滚动

这能让你的网站响应的方式变得更受欢迎。与许多设计元素一起设计，这个效果可能会过犹不及，所以这有一些使用这个效果很好的站点的例子。

10.关于升级的问题

如果你设计的网站是一个一次性的，这样更新的问题就没必要考虑了。但如果你想做一个交给别人来维护更新的网站，要确保它能很容易得到更新，包括要给后来人写好升级指南、确保你代码中有合理的注释以及文档，这样其他需要更新的人员就能看明白你都做了些什么，可维护/更新这一点往往是非常有必要的。

11.在移动设备上尽量少的使用文字

只使用那些必要的文字，而不是把你的桌面电脑设计复制到你的移动端来。后者往往会造成长期滚动的页面，这种糟糕的体验会让你在移动端失去很多用户。

12.使用谷歌设计标准

在这个页面，你会学到为智能手机设计站点时谷歌给你的建议、除此之外，你会发现怎么样才能让你的手机网页加载速度更快。

13.测试代码段和模板

使用API的时候，要小心。你偶然的一个行为可能会导致站点的性能问题。如果有疑问的话，测试下组件先。

14.创建框架的工具

创建响应式设计的一个快速方法是，在已有的基础上进行二次设计，比如用现成的主题去创建一些子主题之类的。这回为你节省大量的时间，因为你不必再去从零开始建一个新的布局了。

15.简洁的设计

这个对响应式网页设计来说尤其重要。一定要保证在设计你的网站时，要去掉所有的非必需品，这将大大缩短页面加载时间。

总结

随着响应式网页设计越来越火，性能变得越来越重要了。多考虑这类事情：精确的代码，测试模板组件，优化图像等，所有这些事情都会让你的站点加载更快，性能更好。

然现在的网速相比以前还说已经提高了很多，但是打开网页图片还是会有等待的。前端的性能对于Web应用的用户体验来说非常重要。不要以为你的Web应用的性能已经足够好了,其实还会有很多可以提升的地方。

HTTP Archieve有个统计，图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。从性能优化的角度看，图片也绝对是优化的热点和重点之一，Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段，本文覆盖了Web图片优化的方方面面，从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及。

Google Web Fundamentals的说法我很喜欢：

图片优化既是一门艺术，也是一门科学，图片优化是一门艺术，是因为单个图片的压缩不存在最好的特定性方案，而图片优化之所以是一门科学，是因为许多开发得很出色的方法和算法可以明显减小图片的大小。要找到图片的最优设置，需要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。

真的要用图片吗?

要实现需要的效果，真的需要图片吗?这是首先要问自己的问题。浏览器和Web标准的发展速度极快，记得数年前我在用微软Silverlight 1.0写视频播放器的时候，中文还不能使用自定义字体显示，所以那时候写了很多糟糕的代码把需要的文字在服务器上生成图片并缓存起来。用户下载起来很慢，搜索引擎也完全无法检索这些文字。

但是现在不一样了，很多特效(渐变、阴影、圆角等等)都可以用纯粹的HTML、CSS、SVG等加以实现，实现这些效果少则寥寥数行代码，多则加载额外的库(一张普通的照片比非常强大的效果库也大了许多)。这些效果不但需要的空间很小，而且在多设备、多分辨率下都能很好的工作，在低级浏览器上也可以实现较好的功能降级。因此在存在备选技术的情况下，应该首先选择这些技术，只有在不得不使用图片的时候才加入真正的图片。

备选技术

CSS效果、CSS动画。提供与分辨率无关的效果，在任何分辨率和缩放级别都可以显示得非常清晰，占用的空间也很小。

网络字体。现在连很多图标库都是用字体方式提供，保持文字的可搜索性同时扩展显示的样式。

前端工程师最好能和设计师、产品经理保持沟通，帮助他们了解到什么样的效果比较“简洁、高效、可维护”，毕竟对于CSS来说改变圆角矩形的Radius可以实时看到效果，用图片的话至少要重新生成图片、切图并替换资源。Retina、高分辨率屏幕、多尺寸的设备，这些都加快了非图片特效的发展，想想在高分辨率屏幕下Windows 7的惨不忍睹，就知道原生的图片资源绝对不是多多益善。

图片格式的选择

如果效果真的需要图片来表现，那么选择图片格式是优化的第一步。我们经常听到的词语包括矢量图、标量图、SVG、有损压缩、无损压缩等等，我们首先说明各种图片格式的特点

图片格式压缩方式透明度动画浏览器兼容适应场景

JPEG有损压缩不支持不支持所有复杂颜色及形状、尤其是照片
GIF无损压缩支持支持所有简单颜色，动画
PNG无损压缩支持不支持所有需要透明时
APNG无损压缩支持支持Firefox
Safari
iOS Safari需要半透明效果的动画
WebP有损压缩支持支持Chrome
Opera
Android Chrome
Android Browser复杂颜色及形状
浏览器平台可预知
SVG无损压缩支持支持所有(IE8以上)简单图形，需要良好的放缩体验，需要动态控制图片特效

其中APNG和WebP格式出现的较晚，尚未被Web标准所采纳，只有在特定平台或浏览器环境可以预知的情况下加以采用，虽然均可以在不支持的环境中较好的功能降级，但本节暂不讨论这两种格式。图片格式选择过程如下：

 

 

颜色丰富的照片，JPG是通用的选择

人眼的结构很适合查看JPG压缩后的照片，可以充分的忽略并在脑中补齐细节

JPG在压缩率不高时保留的细节还是不错的

WebP能够比JPG减少30%的体积，但目前兼容性较差

如果需要较通用的动画，GIF是唯一可用的选择

GIF支持的颜色范围为256色，而且仅支持完全透明/完全不透明

GIF在显示颜色丰富的动画时可能出现颜色不全、边缘锯齿等问题

如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式

SVG是使用XML定义的矢量图形，生成的图片在各种分辨率下均可自由放缩

SVG中可以通过JavaScript等接口自由变换图片特效，可以完成其中部分元素的自由旋转、移动、变换颜色等

如果需要清晰的显示颜色丰富的图片，PNG比较好

PNG-8能够显示256种颜色，但能够同时支持256阶透明，因此颜色数较少但需要半透明的情景(如微信动画大表情)可以考虑PNG-8

PNG-24可以显示真彩色，但不支持透明，颜色丰富的图片推荐使用(如屏幕截图、界面设计图)

PNG-32可以显示真彩色，同时支持256阶透明，效果最好但尺寸也最大

图片尺寸的选择

尺寸，曾经是最不需要讨论的话题，但自从Retina出现之后世界就变得复杂多了。关于移动设备上的像素和尺寸，展开说足够写一篇论文，我建议想详细了解的同学参考下面的文章：

浅谈移动Web开发(上)：深入概念

这里只说我们关心的部分和结论，我们需要分清不同类型的像素：CSS像素和设备像素。一个 CSS像素可能包含多个设备像素。对于图片来说，在高DPI的屏幕上需要使用分辨率更高的图片，如果我们讨论的是Retina，那么就需要2倍分辨率(几乎4倍尺寸)的图片。这几乎没有取巧的空间，屏幕就是那么大，需要的图片也就是那么大。(鸽子为什么那么大?^_^)

 

 

我们能够控制的地方是“恰好”显示所需尺寸的图片。例如在屏幕中通过CSS或者

标签的wihth/height属性，将一副200x200的图片调整为100x100大小，那么这其中就有(200x200)-(100x100)=30000个像素是浪费的，这占到了图片尺寸的75%!

 

之所以有这么大的浪费，是因为图片的尺寸与面积基本成正比，与宽高的平方成正比。因此良好的计算客户端实际显示的图片尺寸，能够大大减小图片的大小。即使只有长和宽都只有10px被浪费，但是当图片足够大时，这部分也将产生很大影响。

响应式图片

上面提到“恰好”显示客户端所需大小的图片，听上去很容易不是吗?但当响应式布局出现后，这就变得极其困难。我们要支持上至1920宽度，下至 320宽度的无数种设备，如果使用1920宽度的图片，那么在小型设备(这类设备往往对网速和流量更加敏感)上每个用户都要付出额外的带宽和等待时间，如果使用320宽度的图片，那么在1920的屏幕上就像是在高清屏上使用DOS那么让人难以接受。

很自然的，我们需要图片也能“响应式”加载，根据所在设备的不同，加载不同尺寸的图片。响应式图片尚没有写入Web标准，实现起来也有诸多不便和兼容性限制。我建议参考百度EFE团队的这篇文章：

实战响应式图片

响应式图片虽然尚未成为标准，但这是Web图片优化的一柄利器，一旦被广泛支持，再没有比缩小图片尺寸更有效的优化方法了。

优化JPG和PNG

选择了正确的图片格式，按照正确的大小生成了图片后，我们还需要对图片进行进一步优化，这种优化一般分两步进行：

有损优化，删除没有出现或极少出现过的颜色，合并相邻的相近颜色。这一步并不必须，如PNG格式就直接进入下一步

无损优化，压缩数据，删除不必要的信息

JPG和PNG格式的图片生成后，一般还有进一步优化的空间，例如JPG格式的照片中，可能携带有相机的Exif信息，PNG格式的图片中可能带有 Fireworks等软件的图层信息等。去除这些额外信息后，还可以通过减小图片的调色板，去除没有出现过的颜色，以及合并相邻的相同颜色等手段来进行优化。原理性的内容这里不再赘述，仅介绍工程中可用的优化工具。

不同格式的图片有一系列工具，这些工具有有更多种参数调节方案，常见的几种调节工具有：

工具用途

jpegtran优化JPG图片
OptiPNG无损PNG优化
AdvPNG无损PNG优化
PNGQuant有损PNG优化

如果你真的需要追求各种图片的极限压缩，可以参阅这些工具的文档，但是对于一般的Web应用，面对的图片种类多样，几乎不可能在工程中实现对每种工具的独立配置，因此推荐使用以下工具来进行优化。这些工具往往使用了上表中的一种或几种优化工具。

ImageOptim (Mac)

主页：https://imageoptim.com/

Mac平台下非常赞的图片优化工具，只需要把需要优化的图片拖拽进ImageOptim，就能够完成对图片的优化。设置选择的也很丰富，目前支持JPG和PNG的优化。这是我在写文章时最常用到的工具，把网站用到的图片拖进去，优化就完成了~

 

 

Kraken (Web)

主页：https://kraken.io/

在免费模式下可以上传图片，优化后打包下载，很多国外企业也选择了它的收费服务。亲自测试Kraken的图片优化结果比ImageOptim一般要小3%左右，效果不错，当然价格也不错。适合偶尔有图片优化需求，或者不在开发机上没有优化软件可以使用的情况。

 

 

智图 (Web)

主页：http://zhitu.tencent.com/

腾讯ISUX团队有篇文章介绍智图：http://isux.tencent.com/zhitu.html

国货当自强，腾讯的智图工具推出不久，但实测效果很好，而且提供了Gulp的自动化支持，这部分会在后面自动优化章节介绍。只想建议一句，Kraken的首页比智图美好几百倍…… 而且把压缩前的PNG和压缩后的JPG放在一起对比大小，真的没关系么~

 

 

优化SVG

所有较新的浏览器都支持可缩放矢量图(SVG)，SVG是基于XML的图片格式，适用于二维图片。可以将SVG标记直接嵌入网页，也可以作为外部资源嵌入。可以通过大多数基于矢量的绘图软件创建SVG文件。这是一段简单的SVG图形：

 

 

这个圆形轮廓为黑色，背景为红色，从Adobe Illustrator直接导出。可以从中看到大量元数据，例如图层信息、注释和XML名称空间等等，在浏览器中呈现资源时，通常不需要这些数据。因此我们需要使用一些工具去除这些不必要的元数据，仅保留必须的标记。

SVGO工具可以缩减SVG文件的体积，在这个的例子中，SVGO能够将Illustrator生成的SVG文件大小减小58%，从470字节缩减到199字节。

由于SVG是基于XML的格式，本质上是纯文本，所以，还可以采用GZIP压缩来减小传输大小，当然这需要一些服务器配置，例如在apache服务器中设置：

AddType image/svg+xml .svg

AddOutputFilterByType DEFLATE image/svg+xml

来对SVG文件启用GZip压缩(当然你还需要先加载deflate模块并进行适当配置，GZip的配置超出了本文的范畴，这部分内容请自行Google)

优化GIF和APNG

GIF有很多好处，在颜色数较低的时候能够大幅减小图片体积，而且他也是唯一能够较为通用的展示动画的图片格式。关于GIF格式的优化原理我并不熟悉，只是在工程中直接使用成型的压缩工具，在后文自动优化章节的Grunt中，会介绍通过Grunt Task进行自动优化的方法。

关于APNG，目前浏览器对他的支持还不够好，不过在支持HTML5的场景中，有成熟的开源工具apng-canvas可以用于支持APNG。

 

 

腾讯ISUX团队有篇文章介绍iSparta工具：http://isux.tencent.com/introduction-of-apng.html。这是目前几乎唯一能够批量处理APNG文件的工具，感兴趣的同学可以在那篇文章里得到更多地了解。

自动优化

前面说了太多关于如何优化各种不同格式图片的方法和工具，优化图片需要大量重复性的劳动，作为工程师显然不会忍受这一点，因此也产生出了很多工具对图片进行自动优化，这里主要介绍CDN、Grunt/Gulp、Google PageSpeed三种方式。

自动优化：CDN

使用CDN对图片自动进行优化，我在国外的CDN提供商处很少见到这类服务，倒是国内的两大新秀CDN七牛和又拍在这方面都做了大量工作。其工作方式为，向CDN请求图片的URL参数中包含了图片处理的参数(格式、宽高等)，CDN服务器根据请求生成所需的图片，发送到用户浏览器。

七牛云存储的图片处理接口极其丰富，覆盖了图片的大部分基本操作，例如：

图片裁剪，支持多种裁剪方式(如按长边、短边、填充、拉伸等)

图片格式转换，支持JPG, GIF, PNG, WebP等，支持不同的图片压缩率

图片处理，支持图片水印、高斯模糊、重心处理等

七牛云存储的图片处理接口使用并不复杂，例如下面这张原图：

 

 

我们通过如下URL请求，裁剪正中部分，等比缩小生成200x200缩略图：

http://qiniuphotos.qiniudn.com/gogopher.jpg?imageView2/1/w/200/h/200

 

 

自动优化：Grunt/Gulp

这里介绍用于图片优化的Grunt组件：grunt-image。前端工程师的重复性工作，例如合并静态资源、压缩JS和CSS文件、编译SASS等都可以使用Grunt等自动化工具批量完成，图片优化也是如此。

grunt-image非常强大，按照作者的介绍，其内部加载的图片优化工具包括了pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle和svgo。支持批量自动优化PNG, JPG, SVG和GIF，速度也不错，配置方式支持单图片优化和全目录优化：

module.exports = function (grunt) {
grunt.initConfig({
image: {
// 指定单独的图片优化
static: {
options: {
pngquant: true,
optipng: true,
advpng: true,
zopflipng: true,
pngcrush: true,
pngout: true,
mozjpeg: true,
jpegRecompress: true,
jpegoptim: true,
gifsicle: true,
svgo: true
},
files: {
'dist/img.png': 'src/img.png',
'dist/img.jpg': 'src/img.jpg',
'dist/img.gif': 'src/img.gif',
'dist/img.svg': 'src/img.svg'
}
},
// 指定图片目录进行优化
dynamic: {
files: [{
expand: true,
cwd: 'src/',
src: ['**/*.{png,jpg,gif,svg}'],
dest: 'dist/'
}]

}
}
});
grunt.loadNpmTasks('grunt-image');
};

 

 

自动优化：Google PageSpeed

Google做事风格比较彻底，看见哪个软件不好用就拿来直接fork出新版本或者干脆重写，对于Web优化，Google发布了了Google PageSpeed这个服务器模块，可以在apache或ngnix中加载，通过在服务器配置文件中进行设置来进行自动化的优化。对于图片格式转换、图片优化甚至图片LazyLoad都有相关选项。这部分展开会非常长，请感兴趣的同学参考Google的手册。

HTML条件注释判断浏览器版本命令总结，这里总结了各种注释判断浏览器版本的一些命令与方法，希望例子对各位朋友会带来帮助。

项目	范例	说明
!	[if !IE]	NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。
lt	[if lt IE 5.5]	小于运算符。如果第一个参数小于第二个参数，则返回true。
lte	[if lte IE 6]	小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。
gt	[if gt IE 5]	大于运算符。如果第一个参数大于第二个参数，则返回true。
gte	[if gte IE 7]	大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。
( )	[if !(IE 7)]	子表达式运营商。在与布尔运算符用于创建更复杂的表达式。
&	[if (gt IE 5)&(lt IE 7)]	AND运算符。如果所有的子表达式计算结果为true，返回true。
|	[if (IE 6)|(IE 7)]	OR运算符。返回true，如果子表达式计算结果为true。

实用示例：
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

扩展知识:
<!--[if lt IE 9]>
加载CSS1
<!--[else]>
加载CSS2
<![endif]-->
注：这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范,
如果把ELSE语句去掉,则正确.

上述问题解决方案一：
加载CSS2
<!--[if lt IE 9]>
加载CSS1(可以把要重写的写在这里).
<![endif]-->