浅谈图片优化的方法

标签: 页面构建 | 发表时间:2012-07-24 10:54 | 作者:海的女儿6931
出处:http://udc.weibo.com

在网站优化中,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以通过图片优化来节省网站的带宽。那么作为页面构建工程师应该采用什么方法来优化图片,既能保证UI的还原度,又使图片最精简呢?下面我就个人经验,来简单介绍一下图片优化的方法,首先我们了解一些图片方面的知识:

1. 矢量图与位图。

  •   矢量图:缩放、旋转不失真的图像格式,不管你离多近去看都看不到图形的最小单位。存储的文件较小,但是很难表现色彩层次丰富的逼真图像效果。你可以理解成完美的圆型、抛物线等形状。
  •   位图:又叫栅格图、像素图,最小单位由像素构成,缩放、旋转会失真。举个例子来说,位图就好比十字绣,远看时画面细腻多彩,近看时能看到每一针的色彩过渡。

十字绣                                                                                                           十字绣放大

下表为矢量图和位图的对比:

 

2.有损压缩、无损压缩。

  • 有损压缩:特点是保持颜色的逐渐变化,根据人眼观察现实世界的 突然变化, 然后使用附近的颜色通过渐变或其他形式进行填充。因为素点的数据信息,所以存储量会降低,还不会影响图像的还原度质会有所下降。JPG是有损压缩格式,在存储图像时会把图像分解成8*8像素的网格单单独优化。举个例子:白色小块为8*8px,黑色底色块为32*32px,当小白块已经不是纯白色了,它周围的小白块却很尖锐,如下图所示:

右上角的白色格子刚好没有在8*8像素的网格单元中,所以保存时会跟周围的8*8的网格单元颜色融合,下图的效果:

这就是平时保存JPG图片时图像会模糊的原因,下面是几张彩色图的局部对比效果:

  • 无损压缩:利用数据的统计冗余进行压缩,真实的记录图像上每个像素点的数据信息。他的原理是先判断哪些颜色相同,哪些不同,将相同颜色的数据信息进行压缩记录,把不同的数据另外保存。多次存储后图片的品质不会下降。

为什么无损压缩的图也会有失真的?因为他的压缩原理是通过索引图像上相同区域的颜色进行压缩和还原,也就是说只有在图像的颜色数量小于我们可以保存的颜色数量时,才能真实的记录和还原图像,否则就会丢失一些图像信息。例如,PNG-8和GIF格式:

而PNG24为真彩色所以颜色表为空,不会失真。

3. PNG 、GIF 、JPG图片对比。

在我们进行图像优化技术前,需要学习有关的图片格式的一些技术细节。每个图形格式都有自己的优势和弱点,知道他们会使你得到更好的视觉质量和压缩品质。

网页图片优化是网页加速中非常重要的一步,对图片进行压缩,不仅能够节约带宽,并且加快网页的速度。我们常用的图片编辑软件都可以在压缩图片。

  • PNG-8 的高压缩比

切图时,有时选择 PNG-8 可以获得更高的压缩比。注意,是 PNG-8,不是 PNG-24。不过有些情况下还是 GIF 或 JPG 会小一些,需要根据实际情况调试以选择最佳方案。

  • PNG-24 的优化技巧,使用色调分离:

拿微博左侧导航的小icon为例,压缩后的图像大小对比如下图:

PS色调分离的操作步骤如下:

对比大小:

使用工具优化后,还能够小一些:

请注意,上图中原本是GIF格式的图片 被改为了PNG格式 。所以,在使用工具优化时后需要再查看一下文件格式是否被更改,避免漏过某些图片没有优化。

图片优化在微博首页上的应用:

1. 图型类、照片类

对于图像格式的选择,我们还需要考虑图片的使用场景或功能,概括为两类:图型类、照片类

图型类:图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性,颜色数量较少。

图型类一般可以使用PNG格式或者GIF格式。优化时可采用PNG格式为PNG8或者PNG24,品质为32,如果色彩有损失可采用品质64或者128。

例如:首页左导的图标、feed区图标、勋章图、表情动画都属于图形。

