WEB应用图片的格式,以及各自的特点和优化(一) by FungLeo

前言

12年前我入行三天.用table布局做了一个非常粗糙的网页.我说了一句话,”网页就是表格加文字加图片,图片分两种,插入图片和背景图片”.

这句话在今天看来,当然是一个笑话.可是当时我说出这句话的时候,当时的那些前辈都非常认可我的总结,而且觉得我非常有从事网络发展的潜力啊.

哎,要不是他们的鼓舞,说不定我早转行了……

扯远了.说回正题,图片在网页当中,那是相当重要的.可其实,我们对图片是否真的理解得那么透彻呢?这篇博文,我们详细的来讲讲图片的那些事儿.

图片的种类

在网页运用中,图片是有非常多种类的.当中经常使用的有以下三种:

jpg
gif
png
1. png-8
2. png-24

当中,png分为两种,8位和24位.在文件的后缀上,都是.png.

当然,另一些不经常使用的.

1. WebP 谷歌推出的图片格式,用来代替jpg格式,相同质量,体积约为jpg的三分之中的一个.相当的优秀.有点是占用带宽小,而且支持透明.缺点是,须要server计算能力多,而且除谷歌外,其它浏览器无法原生支持,而且比較排斥.

2. JPEG XR 微软推出的替代jpg的方案.也有非常多有点.缺点是,连谷歌都办不成的事儿…微软….

3. mozjpeg 火狐推出的替代jpg的方案,兼容jpg.缺点,谷歌微软都办不成的事儿…火狐….

4. ……

理想是美好的,现实是残酷的.我们有各种各样的方法去优化网络图片.可是,在这个多极世界,你的我不支持,我的你不支持,终于还是回到原点,继续使用老三样.

所以,我们还是掌握这三个吧.

JPG的特性以及优化

一般在网络上使用的JPG图片,它的后缀都是.jpg.可是,它还有其它后缀,比如,.jpeg.我们一般在使用中,会将其后缀统一为.jpg.

JPG图片格式有非常多长处.支持的色彩多,支持有损压缩,等等等等.

使用场景

文章内容配图,商品配图,主题页面高清背景图片等.

普通情况下,jpg都是作为内容图片出现的.那么我们怎样来优化JPG图片呢?

什么是图片优化?就是保证图片质量的情况下,尽可能的缩小图片的体积,以减少图片对于带宽的需求.

优化方式1,减小图片尺寸

这是最简单直接有效的优化JPG图片的方法.通过减小图片的尺寸,能够答复减少图片的体积.

比如,文章配图,文章文字的可视区域为700px宽.我们能够为文章配图为700px宽.可是,这个图片的体积可能比較大.因此,我们将图片等比缩小到500px宽,则能够大幅减少图片的体积.而且,在文章的可读性上,并没有得到太大的损失.

优化方式2,减少JPG图片质量

这是通过有损压缩的方式,来减少JPG图片的质量,达到优化图片体积的效果.这样的优化方式要慎重使用.在使用中,一定要注意观察图片的质量是否在能够接受的范围内.

我们以photoshop为例.打开一张图片,按 ctrl+shift+alt+s快捷键,打开”存储为web所用格式”

如上图所看到的,能够看到右上角的品质.默觉得60.这个品质能够基本保证图片的质量.而在面板的左下角,能够看到在这个品质以下,图片的体积大小为69.57K.假设你感觉这个尺寸较大,那么,我们能够尝试略微减少一下品质.在保证图片的视觉效果的基础上,尽可能的减少图片的体积.

优化方式3,虚化(高斯模糊)图片背景

首先,我们不能减少图片的尺寸,其次,我们也不能减少图片的质量.在这样的情况下,我们能够考虑将图片的局部背景,或者非主要表达的内容,给予高斯模糊的处理.经过高斯模糊后,会在相当程度上减少图片的存储体积.

这个须要一定的photoshop操作经验.这里不做详细演示了.假设你不会,问一下美工,就明确是怎么处理的了.

优化方式4,减少图片的亮度

一张高清图片,用作站点的高清背景素材.这个时候,图片的细节一定要保持得非常好.可是这样,图片一定非常大.假设,我们尝试减少一些图片的亮度,可能不会太影响站点的审美效果,可是同事图片的体积能得到一定的缩减.

不管採用什么方式来减少图片的存储体积,有一点是必须肯定的,那就是,必须保证图片的可视质量.

