前言在目前的web开发过程中，图片的使用是一个重要的功能位图的特点是能够表达颜色的变化和颜色的细微过渡，从而产生逼真的效果效果。缺点是保存时需要记录每个像素点的位置和颜色值，占用存储空间大。位图文件的类型很多，如.bmp、.pcx、.gif、.jpg、.tif、PS的psd等；所记录的几何图形的各种角度、形状等都没有变化，所以无论是放大还是缩小，都不会影响矢量图的清晰度。矢量图形格式也有很多，比如AdobeIllustrator的.AI、.EPS和SVG，AutoCAD的.dwg和dxf，CorelDRAW的.cdr等。色深色深标准通常有以下几种：8-bitcolor，每个像素可以显示的颜色数是2的8次方，即256种颜色。16-bitenhancedcolor，16位色，每个像素可以显示的颜色数是2的16次方，即65536色。24位真彩色，每个像素点能显示的颜色数为24位，即2的24次方，约1680万种颜色。32位真彩色，即在24位真彩色图像的基础上，增加了代表图像透明度信息的Alpha通道。32位真彩不是2的32次方的色数。它实际上超过了1677万种颜色，但它增加了256种灰度级的颜色。为了调用方便，规定为压缩和未压缩的32位彩色图片。有损压缩、无损压缩、无压缩、无压缩图像格式不对图像数据进行压缩，能够准确呈现原始图像。比如BMP格式的图片。有损压缩是指在压缩文件大小的过程中，图片的部分信息丢失，即图片质量下降（即图片模糊），这种丢失是不可逆的。一种常见的有损压缩方法是将相邻的像素按照一定的算法进行合并。压缩算法并不对图片的所有数据进行编码压缩，而是在压缩时去除图片中人眼无法识别的细节。因此，有损压缩可以在同等图像质量的情况下大大减小图像的体积。比如jpg格式的图片就采用了有损压缩。无损压缩在压缩图片的过程中，不会有图片质量的损失。我们可以随时从无损压缩图片中恢复原始信息。压缩算法对图片的所有数据进行编码压缩，可以在保证图片质量的同时减小图片的体积。例如，png和gif使用无损压缩。GIF（GraphicsInterchangeFormat）原意为“图像交换格式”，是一种基于LZW算法连续色调的无损索引颜色压缩格式。优点优秀的压缩算法，在一定程度上保证画质的同时，使画质变小。可以为动画效果插入多个帧。可以设置透明颜色以提供对象出现在背景之上的效果。缺点由于使用8位压缩，最多只能处理256色，所以不适合真彩色（文末附录有说明）图片。PNG无损压缩、索引颜色、透明度、动画PortableNetworkGraphics（简称PNG，英文全称：PortableNetworkGraphics）。PNG可以提供长度比GIF小30%的无损压缩图像文件。PNG支持8位、24位和32位。我们通常称它们为png8、png24和png32。PNG也使用无损压缩格式。其实PNG的发展是因为GIF使用的无损压缩格式的专利问题而诞生的。优点在不失真的情况下尽可能压缩图像文件的大小。丰富的像素支持透明度（alpha通道）。缺点：大文件大小jeg/jpeg有损压缩，颜色直接，适合大图，小图JPEG是一种非常典型的有损压缩图像格式的使用，也就是说用户每次进行JPEG压缩时，一些内容细节图像文件会被永久损坏，尤其是压缩率过高，会使解压后最终恢复的图像质量明显下降。如果你追求高质量的图像，你不应该使用太高的压缩率。BaselineJPEGBaselineJPEG文件以从上到下的扫描方式存储，每行按顺序存储在一个JPEG文件中。当打开这个文件显示它的内容时，数据会按照存储的顺序从上到下逐行显示，直到读取完所有数据，完成整张图片的显示。渐进式jpeg不同于基线扫描。渐进式JPEG文件包含多次扫描，这些扫描按顺序存储在JPEG文件中。在打开文件的过程中，首先会显示出整个图片模糊的轮廓，随着扫描次数的增加，图片会越来越清晰。渐进式图片的好处是用户不用下载图片就可以看到最终图片的轮廓，一定程度上可以提升用户体验（推荐使用瀑布流网站的标准类型）。优点可以支持24bit真彩，一般用于需要连续色调的图像，如色彩丰富的图片、照片等；可以使用可变压缩比来控制文件大小；支持隔行扫描（对于渐进式JPEG文件）；缺点JPEG不适合存储企业标志和线框图。有损压缩会导致图像模糊，选择直接颜色会导致图像文件比GIF大。有损压缩会降低原始图像数据的质量。JPEG图片不支持透明处理，透明图片需要调用PNG渲染。JPEGXR（刚懂）JPEGXR（全称JPEGextendedrange）是一种连续色调的静态图像压缩算法和文件格式，基于微软开发的HDPhoto（以前称为WindowsMediaPhoto），最初由微软开发并支持微软。专有图像格式。它支持有损数据压缩和无损数据压缩，是微软XPS文档的首选图像格式。目前支持的软件包括.NETFramework（3.0或更新版本）、WindowsVista/Windows7、InternetExplorer9、Flashplayer11等。微软希望JPEGXR能够得到广泛采用，但替代JPEG格式仍然是一个挑战。JPEG-XL格式（了解一下）JPEG-XL格式是一种免版税的位图文件格式，支持有损和无损压缩。它旨在超越现有的位图格式并成为它们的通用替代品。JPEG-XL文件格式在2021年才被标准化，编码系统在2022年早些时候得到确认，但自2020年底以来一直没有正式采用就被冻结了。不出意外的话，JPEGXL格式将在Chrome110中被弃用。APNGAPNG(AnimatedPortableNetworkGraphics)，顾名思义，是一种基于PNG格式扩展的动画格式。它增加了对动画图像的支持，并增加了对24位图像和8位Alpha透明度的支持，这意味着动画将具有更好的质量，它是为取代旧的GIF格式而诞生的，但目前还没有被官方认可巴布亚新几内亚组织。这是目前的支持级别，主流浏览器都已经支持了。优点与GIF相比，色彩更丰富。它支持透明度并且向后兼容。PNG支持动画。缺点是生成繁琐，不规范。webpWebP是谷歌开发的一种新的图片格式，WebP同时支持有损和无损压缩，使用直接彩色，位图。在无损压缩的情况下，同等质量的WebP图片文件大小比PNG小26%；在有损压缩的情况下，相同图像精度的WebP图片文件大小比JPEG小25%~34%；WebP图片格式支持图片透明。无损压缩的WebP图像只需要22%的额外文件大小来支持透明度。此时（2022.10），webp的兼容性已经足够了，可以直接使用：优点是一样的，质量更小，压缩后质量变化不大，支持无损图片，而且它支持动画。大，有降级方案）svg无损，矢量图，体积小，不失真，兼容性好SVG是一种定义在XML中的语言，用于描述二维矢量图和矢量图/光栅图形。SVG提供了三种图形对象：矢量图形（例如：由直线和曲线组成的路径）、图像和文本。优点SVG比JPEG和GIF图像更小且更易于压缩。SVG是可扩展的。SVG图像中的文本是可选的，也是可搜索的（非常适合地图）。SVG可以与JavaScript技术一起运行。SVG图形格式支持多种滤镜和特效，可以在不改变图像内容的情况下实现类似于位图格式文本阴影的效果。SVG图形格式可用于动态生成图形。例如，SVG可用于动态生成交互式地图，将它们嵌入网页，并显示给最终用户。缺点SVG复杂度高会拖慢渲染速度，渲染成本比较高，对性能有影响。SVG的学习成本相对较高，因为它是可编程的。avifAVIF由AOMedia（开放媒体联盟）于2019年发布，基于AV1视频编解码器（源自Google的VP9），以及由Netflix驱动的图片格式。如果您经常使用Netflix客户端，那么您已经在使用AVIF。这是当前时间点（2022.11），浏览器的兼容性，比例和2019年的webp几乎持平。目前可用的polyfill：https://www.npmjs.com/package...可以使其兼容性达到以下几个级别：Chrome57+Firefox53+Edge17+Safari11+优点avif，本身是开源的，没有专利费，可以免费使用。目前的压缩率（高于webp）非常高，功能多，图像格式广色域，google，amazon，netflix，microsoft，apple都参与了开发组织，未来广泛的兼容性有保障.目前，一些新产品已经使用了这种图像技术。相信在未来的几年里，这种格式的图片会得到更好的发展HEIF（JustKnow）HEIF是2015年发布的MPEG（MotionPictureExpertsGroup），基于HEVC（H.265）视频编解码器。HEIF功能支持非破坏性的新编辑和动画、音频（Apple的LivePhoto）。HEIF目前在Apple设备上广泛使用，iPhone相机保存的照片已经是HEIF。但是苹果的Safari浏览器不支持，原因应该是它使用的HEVC(H.265)的专利限制。WebP2（了解一下）WebP2是谷歌2021年发布的WebP的继任者，主要目标是使其有损压缩能力达到AVIF，并加入HDR10、快速解码等WebP缺失的功能。它的无损压缩也得到了改进。总结到这里常用图片总结比较新的技术AVIF有损压缩效果最好，无损压缩很差。编码很慢。JPEGXL无损压缩效果最好，有损压缩与AVIF略有不同。编码速度很快。WebP2的无损压缩效果极佳，有损压缩上限已经达到AVIF水平，但下限很低且不稳定。编码很慢。dataurl通过图片的base64编码将一对图片数据编码成一串字符串，使用字符串代替图片地址。图片在下载HTML的同时下载到本地，不再消耗单个http请求图片。当然他也有缺点，不适合中大图片，图片解析会比较消耗性能，而且相比其他图片格式至少要大1/3Lazyloading说到图片的懒加载，这是一个commontopic一种解决方案是：一开始加载图片占位，通过API监听图片位置是否在视口内，远离视口时开始加载图片。这里提到的API可以是IntersectionObserver时间或者使用scroll和resize事件处理下面介绍另外一种解决方案：img的native属性：loading：具体请查看：https://developer.mozilla.org...对于加载的视口距离阈值，目前没有办法修改，chrome会根据当前网络情况设置相应的阈值。对于2020年7月之后的chrome版本，视口距离阈值在4G网络上为1250像素，在3G网络上为2500像素。需要注意的是，我们还需要手动指定图片的宽高，否则可能会看到布局偏移。完整的代码示例如下：这里有一篇文章中的demo：https://mathiasbynens.be/demo...目前兼容性还可以：不支持loading属性的浏览器会忽略它的存在。此属性对他们没有负面影响。使用srcset和sizes属性在支持srcset的用户代理中，当使用w描述符时，src属性被忽略。当媒体条件（最大宽度：600px）匹配时，图像将宽200px，否则为50vw（视图宽度的50%）。
