标签：
要记住，好的设计都是简单且性能很好的。减少图片资源可释放更多的字节给HTML，JS，CSS或者其他资源。
然后，你要想想使用css是不是可以替代图片的相同效果？
像素图
矢量图适合包含简单的几何图形（例如，logo，文本，icon等），在任何像素和缩放设置下都保持清晰的效果，所以，在高分辨率的屏幕下和需要放置在不同大小的屏幕上时，矢量图是首选。
然而，当图片复杂的时候（例如，照片），要使用像素图，例如 GIF, PNG, JPEG, 或者新额格式比如JPEG-XR和WebP.
像素图放大会变模糊和呈现锯齿状。
一个CSS像素可能包含很多设备像素——例如，一个css像素可能只是包含一个设备像素，也可能包含多个设备像素。
设备像素越多，呈现的内容更加细节化。
高DPI (HiDPI)屏幕产生了漂亮的效果，但是同时也要求了图片包含更多的细节信息。
矢量图可以在任何的像素下面渲染并且保持高清晰度。
如果像素图拥有越高的像素数量，意味着图片也越大。
所以在高分辨率屏幕下的尽量使用矢量图，不行的话针对不同的屏幕分辨率使用不同像素的像素图。
所有的现代浏览器支持SVG，我们可以直接在页面中嵌入svg。
svg也可以被大多数创作矢量图的软件创作出来，或者你可以直接时候文本编辑器创造svg。
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve"> <g id="XMLID_1_"> <g> <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/> </g> </g> </svg>
上面创作了一个简单的圆，黑色的边框，红色的背景，并且被Adobe Illustrator输出成svg格式。
上面的代码包含了很多信息，比如layer信息，注释和XML的命名空间等等，这些信息通常对于浏览器的渲染不必要。
所以，你可以删除它们，你可以使用工具（例如svgo）来极简化你的svg文件。
svgo同时也减少了源文件的58%的大小。
因为svg是基于xml形式的，所以我们可以使用GZIP来压缩。
像素图是简单的二维像素点栅格——例如，一个100*100像素的图片是一个10，000像素的序列。每一个像素点保存了 “RGBA” 值: (R) 红色通道, (G) 绿色通道, (B) 蓝色通道, 和(A) 透明通道.
内部，浏览器分配了256个值给每个通道，也就是说分配了8位给每个像素(2 ^ 8 = 256), 每个像素4个字节 (4 channels x 8 bits = 32 bits = 4 bytes).所以我们知道了图片的像素，我们可以自己计算像素图的大小：
不管图片的格式是怎样的，当图片被浏览器解码的时候。每个像素都会占用4个字节的内存容量。这对于没有太多的内存的设备（例如，低终端的手机设备）而言，存储大图片变得有些困难。
从左到右分别是(PNG): 32-bit (16M colors), 7-bit (128 colors), 5-bit (32 colors).
对于一些类型的数据，例如网页的源码，例如可执行的文件，压缩此类文件最重要的是不要改变亦或失去原来的文件数据信息，微小的改变都将会导致文件内容的改变，更坏的亦可能损坏整个文件。相反对于其他类型的数据，例如图片，音频和视频文件，最好是返回和原来的数据“差不多”的数据。
一个典型的图片优化管道包含了两个级别的步骤
1.图片进行“无损”压缩过滤
2.图片进行“有损”压缩过滤
第一种方法是最号的，不同的图片形式有不同的无损压缩算法，但是，图片通过有损压缩可以减小它们的大小。
实施上，各种图片形式之间的不同，例如 GIF, PNG, JPEG,和其他类型, 是它们在进行有损和无损压缩的时候使用（或忽略）的特定算法之间的不同。
所以最优化的压缩依赖于图片的内容和你自己对于图片大小和图片失真程度的标准。
在一些情况下，你可能想跳过失真优化来在图片最大的保真度上展示图片细节，在其他情况下，你可能想使用失真优化来减少图片的大小。
这是根据你的需求和你自己的判断进行的——没有四海皆准的设置。
就像上面的例子，当使用有损耗的形式例如JPEG格式，压缩器将特定大的展示用户自定义的“quality”设置选项（例如，在Adobe Photoshop里的“Save for Web”功能）,选项是1到100的数字，数字控制了内部失真和无损算法。
为了最好的效果，对于你自己的图片尝试多种不同的设置，不要害怕设置较小的quality参数，因为如果图片视觉效果越好，图片大小也会更大。
除了不同的压缩和失真算法，不同的图片格式支持不同的特性，例如动画和透明通道。
所以，“最合适的图片格式”意味着理想视觉效果和功能需求的集合。
| Format | Transparency | Animation | Browser |
|---|---|---|---|
| GIF | Yes | Yes | All |
| PNG | Yes | No | All |
| JPEG | No | No | All |
| JPEG XR | Yes | Yes | IE |
| WebP | Yes | Yes | Chrome, Opera, Android |
这里有三种通用的图片格式： GIF, PNG, 和 JPEG. 除了这些图片格式，一些浏览器也支持更新的图片格式，例WebP和 JPEG XR, 它们提供了更加好的总体压缩和更多的特性，所以我们应该使用什么图片格式？
最后，考虑新的图片格式 WebP 和 JPEG XR。虽然浏览器对它们的支持程度（尚且）不好，但是它们在较新的浏览器使用时能节省大量资源——例如，WebP相对于JPEG格式图片在图片大小上要小30%。
因为WebP 和 JPEG XR普遍的不被支持，所以你需要额外的技术支持来支持你的图片：
没有一种工具可以优化所有格式的图片。如果想要达到最好的效果，你要根据你的图片内容，图片视觉效果和技术需要来选择图片格式和设置图片参数。
| Tool | Description |
|---|---|
| gifsicle | 创造和优化GIF图片 |
| jpegtran | 优化JPEG图片 |
| optipng | 无损PNG优化 |
| pngquant | 有损PNG优化 |
不要害怕在各种压缩器上对参数进行各种尝试。将quanlity参数设置成最低，然后提高，不断尝试，一旦你发现一套最好的设置参数，你可以将它们运用到你网站上其他相似的参数上，但是不要认为所有的图片参数都必须一样。
图片优化归根到底只有两个方法：减少图片的每一个像素所占字节，亦或优化像素总大小：图片的大小是像素乘以每个像所占字节的总数。
所以，最简单也是最高效的图片优化方式是：传输的图片大小比浏览器展示的图片大小要小。
听上去简单，但是很多的网站都木有做到这一点，典型的，他们常常传输更大的图片，并且依靠浏览器来重新调整图片的大小——这样常常消耗了额外的CPU资源——并且以更加低的分辨率展示它们。
所以，你要尽量减少不必要的像素损耗!
图片优化是一个既艺术又科学的操作：艺术是因为没有一个确定的答案告诉你针对特定的图片怎样优化是最好的实现方案，科学是因为有很多发展良好的技术和算法来支持减少图片的大小。
记住下面的tips，
标签：
原文地址：http://www.cnblogs.com/RachelChen/p/5452522.html
