WEB图像优化

WEB图像优化为什么要优化？性能对业务的影响Amazon：100ms的延迟导致降低1%的销售Yahoo：400ms的延迟降低页面流量5%-9%。Google：500ms的延迟降低20%的搜索量Bing：500ms的延迟降低1.2%的收益Sina:?我们的现状对部分JPEG图片进行有损压缩对PNG图片格式的认识存在误区和盲区绝大部分页面存在相当大的无损压缩空间南非世界杯可优化401.62KB占总量的18.57%2010-6-17新浪微博可优化211.20KB占总量的37.33%2010-6-17世博会可优化176.33KB占总量的7.23%2010-6-17博客首页推荐的某图片博客可优化985.23KB占总量的10.44%2010-6-17新首可优化33.29KB占总量的6.75%2010-6-17浪首可优化26.29KB占总量的4.00%2010-6-17世界杯横向对比公司名节省字节数所占比例新浪401.62KB18.57%雅虎中国303.98KB33.94%腾讯262.23KB19.32%搜狐30.88KB3.66%网易20.13KB2.84%2010-6-17首页横向对比公司名节省字节数所占比例网易53.79KB7.92%新浪26.29KB4.00%腾讯17.92KB7.25%搜狐12.39KB6.56%2010-6-172010-6-172010-6-172010-6-17怎样优化理论篇基础颜色理论常见图片格式选择合适的图片格式工具篇测试工具输出工具优化工具服务端解决方案2010-6-17基础颜色理论神说：要有光色彩空间光色三原色：RGBICC颜色配置文件及Gamma校正系数HSV(HSB)及YUV色彩空间2010-6-17眼睛成像原理2010-6-17色彩模型色彩模型是描述使用一组值（通常使用三个、四个值或者颜色成分）表示颜色方法的抽象数学模型。例如三原色光模式(RGB)和印刷四分色模式(CMYK)都是色彩模型。2010-6-17RGB颜色模式可用灯光模拟2010-6-17ICC颜色配置文件2010-6-17CIE1931色彩空间色度图2010-6-17sRGB色彩空间的色域2010-6-17原色强度与sRGB的非线性变换2010-6-17红色曲线是相对横轴sRGB压缩值的sRGB强度的函数，蓝色曲线是这个函数在对数-对数空间中斜率，它是每个点上的有效gamma。在压缩值0.04045或线性强度0.00313之下，曲线是线性的所以gamma为1。在红色曲线之后的黑色虚线曲线展示了完全gamma=2.2幂次定律时的曲线。HSV(HSB)及YUV2010-6-17HSBYUVYUV模型的特点2010-6-17为节省带宽起见，大多数YUV格式平均使用的每像素位数都少于24位元。主要的采样（subsample）格式有YCbCr4:2:0、YCbCr4:2:2、YCbCr4:1:1和YCbCr4:4:4。（Cb指蓝色色度，Cr指红色色度）YUV的表示法称为A:B:C表示法：4:4:4表示完全取样。4:2:2表示2:1的水平取样，没有垂直下采样。4:2:0表示2:1的水平取样，2:1的垂直下采样。4:1:1表示4:1的水平取样，没有垂直下采样。YUV与RGB的转换公式：常见图片格式图像格式色彩透明压缩算法诞生时间JPG24不透明有损压缩1992年发布1994年获得ISO认定GIF8布尔透明无损压缩1987年发布1989年完善PNG8&24alpha通道半透明无损压缩1996年发布1.01998年发布1.11999年发布1.22003年成为W3C建议2010-6-17JPG适合存储照片可以存储缩略图可以存储额外的文本信息有损压缩对线条和文字支持不好支持渐进显示每编辑一次损失一次2010-6-17JPG文件头StartOffset:0x00000000***Marker:SOI(xFFD8)***OFFSET:0x00000000***Marker:APP0(xFFE0)***OFFSET:0x00000002length=16identifier=[JFIF]version=[1.1]density=72x72DPI(dotsperinch)thumbnail=0x0***Marker:COM(Comment)(xFFFE)***OFFSET:0x00000014Commentlength=41Comment=Intel(R)JPEGLibrary,version1,5,4,362010-6-17JPGExif头***Marker:APP1(xFFE1)***OFFSET:0x00000002length=10750Identifier=[Exif]IdentifierTIFF=0x[49492A0008000000]Endian=Intel(little)TAGMarkx002A=0x002AEXIFIFD0@Absolute0x00000014DirLength=0x0009[Make]=Canon[Model]=CanonPowerShotA710IS[Orientation]=Row0:top,Col0:left[XResolution]=180/1[YResolution]=180/1[ResolutionUnit]=Inch[DateTime]=2007:04:2711:52:06[YCbCrPositioning]=Centered[ExifOffset]=@0x00C4OffsettoNextIFD=0x00000C56EXIFIFD1@Absolute0x00000C62DirLength=0x0006[Compression]=JPEG[XResolution]=180/1[YResolution]=180/1[ResolutionUnit]=Inch[JpegIFOffset]=@+0x13F4=@0x1400[JpegIFByteCount]=5601OffsettoNextIFD=0x00000000EXIFSubIFD@Absolute0x000000D0DirLength=0x001F[ExposureTime]=1/1000s…………JPEG图像压缩技术把RBG转换成YCrCbJPEG压缩第一步Y表示亮度，即LuminanceCr和Cb表示色彩，即ChrominanceCrred(RGB=97,0,0)Cbblue(RGB=0,0,255)JPEG压缩第二步DownSampling此步可有各种变换，Y:Cr:Cb4:4:4(1x1)4:2:2(2x1)4:1:14:2:0(2x2)JPEG压缩第三步图像拆分成8*8pixels每块。JPEG压缩第四步每一块使用离散余弦变换(DCT)变换成频率数据。JPEG压缩第五步Quantization量化是对DCT系数的一个优化过程。去掉一些高频量，它是利用了人眼对高频部分不敏感的特性来实现数据的大幅简化。JPEG压缩第六步每MCU使用无损压缩。比如采用哈夫曼编码。JPG不适合显示文本JPEGimage,15%compression(85%quality),standardsubsampling(4:2:2),2193bytes.JPEGimage,35%compression(65%quality),nosubsampling(4:4:4),2224bytes.PNGImage,4-bitcolor(16colorpalette),bestcompression(level9),809bytes.GIFimage,4-bitcolor(16colorpalette),non-interlaced,916bytes.2010-6-17Baselinevs.progressiveJPEGs2010-6-1710360张JPG图片做实验2010-6-17结论2010-6-1710K,使用baselineJPEG(大约有75%的概率会比较小)10KprogressiveJPEG会有更好的压缩率(实验数据：94%)GIF布尔透明，不支持Alpha透明调色板图像，最高支持256色无损图像格式（LZW）水平扫描压缩间隔渐进显示2010-6-17626KB1286KB324KB1109KB平行对比垂直间隔渐进显示增大文件大小10%左右选择GIF格式的情况1。带运动的图像，即包含好多祯的图像2。图像很小gif的文件大小要比png小。(e.g.尺寸10x10px,或者颜色总数3)其它情况：通常PNG文件小于GIF文件20%以上PNGPNG8，PNG24，PNG32支持布尔透明和Alpha透明无损图像格式Deflate压缩间隔渐进显示不支持动画（除非是APNG，MNG）2010-6-17PNG压缩技术PNG压缩第一步Filtering：0None不处理1Sub当前pixel与前一个pexel的差值2Up当前pixel与上方pexel的差值3Average左方pixel与上方pixel的平均值4Paeth当前的pixel分別与左方,上方,左上方的pixel將以比较,找出最相近的pixel,计算pixel之間的差值.5Adaptive将以上五种算法都算一遍,找出相差值最少的方法.PNG压缩第二步使用zlib中第8种Deflate压缩,一種由LZ77Huffmancoding组合而成的算法LZ77策略查找strategy：Z_DEFAULT_STRATEGY=0Z_FILTERED=1Z_HUFFMAN_ONLY=2Z_RLE=3间隔渐进显示Adam7算法8*8pixel为单位,將图切成一個個block.每个pixel的重要性：1646264677777777565656567777777736463646777777775656565677777777间隔渐进显示Adam7效果间隔渐进显示大约增加文件大小20%.PNG对比GIF的压缩率GIF,2568bytesPNG,372bytes中的Filtering影响PNG文件大小的因素移除不必要的Chunk色彩管理Flitering的选择LZ77中的strategyHuffmanbuffers的大小色彩管理Filesize：84KBFilesize：53KB合并几乎相同的颜色Filesize：75KBFilesize：30KB移除不必要的透明通道色彩管理NoneUpSub的选择大部分的PNG8使用FilterNone更好逐行显示增加文件大小约20%左右，不要使用PNGInIE6@WindowsPNG8在IE6Alpha不被正常显示。Photoshop输出的是布尔透明的PNG8，非Alpha透明的PNG8Fireworks能够正常输出Alpha透明的PNG8PNG32出现灰色。只能用AlphaImageLoader选择合适的图片格式照片，大面积非连续色调图像JPG图标，线条，渐变，文本PNG8设计师效果图，高质量要求图PNG32尺寸非常小或颜色非常少或动画GIF2010-6-17对输出的