图片格式
不同的图像格式之间的区别，在于进行有损压缩和无损压缩过程中采用了不同的算法组合。
JPEG
是最常用的图像格式，后缀名为jpg或jpeg。
是一种有损压缩算法的格式。通过去除相关冗余图像和色彩数据等方式来获得较高的压缩率，能够将图像压缩在很小的存储空间，会造成图像数据的损伤。如果要用高品质图像，就不能采用过高的压缩比例。
优点就是在可以支持极高的压缩率，文件大小可以很小，缺点也就是同时带来的图像质量受损，还有就是不支持透明度。
PNG
是为了代替GIF文件格式而产生的，增加了一些GIF所不具备的特性。是一种采用无损压缩算法的格式。
比起JPEG格式有更好的色彩展示，线条边缘也会更清晰，还具有透明度的特性，当然文件大小会增大很多。主要就是在展示logo时使用。
GIF
色彩效果最低，有着很高的压缩率，一般在50%左右，也是支持透明展示。也就是适合在色彩比较少的场合展示。
主要也是logo图标展示，现在应该都已经被PNG格式所替代，另外主要就是用在动图展示。
WebP
是Google在2010年发布的，同时具备了有损压缩和无损压缩的文件格式，还有透明以及动画的特性，有着更优的压缩算法，更小的图片大小，还能有着近乎无差的图片质量。
除了在Safari的支持不够（只有macOS 11之后才支持），也就是在IOS下的兼容还是不行，现阶段的其他主流浏览器都已经支持这种格式（近乎淘汰的IE除外）。
但就目前来说，WebP仍只被看作PNG更高效快捷的替代方案。
SVG
是基于XML的矢量图形，对图像处理不是基于像素的，而是通过形状轮廓，屏幕位置进行描述。
最大的优势就是可以任意放大图形而不会有损图像质量，在任何分辨率下都可以高质量展示。而且比这JPEG和PNG格式的文件要更小，可压缩性更强。
AVIF
是由开源组织AOMedia开发，去年才被Netflix公司公布的，是一种基于AV1视频解码器的新型开放图像格式。支持有损和无损压缩，透明甚至动画，可以提供更高的颜色深度。
从官方提高的图片来看，AVIF相比无损PNG有近59倍的压缩性能。相比JPEG，在具有相同图像质量时，大小会小10倍。
当然，虽然AVIF压缩性能相当优秀，但在现在兼容性是不够的。毕竟是刚诞生没多久的，还有很长一段路要走。
图片压缩
图片压缩是常用的手法，图片质量在可控范围内的压缩通常都是看不出来的，所以在保持清晰度范围内可以适当压缩图片大小，特别是在背景图的时候。
有损压缩
有损压缩指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量（即图片被压糊了），并且这种损失是不可逆的。例如 jpg 格式的图片使用的就是有损压缩。
无损压缩
无损压缩指的是在压缩图片的过程中，图片的质量没有任何损耗。例如 png、gif 使用的就是无损压缩。
工程化的可以直接使用webpack配置image-webpack-loader进行图片压缩。
图片分隔
如果页面中有一张效果图特别大时，可以考虑一下分割图片。毕竟常常需要妥协的就是我们开发。
建议单张土图片的大小不要超过100k，我们在分割完图片后，通过布局再拼接在一起。可以图片加载效率。
这里注意一点，分割后的每张图片一定要给height，否则网速慢的情况下会明显看到页面内容高度从无到有。
图片选择
可能我们经常会以为图片质量越高越好，有时就会使用高像素的图放到宽高较小的节点容器内，其实这并不会让人感觉到更清晰，反而会大大降低加载速度。
所以，不要在HTML中缩放图片，用到多大的图片，就使用相应大小的，尽量去固定图片的尺寸。
还有一种情况是页面先以缩略图展示，鼠标移入以后才展示全图，这种一开始就加载大图，也是会影响到加载速度，可以考虑使用两张图，刚开始加载缩略图，只有悬停后才加载大图。或者在只是用大图时，去延迟加载。
图片预加载
简单理解：就是在使用该图片资源前，先加载到本地来，真正到使用时，直接从本地请求数据就行了。
图片预加载，是指在一些需要展示大量图片的网站，将图片提前加载到本地缓存中，从而提升用户体验。
正常一般都是通过 javascript 的 Image 对象设置实例对象的 src 属性实现图片的预加载。
const image = new Image();
image.src = 'xx.jpg';
图片懒加载
懒加载，也就是延迟加载，是一种网页性能优化的方式，像展示瀑布流的时候，我们都会选择使用懒加载的方式。毕竟一次性加载过多图片会导致JS解析变慢，页面会加载过久。
就是当访问一个页面的时候，只加载页面可视范围内的图片，当滚动使其它图片出现在浏览器的可视区域内时，才加载这部分图片。
实现方法也是有多种：
1.在代码中，就是暂时不设置图片的图片src属性，先把路径写在data-src里面，只有当图片出现到了可视区域再将data-src的值赋给src。
2.可以在CSS的background-image来加载图片，而标签中可以使用类名控制是否使用当前样式，就和控制显示隐藏一样，来达到延迟加载的目的。
3.如今原生都是支持loading属性，可以设置lazy来进行延迟加载。
ps: data-src是自定义属性，也可以取其它名字
响应式加载
响应式图片就是在不同分辨率的设备上显示不同尺寸的图片，优点是浏览器能够根据屏幕大小自动加载合适的图片。
常用的是通过CSS的 @media 实现
@media screen and (min-width: 768px) {
img {
background-image: url(1.jpg);
}
}
@media screen and (max-width: 767px) {
img {
background-image: url(2.jpg);
}
}
通过 picture 实现
<picture>
<source srcset="1.jpg" media="(min-width: 768px)">
<source srcset="2.jpg" media="(max-width: 767px)">
<img src="2.jpg" />
</picture>
picture必须要写img，对picture的操作最后都是在img上。另外使用source，还可以对图片格式做一些兼容处理。
避免src为空
img标签的src属性在为空字符串时，仍会发起一个HTTP请求，所以要避免这种情况，我看可以不加这个属性，但不要让它为空。
ps：除了在HTML中，在JS设置Image对象的src为空也是一样的。
雪碧图
简单说就是通过将多个小图标拼接成一个大图，通过减少HTTP请求来达到优化的目的。
主要就是用于小图标的展示。
在HTTP 1.1协议下，同源域名请求资源的时候有最大并发限制，chrome为6个（firefox是8个），就时发送请求超过这个值，就需要分成多次并发，这就影响到页面加载的性能。
如果你把这些图片合并为一张大图片，那么只用一次请求即可。而且多张图片拼在一块后，总体积会比之前所有图片的体积之和小。减少服务器压力，减少并发，减少请求次数。
iconfont
雪碧图是很多网站会用到的一种技术，但是是有缺点的：高清屏会模糊，无法动态变化如反色。而使用图标字体可以完美解决上述问题，同时兼容性好，生成的文件小等优点。
字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。
不论是压缩后的图片，还是雪碧图，终归还是图片，只要是图片，就还是会占用大量网络传输资源。
图片能做的很多事情，矢量图都能作，而且它只是往HTML里插入字符和CSS样式而已，和图片请求比起来，在网络传输资源的占用上它们完全不在一个数量级，如果你的项目里有大量的小图标，就用矢量图吧。
中文（字体图表），现在比较流行的一种用法。使用字体图表有几种好处
-
矢量
-
轻量
-
易修改
-
不占用图片资源请求。
favicon.ico
这个就是网站头像，可以代表这个网站，就像我们的照片就代表我们个人一样。
favicon.ico是有两种设置方式：
1.存放在根目录下，不论页面设置与否，浏览器都会请求这个文件。
2.在link标签加入的，位置和名称就可以任意给了。这种方式针对的也是单独页面的。
所以如果是放在根目录的，就要确保这个图标存在，避免404的情况。
当然格式也不是必须是ico，png，jpg也都是可以的。
base64
网页中的图片都是需要请求下载的，这样就会向服务器发送请求，而使用base64是一种编码方式，浏览器会去自动解析该编码，就可以省去向服务器发送请求的过程，会和HTML一起下载。base64是使用Data URI scheme将图片嵌入HTML或者CSS中。
<img src="data:image/jpeg;base64,/9j/4AA">
<img src="data:文件类型;编码方式,编码内容">
一般适用于比较小、色彩层次单一的图片，如果图片复杂较大，就不合适使用了，这样编码后代码量会特别大，与所节省的请求次数相比，文件大小增加带来的消耗会更多。
在工程化中可以在webpack设置url-loader进行图片转化base64。
CSS画图
一些简单的展示内容可以用CSS达成，而不用UI再去提供图片，比如三角形等，这样效果会更好。
还有就是在不同状态的展示，如圆角，渐变，阴影等，就没必要准备多张图，只需要CSS将一张图像处理为所需的不同效果即可。
在图像上显示文字也是如此，可以通过代码进行添加，而不是使用带文字的图像。
缺点可能就是一些图案可能复杂度过高，开发成本就会变大，这个选择就需要开发者自己去评估了。
渐进式图片
渐进式图片的意思是在高画质图像加载完之前会先显示低画质版本。低画质版本由于画质低、压缩率高，尺寸很小，加载很快。在两者之间我们也可以根据需要显示不同画质的版本。
渐进式图片可以让用户产生图片加载变快的印象。用户不再盯着一片空白区域等待图片加载，而能看到图像变得越来越清晰，这样对用户体验也是友好的。
骨架屏也是这样的，就是先展示一个整体页面结构的图（从优化角度考虑，这里也可以用代码实现），再展示内容。
图片加载失败
图片也是资源请求过来的，就会存在加载失败的可能，所以开发者也需要考虑这种情况的处理措施。当无法加载出来时，使用其他标签进行替换展示，再次点击图片进行重新加载，或者就展示一个失败的图标之类的。
小结
了解不同格式图片的优劣，可以在展示和图片大小的选择中找到一个合适的文件格式，这是图片优化很关键的开始。
响应式加载，图片分隔以及选择会减小HTTP请求资源的大小，来达到页面加载更快的目的。
避免src为空，雪碧图，iconfont，base64等方法的选择，是在有效的减少HTTP的请求次数。
预加载，懒加载，还有渐进式就是在用户体验上的优化，有效的在更短的时间内让用户看到所展示的页面。
加载失败的处理，就是在整个基础上的交互体验优化。
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端！！！！！ 欢迎大家来聊，有意向可发送简历到 chen_zhen@dahuatech.com，加入我们，可以一起进步，一起聚餐，一起旅游，让我们从世界村的小伙伴变成大华村的小伙伴。
