web前端开发，图片优化方案

在现代互联网整个网站中，图片已经成为每个网站的侧重点。据统计，图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。所以图片也绝对是成为性能优化的热点和重点之一。从谷歌公司的PageSpeed来看，就把图片优化作为重要的优化手段。下面来阐述一下Web图片优化的方方面面。前端项目优化方案

记得之前在一个地方看到一句话非常正确：

294、数学既是一门科学，也是一门艺术。一张图片的大小有很多种,有经验的seo优化人员会在上传之前对图片进行处理,使其像素变小,这样不占空间,而无经验的seo优化人员则是直接上传,其结果可想而知.不仅图片大小不一,显示不一样,同时还可能占据很大的空间,导致加载速度变慢,更有甚者,会导致网站变形.一张图片的大小体积最好在200k,过大会导致响应速度慢,用户不喜欢,跳出率会很高,过小虽然打开快了,像素却不行,看不清楚,一样是白搭.。一张图片的大小有很多种,有经验的seo优化人员会在上传之前对图片进行处理,使其像素变小,这样不占空间,而无经验的seo优化人员则是直接上传,其结果可想而知.不仅图片大小不一,显示不一样,同时还可能占据很大的空间,导致加载速度变慢,更有甚者,会导致网站变形.一张图片的大小体积最好在200k,过大会导致响应速度慢,用户不喜欢,跳出率会很高,过小虽然打开快了,像素却不行,看不清楚,一样是白搭.。

图片真的有那么重要吗？

在当前这个浏览器和Web标准的发展速度极快的时代，很多特效（渐变、阴影、圆角等等）都可以用纯粹的HTML、CSS、SVG等加以实现，实现这些效果少则寥寥数行代码，多则加载额外的库（一张普通的照片比非常强大的效果库也大了许多）。这些效果不但需要的空间很小，而且在多设备、多分辨率下都能很好的工作，在低级浏览器上也可以实现较好的功能降级。因此在存在备选技术的情况下，应该首先选择这些技术，只有在不得不使用图片的时候才加入真正的图片。

几种文件格式的选用依据

1.颜色丰富的照片，JPG是通用的选择

2.如果需要较通用的，GIF是唯一可用的选择

3.如果图片由标准的几何图形组成，或需要使用程序动态控制其显示特效，可以考虑SVG格式

4.如果需要清晰的显示颜色丰富的图片，PNG比较好

前端的图片优化方案

1.使用base64编码代替图片 场景：适用于图片大小小于2KB，页面上引用图片总数不多的情况 原理：将图片转换为base64编码字符串inline到页面或css中 优势：减少http的请求次数，并可以放到后台中，只传输字符串，有较多的构建工具可以直接实现 劣势：这种方法仅限于图片总数较少，而且图片大小小于2KB的情况。否则图片字符串会变得很长很长。

2.合并图片sprite 场景：任何用到页面图片的场景 原理：将多个页面上用到的背景图片合并成一个大的图片在页面中引用 优势：可以有效的较少请求个数，而且，而不影响开发体验，使用构建插件可以做到对开发者透明。前端项目优化方案适用于页面图片多且丰富的场景。 劣势：生成的图片体积较大，减少请求个数同时也增加了图片大小，不合理拆分将不利于并行加载。

3.使用css、svg、canvas或iconfont代替图片css代替图片 场景：适用于移动端或较高级的浏览器，而且绘制的图案较为简单。 原理：css方式可以用来绘制相对简单的团来代替图片，一般使用before或者after伪元素来丰富图案的复杂度。 优势：具有实现简单，图片体积小的特点，可以实现简单的动态效果 劣势：也受限于css的兼容性特点，绘制复杂图案困难svg的描述和适用场景上文已说明。canvas代替图片 场景：需要高性能的图片或 原理：适用html5的canvas元素绘制创建图片 优势：整个就是画2D图形时，页面渲染性能比较高，页面渲染性能受图形复杂度影响小，性能只受图形的分辨率的影响，画出来的图形可以直接保存为 .png 或者 .jpg的图形，适合于画光栅图像或者不规则图形 劣势：没有dom操作，必须依赖定时器，文字渲染性能差，不能添加描述(title属性什么的)，兼容性限制iconfont是一种web字体来代替图片的解决方案： 场景：代替页面上色彩单一的图片 优势：兼容性好，应用广，目前使用也很广泛 劣势：但是由于字体的颜色设置单一，只能用于代替颜色单一的图片，对于色彩复杂的图片，iconfont处理起来比较困难，

响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。上图这种叫响应式加载方式是利用js或者css判断分辨率，从而选择不同尺寸的图片进行引入，这种的好处显而易见，同样可以加快加载速度和节省流量。这种叫响应式加载方式，意思是利用js 或者css 判断分辨率，从而选择不同尺寸的图片进行引入，这种的好处显而易见，同样可以加快加载速度和节省流量。

5.压缩图片 场景：在不得不加载图片的前提下，要进一步提升优化效果，只能通过有损或无损压缩来减少图片的大小， 原理：对图片进行无损、有损压缩或格式转换，转为压缩后图片或压缩率更高的图片格式来实现 优势：减少图片加载流量，效果比较明显 劣势：服务器和浏览器压力增大，而且服务器需要额外的服务支持，格式转换要考虑浏览器的兼容性。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-95631-1.html