【我不熟悉的css】04. jpg、png 合理使用图片格式

每日鸡汤：最大的退路就是靠自己

目录

前言

一、各种格式对比

1. gif

2. svg图片

3. png

4. jpg

二、压缩图片

1. tinypng

总结

---

前言

各种图片格式的区别我们都多少背诵过，但是我在实际应用中总是想不到！！

事情是这样的，有一个项目中，几个图片200kb左右，有点大，所以要让我压缩一下。图片是png格式的，我无论我怎么压缩，都少不了多少。然后同事说，可以改成jpg的，这样可以压缩得更小，果然！

让我们来整理一下，这里面会用到的知识点吧！

---

一、各种格式对比

1. gif

无损压缩、支持8 bit彩色、支持单一透明色（这个点，我至今开发过程中没用到过）、支持动图

我相信很多人和从前的我一样，对gif这个格式的印象，停留在微信表情包，以为gif都是能动的。其实不然，它作为一种图片格式，自然能支持静态图片！！（如果你不这么以为，当我没说）

作为表情包的格式，显然他的特点还有

1. 多用于网页中
2. 图片比较小
3. 可以动

应用实例：这个是我遇到的，觉得有必要记录的一个应用场景

在富文本编辑器中，需要在光标所在位置加入loading的状态，类似三个点的那种，要求：

1. 不影响编辑器的内容
2. 是一个加载中的动态的效果

解决办法：

1. 在编辑器内容后面使用after伪元素，这样不影响编辑器内容
2. 给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不支持透明色，这点很重要

适用于对清晰度要求低的场景。

还是我今天遇到的问题，一个主页的背景图，对清晰度的要求没有那么高，所以我们完全可以使用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!https://tinypng.com/

---

总结

总之，我们需要把平时积累的知识应用到项目开发过程中，你只背诵每个图片的格式的特性，但是开发过程中想不到也白搭，共勉！