前端优化有许多，图画优化也是其间的一部分。无论是渐进增强仍是高雅降级，图画优化成为了开发上不行忽视的一部分。
知其然，须知其所以然
图画优化的前提是需求了解图画的基本原理。惯例的图画格局分为矢量图和位图。
原理：
矢量图形运用线、点和多边形来表明图画。
光栅图形，也能够成为位图，经过对矩形格栅内的每个像素的值进行编码表明图画。
矢量格局适用于简单形状图形，并且改换色彩便利，仅经过 CSS 中的 fill 特点便能够改动色彩。并且在多大的缩放下都能保证明晰，矢量格局不能满足杂乱的图画，例如照片，高清图。这时分我们就需求位图，位图的格局有许多：
GIF
PNG
JPEG
JPEG-XR
WebP
Bpg
其间 Webp 是比较盛行的图画格局计划，目前移动端 Android 4.0 以上、PC 端 chrome 10+(14 ~ 16 有烘托 bug )、opera 11+ 均支撑 webp 格局图片，比较 jpg 体积削减了 65%，但编码解码速度慢了许多，尽管 webp 会额定添加解码时刻，但由于体积小了，缩短了加载时刻，实际上文件的烘托速度反而快了。
别的如果考虑到更全的兼容性问题，仍是得回归到 jpg 和 png 上，惯例的的挑选会用 jpg 作为背景图，png 作为小块的图片，当然都需求经过紧缩，服务端能够运用 Gzip ，上传图片前还能运用东西进行一遍紧缩，比方运用 ps，或许在线紧缩
TinyPNG 或许客户端东西 ImageOptim。
紧缩可分为有损紧缩和无损紧缩。
运用有损紧缩处理图画，是去除某些像素数据。
运用无损紧缩处理图画，是对像素数据进行紧缩。
紧缩的计划能够依据需求挑选。
优化战略
常见的优化计划：
运用 Data URI 即(base64)编码替代图片：适用于图片巨细于 2 KB，页面上引证图片总数不多的状况，原理是将图片转换为 base64 编码字符串 inline 到页面或 CSS 中，能够削减 HTTP 恳求。
兼并雪碧图(sprite)：移动端多图状况下，能够将多图兼并到一个图中，经过 CSS 定位背景图的方法来引证图片，能够有用削减 HTTP 恳求。
运用 CSS、svg、canvas 或许 iconfont 替代图片：适用于移动端或高档的浏览器，而且制作的图片比较简单。
懒加载图片(lazyload)
运用 cdn 供给拜访图片的进口。
呼应式图片
呼应式图片能够结合懒加载的方法，这样能够加强网页的体会。许多网站 logo 就是一个固定宽度的图画的比如，不论浏览器视口的宽度怎么，始终保持相同的宽度。
然而在移动端，往往需求不固定的图画，不同视口，不同的分辨率，需求展现不同的图画巨细，图虽视口的改动而改动。
这个时分我们需求考虑运用呼应式图片：
src="360.jpg" alt="">
srcset：我们给浏览器预备了四个质量的图画，分别为 360 768 1200 1920
size：我们来通知浏览器，在不同的环境下图画的宽度
当视口不大于 360 时，图画的宽度为 100vw，当视口大于 768 时，图画显现为 90vw，以此类推。
最终的 src 是作为默许图画 url 引进，是一个回退计划，当然浏览器不认 srcset 和 sizes 特点时，直接读取 src 烘托。
demo:
iphone4(320)下，图画宽度和我们设置的 100vw 共同，而浏览器挑选的是 768 图画没有挑选 360 图，由于 iphone4 的 dpr 是 2，浏览器智能地挑选了适宜的 768。
iphone6p(414)下，由于 6p 的 drp 更高，浏览器挑选了 1200 质量的图画，显现了 90vw。
这时我们能够诈骗一下浏览器：
360.jpg 1200w
1200.jpg 9999w
这时浏览器把 360 的图当成了 1200 来用了。这儿可能有些疑问，图画的宽度为什么不是90vw 了哪?由于浏览器被骗了但是自己却不知道，他仍然依照 1200 的图画，去适配 dpr。414 * 90% *(360 / 1200)约等于 111.7。这种方法很智能，浏览器依据你的 sizes，从 w 列表中挑选最适宜的图画来调用显现。
如果我们需求更准确的操控浏览器在什么视口巨细下显现多大的图画，能够运用 picture 元素。
当视口大于 960 像素时，会加载 960.jpg。大于 768 像素时，会加载 768.jpg。视口小于768，则加载默许图画。尽管不是每个浏览器都支撑 picture 元素，还能够运用 Picturefill polyfill。
加载以及显现战略
多图烘托的状况下，结合懒加载，又要保证图画的烘托速度，相似知乎的烘托作用，我们能够运用 progressive-jpg。
比较 baseline-jpg 一行一行的扫描并显现图片，当然都是从弱网视点考虑，这种显现可能更适宜。但仍是有缺乏。参阅了下知乎和 medium 等网站的示图作用，能够进行模仿：
先创立一个为图片占位的预留块，在这个块中会展现图片。块中有别的一个块会先设置一个 padding-bottom 来撑起块的高(即保证需求加载图画也是这个宽度高度的份额)。这样避免图片在加载时发作重排。
加载一个轻量版的图片。这个时分会先恳求一个图片的缩略图。并运用含糊 blur 作用
等滚到到可视区域，加载高质量图，加载结束后取消含糊作用。
medium 下的完成方法更为杂乱点，是在缩略图加载结束后，制作到 canvas 画布，再经过一个自定义的含糊函数，相似于 StackBlur，同时恳求高质量图。比及恳求完，再躲藏画布。
微信：boxiangchina
博象是专业佛山网站建设、佛山建站、网站制作、网站设计、网页设计、网络营销、网站运营、百度竞价排名托管、品牌策划 、企业管理咨询的优质企业
联系方式：
广州热线：020-81122189, 佛山热线：0757-85905233
客服QQ：853233398，客服微信：MZ853233398
