你正在建立你的第一个网站，你需要一些图片，你做了一些调查，有人说是 “JPG”，还有人说是 “PNG”。你知道GIF是什么，因为它是会动的，但你并不完全确定所有这些文件扩展名是什么意思，或者它对你的网站很重要的原因。真正的区别是什么呢!?hostgator美国服务器商分享GIF vs JPG vs PNG – 你应该使用哪种图像格式?
进入网页设计领域，在为手头的工作选择正确的图像格式时，你需要考虑一个全新的世界。首先，是文件大小。它决定了在主机服务器上占用多少空间，图片需要多长时间加载以及在访问者的数据计划中使用多少数据传输。
然后还有质量问题需要考虑。你想使用 “有损 “格式，即牺牲一些原始图片的细节以获得更小的文件大小;或者使用 “无损 “格式，这种格式具有无以伦比的质量，但也有其自身的缺点;那么有透明背景的图片呢?
如果这些问题在你心中，我们已经为你找到了答案。我亲自钻研了每种格式的技术问题，所以你不必这样做。请继续阅读所有的细节，或者跳到底部，在那里我提供了一个总结。
GIF(图形交换格式)–用于跳舞的婴儿
GIF给我们带来了可爱的猫，跳舞的婴儿以及闪闪发光的额外按钮。
你可以把GIF动画看作是我们现在拥有的复杂的动画用户界面的前奏。它们启发了Flash网站，然后被我们今天看到的高级JavaScript动画所取代。这些跳舞的婴儿让许多人看到了互联网的潜力，虽然说起来很奇怪。推荐阅读：《5 种查找可在网站上使用的免费照片和图像的方法》
它的实际格式是在1987年开发的，相当简单。每张图片有256种颜色，从RGB(红、绿、蓝)光谱中选择。如果你有一个GIF动画，那么每一帧都有自己的调色板。这个系统有助于减少文件大小……相对而言。大分辨率的长GIF动画很容易达到数百兆字节，如果你的数据计划有上限，这可能会有点伤害。
这种格式的限制也意味着它不太适合显示照片。颜色的限制意味着256种色调和阴影必须完成通常由RGB光谱中的1600万种颜色完成的工作。这里有一个例子：
这是我在2017年10月拍的一张驴子的照片 ：
我叫他加里，他对整个事情很冷淡。无论如何，那实际上是一张高质量的JPG图片。这里是同一张照片，但是是GIF格式。
看到它几乎看起来像水彩画了吗?现在，这对动画来说是完全可以的——人们不应该看每一帧的细部，他们应该享受这个动作。
当建立一个网站时，我一般不会使用GIF作为实际用户界面的一部分……过去几年的动画背景困扰着我们所有人。总之，GIF最好作为内容使用，比如在你的博客文章中加入一个GIF来表达你的观点，或者缓和气氛。
JPG(联合摄影专家组)–用于友好的驴子和其他高细节的图像
自从1992年JPG格式发布以来，它一直是在线图像、消费级摄影和任何其他需要在小文件中获得大量细节的使用情况的主力。长期以来，JPG一直占据着主导地位，因为它给你的正是：大量的细节，相对较小的文件大小。
在这个清单上的格式中，JPG是具有大量色彩和细节的照片的最佳选择。它也相当灵活，因为你可以在不同的质量程度上导出JPG图像，这使你可以准确地决定你愿意用多少质量来换取较小的文件大小。
让我们再来看看我们的好朋友，加里。在这里，他是一个JPG图像，质量设置为100(最高值)。该图像 “重 “达633KB。
而现在，让我们把图像质量设置为80。如果你仔细看，细节肯定已经损失了，但不是那么多。即使是在这种最小的细节损失下，图像的大小已经减少到121KB。
在质量水平为50时，图像开始显示出更严重的图像压缩。然而，在文件大小方面的递减回报是显著的。我们只损失了41千字节，总共减少到80千字节。
而在30的质量水平下，这是不值得的。65.4千字节。
你通常想把图像质量值保持在80左右，通常根本不值得低于70。太低的话，你会失去很多细节，而在减少文件大小方面却没有什么可展示的。推荐阅读：《图像SEO的进阶三部曲》
你应该记住，JPG的内置压缩功能往往不适合那些需要平滑、清晰线条的图像，如纯色背景上的文字图像或标志。为了向你展示我的意思，我想展示这个非常简单的图形。
我把质量设置为70，以更容易向你展示我的意思。如果你仔细观察这张图片，你应该看到文本周围的边缘和那个蓝色的形状是模糊的。下面是一个放大的版本：
那么，JPG在网站中的作用是什么?照片，简单明了。想为网站制作一张大的背景照片吗?用JPG。你的产品展示的照片?J用PG。你每年的野营旅行的照片?你知道我想说什么了吧。
PNG(便携式网络图形)–主要用于标识和图标
它的工作方式实际上有点类似于GIF格式的工作方式。事实上，旧的PNG-8变体被限制为256色，但人们几乎不再使用它。
我们最通常使用的格式叫做PNG-24，它支持多达1600万种颜色，这意味着它是一种无损的格式。没有任何细节会丢失。
它有内置的文件压缩功能。JPG通过模糊像素来压缩图像，而PNG不会这样做。这意味着它对于你想要清晰的线条的图像来说是非常好的。请看一下我前面那个非常简单的图形的PNG版本。
这个简单图形的PNG版本比JPG版本大了大约10KB，但对于质量的显著提高来说，这个差别可以忽略不计。然而，这只适用于最简约的图像、纯色和简单的形状。
那张加里的照片的PNG版本重达2.32兆字节，对于这种尺寸的图像来说是非常大的。我没有把它放在这里，因为你可能会发生任何带宽或数据上限限制。
作为奖励，PNG支持透明度，这意味着你可以把一个没有背景的PNG图像叠加在你喜欢的任何类型的背景上。
问题是，PNG并不是第一个支持这一功能的图像格式;GIF图像也可以做到这一点。然而，PNG做得更好。在这次比较中，我取了一个可怕的图形，去掉了白色背景并将图像保存为PNG和GIF格式。然后我把这些图片放在另一个较暗的背景上，向你展示每种格式如何处理透明度。
正如你所看到的，GIF格式所提供的透明度使图形的边缘相当锯齿状。在这里，PNG赢了。
在网站上，PNG通常用于标志、图标和一般非常简单的图形。它们也用于广告，有时也用于非常小的 “缩略图 “大小的图像，在这种情况下，无损格式的额外细节是值得赞赏的。
将一切结合起来
关于这些图像格式，有很多东西需要了解。每一种都有自己的历史和做事的方式。这篇文章中的信息几乎没有触及到表面，每种格式本身就可以很容易地写满一本书或三本书。但是，对于让你的网站启动和运行来说，最好还是保持简单的东西。推荐相关阅读：《网站中图片的优化方法》