在构建网站或界面等时，什么时候应该使用特定的图像文件类型?
他们的优点和缺点是什么?
我知道PNG和GIF是无损的，而JPEG是有损的。 但是PNG和GIF的主要区别是什么呢? 为什么我要选择一个而不是另一个呢? 什么是SVG，什么时候应该使用它?
如果你不关心每一个像素，你应该总是使用JPEG，因为它是“最轻”的?
当前回答
截至2018年，我们有了几种新的格式，更好地支持以前的格式，以及一些使用视频代替图像的聪明技巧。
的照片
JPG -仍然是最广泛支持的图像格式。
webp -谷歌的新格式。很好的潜力，尽管浏览器支持不是很好。
图标和图形
SVG——只要可能。它在视网膜屏幕上的伸缩性很好，在文本编辑器中可编辑，如果在DOM中加载，则可通过JS/CSS自定义。
PNG -如果它涉及光栅图形(即在photoshop中创建)。支持透明性，这在这个用例中非常重要。
对于动画
SVG -加上CSS动画矢量图形。svg的所有优点+ css动画的力量。
GIF -仍然是最广泛支持的动画图像格式。
Mp4 -如果动画图像实际上是短视频剪辑。Twitter / Whatsapp将gif转换为mp4。
apng -不错的浏览器支持(即没有IE, Edge)，但创建它不像gif那样简单。
Webp -接近使用mp4。可怜的支持
这是各种动画图像格式的一个很好的比较。
最后，无论哪种格式，都要确保优化它——每种格式都有工具(如SVGO, Guetzli, OptiPNG等)，可以节省大量的带宽。
其他回答
主要的区别是GIF是专利，并且得到了更广泛的支持。PNG是一个开放的规范，在IE6中不支持alpha透明度。IE7中的支持得到了改进，但并没有完全修复。
就文件大小而言，GIF有一个较小的默认颜色托盘，所以乍一看它们往往是较小的文件大小。PNG文件有一个更大的默认托盘，但是你可以缩小他们的颜色托盘，这样当你这样做的时候，他们会导致一个比GIF更小的文件大小。问题又来了，这个特性在Internet Explorer中不受支持。
另外，因为png可以支持alpha透明度，所以如果你想要二进制透明度以外的其他透明度，它们是唯一的选择。
GIF有8位(256色)调色板，而PNG有24位调色板。所以，PNG可以支持更多的颜色，当然算法也支持压缩
JPEG会有较差的质量在尖锐的边缘等，因此它不适合大多数网络图形。它擅长摄影。
与GIF相比，PNG提供了更好的压缩，更大的调色板和更多的功能，包括透明度。而且它是无损的。
我通常使用PNG，因为它似乎比GIF有一些优势。GIF曾经有过专利限制，但现在已经过期了。
动图适用于边缘锐利的线条艺术(如logo)，颜色数量有限。这充分利用了该格式的无损压缩特性，它有利于色彩均匀、边缘清晰的平面区域(与JPEG相反，JPEG有利于平滑的渐变和更柔和的图像)。
动图可以用于小动画和低分辨率的电影剪辑。
鉴于GIF图像调色板的一般限制为256色，它通常不被用作数字摄影的格式。数码摄影师使用的图像文件格式能够再现更大范围的颜色，如TIFF, RAW或有损JPEG，这是更适合压缩照片。
PNG格式是GIF图像的流行替代品，因为它使用了更好的压缩技术，并且没有256色的限制，但PNG不支持动画。MNG和APNG格式都源自PNG，支持动画，但应用并不广泛。
GIF基于每个图像的256色调色板(至少在其基本的化身)。PNG可以做“真彩色”，即1670万种颜色。无损PNG压缩比无损gif更好。GIF可以做“二进制”透明度(0%不透明度或100%不透明度)。PNG可以处理alpha透明。
总而言之，如果你不需要使用alpha透明图像并且支持IE6，当你需要像素完美的图像来制作矢量插图等时，PNG可能是更好的选择。JPG是无与伦比的照片。
