progessive image

[dlrandy]

https://www.hostinger.com/tutorials/website/improving-website-performance-using-progressive-jpeg-images

https://riot-optimizer.com/
https://imagecompressor.com/

[dlrandy]

JPEG适合多种不同的色彩，放射，以及纹理（JPEG适合多种不同的色彩，放射，以及纹理（相片 摄影）；png适合清晰的线条和平滑的颜色文本区域分割明显的；

同等质量的图片，png可能要比jpeg大很多

JPEG的压缩算法
将相似的像素进行分组，不同物体之间的线条尽量模糊

jpeg可以无损压缩到一个比较小的size；但是png压缩的小的话，图片的质量可能很次

只有png支持背景透明

icon font的一些缺点：

1. 干扰语义，屏幕阅读器会读出来
2. 高分辨率显示的时候，可能会模糊
   3.如果font下载失败，可能会出现不好的风格
   4,多颜色的icon不好支持

svg可以替换icon：

1. svg也可以有精灵图，使用工具svg-sprite iconMoon，
   但是svg sprite会需要用到css mask和filter，浏览器的支持程度不是很好
   2.svg的size一般会比icon大
   3.svg是标记语言
   4.浏览器支持率也很好
   5.svg的语义也很好
   缺点就是
   因为是标记语言可能会恶意注入的安全问题