照片类:照片通常含有百万数量级的颜色,包括平滑的颜色过度和渐变,如果是图形较为复杂,图中有时会出现真实的照片。

照片类一般用PNG和JPG。可以根据图片色彩的丰富程度而定。

PNG的品质一般要到128。JPG的品质一般要在70-80之间,以噪点的程度确定。

例如:皮肤背景图、发布器、按钮背景、发布器下方的tips、右侧广告、用户头像、用户发布的图片。

2. 通用类、随机类

按照首页图片出现的频率分成:通用类、随机类

通用类:每个人首页都会看到,图标、按钮、小背景。

例如,顶部托盘图标、左导图标、feed区图标、发布器图标、身份图标、操作类图标、状态类图标、按钮。尽可能的采用PNG的格式保存,文件会相对来说较小一些。

下图为微博的按钮和左侧导航icon小图的,使用GIF和PNG格式的大小对比:

下图为微博的按钮背景图分别使用GIF和PNG格式保存的大小对比:

随机类:根据自己定义和发布的内容而定。

A. 表情GIF

可以使用FireWorks或者ImageReady,建议使用ImageReady。

最好是手动一张张的调整,因为这些表情图的色彩值都比较少,如果使用比较大的颜色时会存储量较大。

另外,批处理的话也是需要一个文件夹一个文件夹去处理,表情的文件夹太多了,基本上批处理还是很慢。批处理如果是使用FireWorks的话,有的动画会出现变快或者是缺边的情况。

手动处理时,根据索引色的多少来存,一般来说4-128索引色存储。

B. 换肤类图片:

采用JPG格式或者PNG格式。

皮肤的主要背景图中如含有真实的照片或者文字,可采用JPG格式,为了保证更接近设计图需采用85以上的品质压缩图片。如果色彩跨度不大的背景图片,可采用PNG格式。

C. 勋章类:

目前有GIF和PNG两种格式,GIF的是小图、PNG的是中图和大图。品质选128即可。

这个目录批处理比较快。因为都是在同一个文件夹里。但是手动的话会更小一点。

D. 各种广告:

发布器下方tips、右侧广告、底部广告。采用JPG格式或者PNG格式。

E. 用户相关图:

头像、用户发布的图这个需要在后台控制压缩品质。采用JPG格式或者PNG格式。

图片优化工具Smush.it 介绍

 

Smush.it 是 YUI 团队制作的一款基于 YUI 的在线图片优化工具。

它是基于以下四条图片优化建议制作的服务:

· 移除 JPG 中的 meta 数据。

· 优化 JPG 的压缩率。

· 转化特定 GIF 图片到可索引的 PNG 格式图片。

· 从可索引的图片中移除没用到颜色信息。

所以使用 Smush.it 压缩图片可以删除图片中多余的字节而不改变图片的视觉效果和质量。

在实际使用中发现:

· 它还能把某些JPG图片转化为PNG图片。

· 对于PNG24真彩色图片,能够去掉一些肉眼察觉不到的颜色信息,弥补photoshop和firework优化不了PNG24图片的不足。

· 可以优化GIF动画图片。

Smush.it 使用

方法一:使用Firefox的插件Yslow里的Tools工具中的All Smush.it™

拿微博首页为例:

Firebug,使用Yslow工具,运行后,选择Tools

 

点击All Smush.it™,会自动跳转到 http://www.smushit.com/ysmush.it/得到下图:

 

点击按钮Download Smushed Images后,会让下载一个zip的压缩文件。

方法二:直接登录  Smush.it 的网站,把需要压缩图片的url粘贴到输入框中(或者从本地电脑上选取图片),点击 Smush 就可以进行图片压缩,然后 Smuch.it 就会提供一个优化报表,显示图片压缩比率和节省了多少字节,并且提供一个可下载包含压缩后的图片文件的压缩包。

下图为直接填写线上URL的方式(以逗号隔开):

下图为从本地电脑上选取图片的方式:

下图为优化结果:

归纳:

让我们再回顾一下重点:

1. 选择合适的格式:用JPG保存照片、用GIF保存动画,其他图片使用PNG保存,并尽可能用PNG8。

2. PNG24图片的压缩技巧。

