前端必备技术前端优化有很多，图片优化也是其中的一部分。无论是渐进增强还是优雅降级，图像优化已经成为开发中不可忽视的一部分。知其然，知其所以图像优化的前提是理解图像的基本原理。常规的图像格式分为矢量图和位图。工作原理：矢量图形使用线、点和多边形来表示图像。光栅图形，也称为位图，通过对矩形网格内每个像素的值进行编码来表示图像。矢量格式适用于简单的形状图形，更改颜色方便，只需通过CSS中的fill属性即可更改颜色。并且在任何缩放级别都可以保证清晰度。矢量格式无法满足复杂的图像，例如照片和高清图像。这时候，我们就需要位图了。位图的格式有很多种：GIFPNGJPEGJPEG-XRWebPBpg其中Webp是比较流行的图像格式方案。目前手机Android4.0以上和PCchrome10+（14~16有Renderingbug），opera11+都支持webp格式图片，比jpg小65%，但编解码速度慢很多。webp虽然会增加解码时间，但是由于体积小，加载时间缩短。上传文件的渲染速度其实更快。另外，如果考虑更全面的兼容性问题，还是要回归jpg和png。常规的选择是使用jpg作为背景图片，png作为小块图片。当然，它们都需要压缩。服务器可以使用Gzip。也可以在上传图片之前使用工具进行压缩，比如使用ps，或者在线压缩TinyPNG或者客户端工具ImageOptim。压缩可分为有损压缩和无损压缩。使用有损压缩来处理图像，就是删除一些像素数据。使用无损压缩处理图像是像素数据的压缩。可以根据需要选择压缩方案。优化策略常用优化方案：使用DataURI（base64）编码代替图片：适用于图片大小小于2KB，页面引用图片总数较少的情况。原理是将图片转换成base64编码的字符串内联到页面或者CSS中，可以减少HTTP请求。Combinesprites：在移动端有多张图片的情况下，可以将多张图片合并为一张图片，通过CSS定位背景图片来引用图片，可以有效减少HTTP请求。使用CSS、svg、canvas或iconfont代替图片：适用于移动端或高级浏览器，绘制的图片比较简单。图片延迟加载（lazyload）使用cdn提供图片访问。响应式图像响应式图像可以与延迟加载相结合以增强网络体验。许多网站徽标都是固定宽度图像的示例，无论浏览器视口的宽度如何，它们始终保持相同的宽度。但是在移动端，往往需要不固定的图片，需要显示不同的视口、不同的分辨率、不同的图片尺寸，而且视口变了，图片也变了。这时候我们就需要考虑使用响应式图片了：)100vw,(max-width:768px)90vw,(max-width:1980px)80vw"src="360.jpg"alt="">srcset：我们为浏览器准备了四张优质图片，分别是36076812001920size:告诉浏览器不同环境下图片的宽度在视口不大于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.jpg1200w1200.jpg9999w这时候浏览器把360的图片当成1200，这里可能会有人疑惑，为什么图片的宽度不是90vw？因为浏览器被骗了自己却不自知，所以还是按照1200的图片适配了dpr。414*90%*(360/1200)约等于111.7。这个方法很聪明，浏览器会根据你的尺寸从w列表中选择最合适的图片调用显示。如果我们需要更精确地控制浏览器在什么视口尺寸下显示多大的图像，我们可以使用picture元素。
