前端图片选择问题

图片问题的一些总结

前言： 以前我的对于图片的问题，一直仍是显得不是很重视。但其实对于互联网来讲，可能图片的内容已经占据了整个互联网的大半部分，所以咱们很大一部分流量的消耗，都是用在了图片上面，所以，对于图片有一些认识确定是如今所必须的。因此趁今天这个不太忙的机会，打算对于图片的问题作一个简单地总结，也算是对以前没掌握到的东西的一个学习与备忘过程。

常见的图片格式

图片格式	压缩方式	动画	适应浏览器
JPG	有损	不支持	全部
PNG	无损	不支持	全部
GIF	无损	支持	全部
APNG	无损	支持	firefox、safari
WebP	有损/无损	支持	chrome、opera

APNG，做为想取代gif的新格式，他比咱们经常使用的gif更为优秀。从其名称中能够看出，APNG其实能够说是会动png，由于png支持24位的颜色，而gif最多仅支持8位的颜色，所以，APNG的显示效果比gif更为清晰。惋惜APNG并无加入png标准，所以咱们平常生产中很难将其归入使用。

WebP，是由谷歌推出的图片格式，想让其做为web中专用的图片格式。与jpg做对比，WebP有对透明的支持，以及彻底不亚于JPG的压缩率。而与PNG对比，WebP更小，加载更快。不过惋惜的是，其兼容性也是不太友好。

上面两种格式，由于使用不太多，所以仅仅说起一下。下面将对咱们经常使用的JPG，PNG，以及GIF来作讨论。

JPG

因为jpg的压缩方式为有损，而咱们以前有说起到，图片所消耗的流量已经占据了互联网的半壁江山，所以，jpg天然就成为了web开发中的宠儿。对于图片中，没有透明效果的，以及图片更为颜色丰富的图片，咱们多能够采用压缩60%-80%的jpg图像。这样能够保证使得图片更小，网页加载更快。不过须要注意的是jpg的每一次压缩，对图片都是有损的。所以，对于一些有线条，或者文字的图片，jpg压缩以后，看起来并不理想，所以，在这种状况下，应该尽可能避免对jpg的使用

GIF

GIF仅有256种颜色，而且对透明对支持仅仅局限于全透明或者不透明，所以，gif若做为非动图来讲，只能用于颜色不太复杂的图片。不过通常来讲，咱们用gif都是因为其对动画的友好支持，在APNG兼容性十分不友好的状况下，若是仅仅想引入一个动图的话，gif是目前很好的选择。

PNG

• 格式

  格式	位数	透明支持
  png8	8	不支持
  png8+索引透明	8	仅支持彻底透明
  png8+alpha透明	8	支持
  png24	24	不支持
  png32	32	支持

  png的格式能够分为以上几种，而咱们经常使用的即是png8与png32了（便是咱们常在ps中导出的png24）