3. Smush.it的使用。

您可能也喜欢:

专属头像你可以拥有
无觅

相关 [图片 优化 方法] 推荐:

浅谈图片优化的方法

- - 微博UDC
在网站优化中,如果图片优化得好,不但可以提高页面的加载速度,提升网站的用户体验,而且还可以通过图片优化来节省网站的带宽. 那么作为页面构建工程师应该采用什么方法来优化图片,既能保证UI的还原度,又使图片最精简呢. 下面我就个人经验,来简单介绍一下图片优化的方法,首先我们了解一些图片方面的知识:.   矢量图:缩放、旋转不失真的图像格式,不管你离多近去看都看不到图形的最小单位.

mysql优化方法

- - 数据库 - ITeye博客
通过show status和应用特点了解各种SQL的执行频率. 通过SHOW STATUS可以提供服务器状态信息,也可以使用mysqladmin extended-status命令获得. SHOW STATUS可以根据需要显示session级别的统计结果和global级别的统计结果. 以下几个参数对Myisam和Innodb存储引擎都计数:.

Web性能优化之图片优化

- - 极客521 | 极客521
HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片. 从性能优化的角度看,图片也绝对是优化的热点和重点之一,Google PageSpeed或者Yahoo的14条性能优化规则无不把图片优化作为重要的优化手段,本文覆盖了Web图片优化的方方面面,从基本的图片格式选择、到尚未被广泛支持的响应式图片均有所提及.

图片原理与优化

- - TID-财付通设计中心
前言:该文收集了前辈们的一些关于图片优化的技巧,在此收拢到一起,对于各个方法的优化原理做了一些研究,希望能给大家对于图片优化这一块起到抛砖引玉的作用. 提到图片,我们不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的. 这些点可以进行不同的排列和染色以构成一副图片.

下载Flickr图片方法

- wind - 让PPT设计NEW一NEW
        众所周知,Flickr是全球最大的在线图片分享网站,也是最早涉足web2.0的网站之一. 网站上面有很多非常漂亮的图片,这为那些“图片控”、“下载控”提供了一个非常好的途径. 可惜啊可惜,可惜的是,Flickr网站并非允许所有图片可以下载.         前几天,有个网友发微博私信给我,问我如何下载Flickr图片.

android图片压缩方法

- - CSDN博客移动开发推荐文章
第一:我们先看下质量压缩方法.         image.compress(Bitmap.CompressFormat.JPEG, 100, baos);//质量压缩方法,这里100表示不压缩,把压缩后的数据存放到baos中  .         while ( baos.toByteArray().length / 1024>100) {  //循环判断如果压缩后图片是否大于100kb,大于继续压缩         .

AndroidのBitmap之大图片优化

- - 博客园_首页
不解释大家懂得,在listview 或grid或viewpager等大量大尺寸图片时,会造成OOM. 这里是优化图片内存的一个方法,注释写的很 明确... public Bitmap getBitmapFromNet(final String url,final int width,final int height){//从网络下载图片.

图片优化的那些工具

- - 携程UED
图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出. 除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、imageOptim)对图片进行压缩. 在这里我想给大家介绍一下上述应用主要使用到了哪些命令行工具以及它们的使用方法.

如何处理 Web 图片优化?

- - SegmentFault 最新的文章
未优化的图片是影响网站性能的主要因素之一,尤其会影响初次加载. 取决于图像的分辨率和画质,图片可能占据整个网站流量的 70%.. 生产环境出现未优化的图片并显著影响初次加载速度的现象还是挺常见的. 缺乏经验的开发者通常没有意识到这一潜在问题,也不了解各种优化图片的工具和方法. 本文的目标是介绍优化 web 图片的主要工具和方法.

前端优化之图片优化自动化

- jinn - 搜索研发部官方博客
随着前端页面越来越复杂,尤其是一些社区型的页面中,图片成了页面中不可或缺的资源,并且随着产品功能的叠加图片大小越来越多. 以下是几个网站的图片所占的比重. 由于图片是二进制文件,并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小. 所以图片优化主要是选择合适的图片格式,在不降低图片质量的情况下去掉图片里的元数据信息.