我们大多数人都知道，在网站建设过程，优化 HTML、CSS、JavaScript 或其他任何东西都是好的，但如果你不优化图像，所有其他的努力都将是徒劳的。网站图片是使用 PNG、JPG 还是 SVG格式？这取决您的选择，本文介绍这几种图像格式的优缺点，供您参考。

您需要多少种颜色？

PNG-8 将限制为 256 种颜色，这在大多数情况下已经足够了，但可能会出现颜色“带状”。如果您需要更多颜色或想要避免条带，请考虑使用 PNG 24 或 32，但要注意文件大小会大幅增加。JPG 可以包含数百万种颜色并具有更小的文件大小，它最适合没有清晰线条或文本的图片。对于带有清晰线条或文本（例如图形）的图片，请坚持使用 PNG 并在使用的颜色数量上做出妥协。用 SVG 替换 PNG 以获得简单的线条图、徽标和图标。

您需要透明度吗？

JPG 不提供此功能（尽管有些人想出了巧妙的技巧将 SVG 与 JPG 合并以制作透明的 JPG ）。PNG 和 SVG 支持透明度。PNG-24 可能会提供比 PNG-8 更好的图像质量，诱使您创建一个大文件。默认情况下，SVG 是透明的，并且文件大小可以小很多。

您需要整个图像清晰吗？

JPG 是有损的，这意味着它们在压缩或保存时会降低质量，而且它们是基于光栅的，这意味着它们不能很好地缩放。它们最适合用于具有多种颜色的更复杂的照片，而不是用于每一行的清晰度都很重要的。比如，插图、徽标、网络漫画等。另一个好处是您可以有选择地模糊 JPG 的某些部分，使更重要的部分变得清晰，但可以减少文件大小。PNG 是无损的，因此在压缩或保存时不会降低质量。当您需要清晰的线条或文本时，这使它们成为 JPG 的一个很好的替代品。但是，它们的尺寸可能很大并且也是基于栅格的，因此无法很好地缩放。SVG 是基于矢量的，缩放效果非常好，在任何尺寸下都保持清晰，但不适合照片或更复杂的图形。

您要针对哪些设备进行优化？

在视网膜屏幕上，JPG 很少看起来不错，而 PNG 则难以缩放。SVG 看起来不错并且可以缩放。在所有浏览器中对JPG，PNG和SVG的支持都很好，并且有一些变通方法可用于较旧的浏览器（例如IE6至IE10）。有多种方法可以提供备份图像，以帮助浏览器根据屏幕尺寸和分辨率选择要呈现的图像格式和尺寸。

TIPS:视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，是由苹果公司在2010年iPhone 4发布会上首次推出的营销术语。视网膜（Retina）屏幕是苹果公司"发明"的一个营销术语。并在部分移动产品使用。苹果这个术语用在iphone 4手机上，自此一直沿用，它将960×640的像素压缩到一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸（ppi），称之为“视网膜屏幕”。

使用 PNG、JPG 还是 SVG格式？

JPG — 有损和基于光栅，用于具有大量颜色的照片和图像，它最适合没有清晰线条或文本的图片。他们不会支持透明度，尽管有办法解决这个问题。

PNG — 无损且基于光栅，用于需要清晰线条或文本（但不需要缩放）、需要透明度、颜色很少的图像。有 PNG8、24 和 32 。 研究最适合您的特定情况

SVG — 基于矢量的，用于平面线条图、图标、徽标，可以缩放到任何大小，而文件大小仍然很小。

选择图像格式只是优化网络图像的一步。还有很多很多其他的步骤需要考虑，所以有很多东西要学习。