前端在开发的时候如何选择合适格式的图片？

Question

看了网上很多文章，基本都是13 14 15年的介绍。那么在2017年的如今，各位前辈在开发的时候又是如何选择图片格式的呢？基于哪些考量呢？

Answer 1

能不PNG就不PNG 不过我自己有PNG压缩 图片可以压得很小
一般是用JPG Web格式

Answer 2

大图png或jpg,移动端压缩一下最好,图标可以用svg

Answer 3

大前提肯定是设计师给啥就用啥，小前提是应付设计只给psd/ai的情况时，需要知道个大概齐。

---

• 位图风格的图片（非规则色块/渐变）主用JPG

• 矢量风格的（没有很多细节/非实拍）主用PNG

• 不带渐变的矢量风格可以试试PNG8，带有透明渐变的要上PNG32，其余的PNG24就可以

• 动图GIF，如果不准备上JPG/PNG逐帧方案的话；其余任何情况不考虑GIF

• 如果有矢量源文件的话可以考虑SVG，前提是技术上准备好+知道怎么准确导出和压缩

• APP可以考虑WebP，Web还是算了

• 可以试试对象存储的图片转换功能

• 所有图片输出前过遍压缩。不要迷信TinyPNG，支持轻度有损模式的PNG压缩软件就可以达到那个效果

Answer 4

我们这边的情况是web用png，app用webp

Answer 5

设计师给什么就用什么。 png 太大叫他换 jpg 。没了。

Answer 6

一般都是png24

png8，好像会在锯齿和透明度的问题上比较严重。除非图片是在太大，在清晰度可接受的范围内，压缩一下用用而已。

题主可以说说看过的文章，都有哪些考量呢？可以有针对性的讨论一下。

Answer 7

我们大图用jpg，记得压缩；
小图比如图标，以及需要透明色的，用png，记得压缩；
png会压缩到png8，其实png8作为显示完全足够了，比如丢到tinypng，你会发现几乎没什么图像损失。
另外app可以考虑用谷歌的webp，我们web端这边考量了之后发现，兼容性不好，还是不用了。关键是不是所有图的webp都比png8小。
再次强调，记得压缩，尤其是手机端。