【我不熟悉的css】04. jpg、png 合理使用图片格式
每日鸡汤：最大的退路就是靠自己
目录
前言
一、各种格式对比
1. gif
2. svg图片
3. png
4. jpg
二、压缩图片
1. tinypng
总结
前言
各种图片格式的区别我们都多少背诵过，但是我在实际应用中总是想不到！！
事情是这样的，有一个项目中，几个图片200kb左右，有点大，所以要让我压缩一下。图片是png格式的，我无论我怎么压缩，都少不了多少。然后同事说，可以改成jpg的，这样可以压缩得更小，果然！
让我们来整理一下，这里面会用到的知识点吧！
一、各种格式对比
1. gif
无损压缩、支持8 bit彩色、支持单一透明色（这个点，我至今开发过程中没用到过）、支持动图
我相信很多人和从前的我一样，对gif这个格式的印象，停留在微信表情包，以为gif都是能动的。其实不然，它作为一种图片格式，自然能支持静态图片！！（如果你不这么以为，当我没说）
作为表情包的格式，显然他的特点还有
- 多用于网页中
- 图片比较小
- 可以动
应用实例：这个是我遇到的，觉得有必要记录的一个应用场景
在富文本编辑器中，需要在光标所在位置加入loading的状态，类似三个点的那种，要求：
- 不影响编辑器的内容
- 是一个加载中的动态的效果
解决办法：
- 在编辑器内容后面使用after伪元素，这样不影响编辑器内容
- 给after伪元素增加一个背景图片（gif类型的动图）
2. svg图片
矢量图、不失真、可以手懂编码（可以去看我的这篇文章）
【我不熟悉的css 】02. 手动画一个svg图片_我有一棵树的博客-CSDN博客我不熟悉的csshttps://blog.csdn.net/qq_17335549/article/details/126603138
适用于雪碧图icon。svg图片一般用来做雪碧图icon，为了方便起见，每个项目都会增加雪碧图的功能，方便处理各种颜色、字号不同的小icon图片
3. png
无损压缩、因为是无损压缩所以一个内容丰富的图，如果用png格式会很大
适用于小图标。鉴于他的文件会很大，所以一半只有小图会用到png。比如网站的logo， 要保证清晰度（无损）同时logo不会很大，就很适合png图片。
在我今天遇到的这个项目中，我用png做了一个主页的整个背景图，很显然，不合理！！而且我无论怎么压缩都是200多kb，这也是因为png的格式是无损压缩的！现在记住了吧！！
4. jpg
有损压缩、不支持动画、不支持透明色
适用于对清晰度要求低的场景。
还是我今天遇到的问题，一个主页的背景图，对清晰度的要求没有那么高，所以我们完全可以使用jpg的格式，200kb的png图片，我使用jpg导出并压缩之后，仅剩30kb。
二、压缩图片
1. tinypng
这是一个很好用的压缩png、jpg、webp、jpeg图片的网站
TinyPNG – Compress WebP, PNG and JPEG images intelligentlyMake your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!
总结
总之，我们需要把平时积累的知识应用到项目开发过程中，你只背诵每个图片的格式的特性，但是开发过程中想不到也白搭，共勉！