有许多可以在网页上使用的图像格式。 一些常见的例子是GIF ， JPG和PNG 。 SVG文件通常也在今天的网站上使用，为网页设计者提供了另一种在线图像选项。
GIF图像
将GIF文件用于具有少量固定数量颜色的图像。 GIF文件总是减少到不超过256种独特的颜色。 GIF文件的压缩算法不如JPG文件复杂，但在平面彩色图像和文本上使用时，会产生非常小的文件大小 。
GIF格式不适合照片图像或渐变色的图像。 由于GIF格式的颜色数量有限，因此在保存为GIF文件时，渐变和照片最终会出现条纹和像素化。
简而言之，您只会将GIF用于仅有几种颜色的简单图像，但您也可以使用PNG（稍后会介绍更多）。
JPG图片
使用JPG图像拍摄具有数百万种颜色的照片和其他图像。 它使用了一种复杂的压缩算法，它允许您通过丢失一些图像质量来创建较小的图形。 这被称为“有损”压缩，因为当压缩图像时某些图像信息会丢失。
JPG格式不适用于带有文本的图像，纯色大块，以及边缘清晰的简单形状。 这是因为当图像被压缩时，文本，颜色或线条可能会模糊，导致图像不如使用其他格式保存的图像。
JPG图像最适用于拥有大量自然色彩的照片和图像。
PNG图像
PNG格式是为了替代GIF格式而开发的，因为GIF格式似乎要收取专利使用费。 PNG图形比GIF图像具有更好的压缩率，导致图像比保存为GIF的同一文件更小。 PNG文件提供了alpha透明度，这意味着您可以拥有完全透明的图像区域，甚至可以使用一系列alpha透明度。 例如，阴影使用一系列透明度效果，并且适用于PNG（或者您可能只是使用CSS阴影结束我们）。
像GIF这样的PNG图像不适合拍摄照片。 可以解决影响使用真彩色保存为GIF文件的照片的条带问题，但这可能会导致非常大的图像。 旧的手机和功能手机也不支持PNG图像。
我们对任何需要透明度的文件使用PNG。 我们还使用PNG-8来处理任何适合作为GIF的文件，而不是使用此PNG格式。
SVG图像
SVG代表可缩放矢量图形。 与在JPG，GIF和PNG中找到的基于栅格的格式不同，这些文件使用矢量来创建非常小的文件，这些文件可以以任意大小进行渲染，而不会增加文件大小的增加。 它们是为图标甚至徽标等插图而创建的。
为Web传送准备图像
无论您使用哪种图片格式，并且您的网站一定会在其所有网页中使用多种不同的格式，您需要确保该网站上的所有图片都准备好进行网页传送 。 太大的图像会导致网站运行缓慢并影响整体性能。 为了解决这个问题， 必须对这些图像进行优化 ，以便在质量水平上找到高质量和最低文件大小之间的平衡。
选择正确的图像格式是战斗的一部分，但同时也确保您准备好这些文件是这一重要网页传送过程的下一步。
Jennifer Krynin的原创文章。 由Jeremy Girard编辑。