如上图所看到的,图片的体积是减少了,可是美美的照片变得花里胡哨的,肯定不是我们须要的.因此,怎么优化JPG图片,那是一个平衡,怎么找到这个最佳的平衡,须要在实际项目中的实际考量.

GIF的特性以及优化

GIF是一种具有动画性质的图片,它的长处是图片能够做得比較小.能够用来做动画,然后其还支持一位的透明(就是要么透明,要么不透明,不支持半透明),这些都是其长处.它也有一个非常大的缺点,就是仅仅支持索引颜色,也就是说,最多仅仅支持256个的颜色,这大大限制其使用的场景.

由于png-8在除了不能做动画这一个特性上输给了GIF,在其它方面完胜GIF格式(同等质量体积更小).因此,以往我们在使用GIF动画的地方,基本上都能够用PNG-8这个格式给代替.

因此,眼下GIF存在的唯一意义,就是——做动画.

那么,怎样优化GIF格式图片呢?方法有两个:

1.减少图片的尺寸

这是最有效的方法.理由不多说.

2.减少图片的索引颜色,比方从256减少到128

通过减少索引颜色,也能够有效减少图片的存储尺寸.

GIF动画的处理,PHOTOSHOP做得并非非常好.眼下有非常多人在视频软件中将视频的一个片段直接转成GIF动画.在转换的时候,将图片的尺寸缩小点就是了.

PNG-8的特性以及优化

PNG-8在除了动画这方面代替不了GIF,其它方面全然能够代替GIF素材.主要运用在网页的装饰性图片上,和一些大面积纯色显示的内容图片上(存JPG会比較大,可是存PNG-8就比較小,须要注意的是,由于是索引颜色,一定要注意图片的可视质量).

PNG-8的运用场景特别多,那么他要怎么优化呢?

1.减少图片的尺寸

仅仅是,PNG-8的用途一般都是装饰性图片,减少尺寸非常可能行不通.这一点是须要注意的.

2.减少图片的索引颜色

这一点非常有效.可是也要考虑图片的可视质量.

3.拼合多张PNG-8图片,组成一张”雪碧图”

我们可能没办法把一张图片的尺寸给减少,可是,我们能够通过组合多张PNG-8的装饰图片,形成一张较大的图片,一来减少了网页的连接数,二来,总体的减少了图片的尺寸.例如以下图,就是一个样例:

如上图所看到的,这是太平洋电脑网的首页的雪碧图.当我们使用雪碧图的时候,就必须在CSS中使用背景定位的方式来显示相应的图片.这个本文不做过多阐述.

这样做,能够大幅减少尺寸.非常推荐使用.

PNG-24的特性以及优化

PNG-24是一种无损压缩图片的存储格式,能够最高标准的保存图片的原有质量,而且支持8位透明(就是能够实现半透明)的图片存储格式.

它最大最大的长处是无损.仅仅是,在无损状态其体积比較庞大.因此,在实际WEB运用中,假设是须要高保真存储的图片,普通情况,还是存成jpg图片的多,由于,jpg图片能够保证图片的色彩和体积,而png-24是全然无法压缩的.所以在web设计中,实际运用场景,并非非常多.

可是,在第二种场景以下,其作用就全然不是其它不论什么一种格式能够替代的了,那就是,半透明图片.

没有不论什么其它的选择,仅仅能採用PNG-24位存储格式.那么,怎么优化呢?

1.减少图片的尺寸

其实是废话.一般半透明的使用,基本上都是装饰性的图片,那就不能缩小了.可是,尽可能的使用小一点的图片.

假设是基于高清图片,建议直接Jpg,那样设置的选择性很多其它.

2.拼合多张PNG-24图片,组成一张”雪碧图

理由和PNG-8是一样一样的.

总结

色彩丰富的、大的图片存储为jpg格式
尺寸小的，色彩不丰富的和背景透明的存储为png-8格式
动画使用gif格式
半透明的存储为png-24格式

终极优化方式——不採用图片,在设计的时候就大面积採用扁平化的设计,其设计元素仅仅须要得到色值就可以,不须要切图,那是最佳的优化.能不能做到,就看各位的设计师了.感谢苹果,感谢微软,感谢扁平化!

上面的总结,为大政方针.在详细的实践中,我们须要针对不同的问题,细致分析,认真处理,找到最佳平衡点,存储合适的图片.

本文FungLeo原创,转载请保留版权申明以及首发地址:http://blog.csdn.net/FungLeo/article/details/50923473