前端图片选择问题_html/css_WEB-ITnose
图片问题的一些总结
前言: 之前个人对于图片的问题,一直还是显得不是很重视。但其实对于互联网来说,可能图片的内容已经占据了整个互联网的大半部分,因此我们很大一部分流量的消耗,都是用在了图片上面,因此,对于图片有一些认识肯定是现在所必须的。所以趁今天这个不太忙的机会,打算对于图片的问题做一个简单地总结,也算是对之前没掌握到的东西的一个学习与备忘过程。
常见的图片格式
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
结束时的话
……恩,对于图片的总结应该是还没有结束的。这里就只能写到这么多了。还有关于体积更小,效果更好的WebP,以及对于这种图片方案与前端自动化工具的结合还没有纳入实践……嗯,搞不好哪天懒癌治好了就继续写了。
上一篇: 实现页面跳转并能传值的实例详解
推荐阅读
-
HTML5实现简单图片上传所遇到的问题及解决办法
-
前端笔记知识点整合之jQuery(一)加载函数的区别&对象&操作HTML/CSS&动画&选择器
-
HTML和CSS前端教程03-CSS选择器
-
HTML5中的伪类选择器实现一张图片翻转特效(代码实例)
-
前端开发HTML&css入门——CSS&选择器练习(待补)
-
HTML5 Plus 拍照或者相册选择图片上传
-
HTML5时代的纯前端上传图片预览及严格图片格式验证函数
-
前端笔记知识点整合之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
-
前端开发HTML&css入门——伪类选择器和一些特殊的选择器
-
JSP:解决html页面不能显示绝对路径图片问题,以及图片保存到项目webroot文件夹下面不能及时刷新显示问题