• 透明

  • png32

    咱们在ps中导出的png24勾上透明选项后，便是这里所说的png32了，而png32其实是指的png24位的深度，以及8位的alpha透明通道。由于png32颜色的丰富性（2^24种颜色）,以及对各类透明的友好支持。png32是咱们许多人最经常使用的格式之一。其导出方法也很简单，只用在ps中选择导出为web所用格式，选中png24+透明便可。然而png32在ie6上并不能表现为透明

  • png24

    其实png24自己是不透明的，由于其并无那8位的alpha通道。在fireworks中咱们能够很好地看到这一特色
    
    图中下面为png32，上面为png24

  • png8

    png8因为仅有2^8种颜色，所以体积较小，同时，他还对透明有比较友好的支持，所以，png8也是不少人喜欢使用的图片格式。

    • png8+alpha透明

      png8的alpha透明，因为不可以使用ps来进行导出，所以咱们须要使用fireworks来导出。此次，我选择了一张黑色的透明背景来对透明的支持作一次比对

      
      图中下为png32，上为png8+alpha透明

      能够看出，png8对于半透明，有不错的支持性。同时，由于其比较小的体积。在现代浏览器上，对于颜色不太复杂的小按钮之类的的东西，以及对于图片的要求并无那么高的移动端端来讲png+alpha透明也是显得十分友好的。固然，对于颜色较为复杂，以及要求较为严格的pc端上须要采用的东西，我认为仍是应该采用png32的好。不过alpha透明的png8在ie6上的表现并不如人意，在ie6上，其半透明处会以全透明来显示，而且毛边严重。以前也说起到了，png8的alpha透明对于半透明，只是有不错的支持性，其真正的表现事实上仍是不如png32。在我测试过程当中发现，png8采用alpha透明，依然会出现一些毛边
      比对能够发现，上面png8+alpha透明的图片比起下面png32的图片仍是多了一些锯齿。不过总体影响不算太大。

    • png8+索引透明

      png8的索引透明终于能够用ps来进行导出了，导出方式也很简单。导出的时候直接选择ps的png8或者ps预设的png-8 128仿色。此时咱们就能够导出索引透明的png8了。以下图
      

      从上面的图能够看到，咱们将导出图片，四周部分变为了白色（固然，你一打开看到的也多是没有白边的）。这个时候，把图片右边那个杂边改成无，就能够去掉图片的白边。以下
      

      左边的png32的图与右边png8的图对比能够看出，右边的图明显有一些锯齿。缘由是索引透明对于透明的支持并不完善，其仅仅支持全透明以及全不透明，而不支持半透明。当选择了杂边为无的时候，全部的半透明转换为了避免透明，也就产生了锯齿。那如何解决这些锯齿呢？

      刚刚将四周白色，变为无的杂边的选项，其实就是ps对于锯齿的一个解决方法。若是这张图的需求是在纯色的背景下的话，咱们能够将杂边，改成该图在网页中所在的背景的颜色，以作到在视觉上的一种无锯齿的感受。这种方案在ie6下也能够很好地实现，不过也有他的局限性——假若背景颜色比较复杂，那么这种方案将会无效。

图片的选择

那么就整体来讲下图片格式的选择应用场景吧（虽然上面多少都有些提到了）

• 关于jpg

  因为其可压缩的特色，对于背景颜色较为复杂（好比照片等图）而且没有透明的图片，建议采用jpg。这样在保证了图片肉眼几乎看不出很大区别的状况下，把图片压得更小，压缩更快。不过对于有线条及文字的内容，不推荐用jpg。

• 关于gif

  若是须要动图的话，因为APNG对兼容性对不友好gif依然仍是首选。

• 关于png
  • png8+alpha能够加入平常的开发中。对于桌面端，在不用考虑ie6的状况下，alpha透明的png8能够用在一些图片颜色较为简单的地方。对于移动端，能够考虑直接采用alpha透明的png8，而不采用png32，由于移动端的网络相较pc端较差，所以，采用png8+alpha能够节省流量。
  • png32在桌面端中，仍是能够做为主要的图片格式。由于桌面端相较于移动端，网速更友好，同时，显示器的浏览对于图片的精细程度要求更高，所以，一些比较复杂的按钮，logo仍是应当采用png32来处理
  • png8+索引透明能够用来处理桌面端对于低版本浏览器的（ie6）的兼容问题，虽然采用背景杂边的方式只能解决部分锯齿问题，但总好过于无。ie6已然是很早以前的浏览器，自己对其的兼容就势必会牺牲一些东西。所以，我的感受仍是对于背景简单的，直接采用杂边的方式来解决，而对于背景较为复杂的，目前我也只能想到采用去掉杂边的方法去解决（其实也就是说锯齿直接无论了）。

结束时的话

……恩，对于图片的总结应该是尚未结束的。这里就只能写到这么多了。还有关于体积更小，效果更好的WebP，以及对于这种图片方案与前端自动化工具的结合尚未归入实践……嗯，搞很差哪天懒癌治好了就继续写了。