此外，SVG 文件是用 XML 编写的，因此可以在文本编辑器中打开和编辑（！）。这意味着它的值可以动态操纵。例如，您可以使用 JavaScript 更改网站上 SVG 图标的颜色，就像更改某些文本一样（即不需要第二个图像），甚至可以为它们设置动画。
总而言之，它们最适合简单的平面形状，例如徽标或图形。
You should be aware of a few key factors...
First, there are two types of compression: Lossless and Lossy.
Lossless means that the image is made smaller, but at no detriment to the quality.
Lossy means the image is made (even) smaller, but at a detriment to the quality. If you saved an image in a Lossy format over and over, the image quality would get progressively worse and worse.
Indexed means that the image can only store a limited number of colours (usually 256), controlled by the author, in something called a Color Map
Direct means that you can store many thousands of colours that have not been directly chosen by the author
BMP - Lossless / Indexed and Direct
This is an old format. It is Lossless (no image data is lost on save) but there's also little to no compression at all, meaning saving as BMP results in VERY large file sizes. It can have palettes of both Indexed and Direct, but that's a small consolation. The file sizes are so unnecessarily large that nobody ever really uses this format.
Good for: Nothing really. There isn't anything BMP excels at, or isn't done better by other formats.
GIF - Lossless / Indexed only
GIF uses lossless compression, meaning that you can save the image over and over and never lose any data. The file sizes are much smaller than BMP, because good compression is actually used, but it can only store an Indexed palette. This means that for most use cases, there can only be a maximum of 256 different colours in the file. That sounds like quite a small amount, and it is.
GIF images can also be animated and have transparency.
Good for: Logos, line drawings, and other simple images that need to be small. Only really used for websites.
JPEG - Lossy / Direct
JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won't notice. As a result it's a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it's bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!
Good for: Photographs. Also, gradients.
PNG-8 - Lossless / Indexed
PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.
Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.
PNG-24 - Lossless / Direct
PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colours, just like JPEG). It's very much like BMP in that regard, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be bigger than JPEGs (for photos), and GIFs/PNG-8s (for logos and graphics), so you still need to consider if you really want to use one.
Even though PNG-24s allow thousands of colours while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about filesize, and want to get the best quality image you can.)
Just like PNG-8, PNG-24 supports alpha-transparency, too.
SVG - Lossless / Vector
A filetype that is currently growing in popularity is SVG, which is different than all the above in that it's a vector file format (the above are all raster). This means that it's actually comprised of lines and curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line. When you zoom in on a raster image, you will see pixels.
For example:
This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes. It also means a small SVG logo can be used at a much larger (bigger) size without degradation in image quality -- something that would require a separate larger (in terms of filesize) file with raster formats.
SVG file sizes are often tiny, even if they're visually very large, which is great. It's worth bearing in mind, however, that it does depend on the complexity of the shapes used. SVGs require more computing power than raster images because mathematical calculations are involved in drawing the curves and lines. If your logo is especially complicated it could slow down a user's computer, and even have a very large file size. It's important that you simplify your vector shapes as much as possible.
Additionally, SVG files are written in XML, and so can be opened and edited in a text editor(!). This means its values can be manipulated on the fly. For example, you could use JavaScript to change the colour of an SVG icon on a website, much like you would some text (ie. no need for a second image), or even animate them.
In all, they are best for simple flat shapes like logos or graphs.
JPEG is not the lightest for all kinds of images(or even most). Corners and straight lines and plain "fills"(blocks of solid color) will appear blurry or have artifacts in them depending on the compression level. It is a lossy format, and works best for photographs where you can't see artifacts clearly. Straight lines(such as in drawings and comics and such) compress very nicely in PNG and it's lossless. GIF should only be used when you want transparency to work in IE6 or you want animation. GIF only supports a 256 color pallete but is also lossless.
So basically here is a way to decide the image format:
GIF if needs animation or transparency that works on IE6(note, PNG transparency works after IE6)
JPEG if the image is a photograph.
PNG if straight lines as in a comic or other drawing or if a wide color range is needed with transparency(and IE6 is not a factor)
And as commented, if you are unsure of what would qualify, try each format with different compression ratios and weigh the quality and size of the picture and choose which one you think is best. I am only giving rules of thumb.
I usually go with PNG, as it seems to have a few advantages over GIF. There used to be patent restrictions on GIF, but those have expired.
GIFs are suitable for sharp-edged line art (such as logos) with a limited number of colors. This takes advantage of the format's lossless compression, which favors flat areas of uniform color with well defined edges (in contrast to JPEG, which favors smooth gradients and softer images).
GIFs can be used for small animations and low-resolution film clips.
In view of the general limitation on the GIF image palette to 256 colors, it is not usually used as a format for digital photography. Digital photographers use image file formats capable of reproducing a greater range of colors, such as TIFF, RAW or the lossy JPEG, which is more suitable for compressing photographs.
The PNG format is a popular alternative to GIF images since it uses better compression techniques and does not have a limit of 256 colors, but PNGs do not support animations. The MNG and APNG formats, both derived from PNG, support animations, but are not widely used.
GIF is limited to 256 colors and do not support real transparency. You should use PNG instead of GIF because it offers better compression and features. PNG is great for small and simple images like logos, icons, etc.
JPEG has better compression with complex images like photos.
This is a nice comparison of various animated image formats.
Finally, whichever be the format, make sure to optimize it - There are tools for each format (eg SVGO, Guetzli, OptiPNG etc) and can save considerable bandwidth.
There is a hack that can be done to use GIF images to show true color. One can prepare a GIF animation with 256 color paletted frames with 0 frame delay and set the animation to be shown only once. So, all frames could be shown at the same time. At the end, a true colored GIF image is rendered.
Many software is capable of preparing such GIF images. However, the output file size is larger than a PNG file. It must be used if it is really necessary.
Edit: As @mwfarnley mentioned, there might be hiccups. Still, there are still possible workarounds. One may see a working example here. The final rendered image looks like that:
png has a wider color pallete than gif and gif is properitary while png is not. gif can do animations, what normal-png cannot. png-transparency is only supported by browser roughly more recent than IE6, but there is a Javascript fix for that problem. Both support alpha transparency. In general I would say that you should use png for most webgraphics while using jpeg for photos, screenshots, or similiar because png compression does not work too good on thoose.
GIF based on a palette of 256 colours per image (at least in its basic incarnation). PNG can do "TrueColour", i.e. 16.7 Million colours out of the box. Lossless PNG compresses better than lossless GIFs. GIF can do "binary" transparency (0% opacity or 100% opacity). PNG can handle alpha transparencies.
All in all, if you don't need to use Alpha-transparent images and support IE6, PNG is probably the better choice when you need pixel-perfect images for vector illustrations and such. JPG is unbeatable for photographs.
Here's an updated answer that includes WebP format:
JPEG:
The JPEG file format was created to optimize photos and other images that use complex color ranges.
When saving a JPEG (e.g. in Photoshop) you can set the optimization level you want to achieve from lossless meaning no detail is lost to extremely lossy.
In most cases for web applications, you can set the compression to 75% without much losing details.
When to use JPEG? Anytime you have a photo or a graphic with complex color gradients and you can't use webP.
PNG
PNG is primarily a lossless bitmap image format for HQ computer generated images.
Unlike a JPEG, it can have a transparent layer. When you see a transparent image or graphic on the web it's usually a PNG.
When to use PNG? Anytime you have a computer generated graphic or an image with transparency. PNG is not recommended for regular photos as the file size will generally be significantly larger than the equivalent JPEG or webP.
GIF:
GIF is a 256 color graphic format supporting both images and animations.
Way back, GIFs were often used for simple graphics and then were slowly replaced by JPEG and PNG.
GIF Images: Low file size and low quality. They have almost no colored depth they only have 256 colors to work with. Replace them with SVGs.
Animated GIF: They can become very large very quickly and can potentially create huge performance issues. Replace them with videos. (Twitter for example, converts all animated GIFs that are uploaded into standard video files and then share those video files instead of the animated GIF.)
When to use GIF? For a web application, just don't! Replace GIF images with SVGs; Replace animated GIFs with videos.
SVG
SVG is a web native graphics format describing lines and curves and shapes and allowing the browser to draw the graphics in real time.
SVGs are scalable, meaning the graphic will look good at any size, all the way from tiny to extremely large.
Even CSS can be applied to them.
When to use SVG? Anytime you have a computer generated graphic that may need to be scaled or needs to be responsive - like an icon, a logo or a graph.
WebP
A brand new lossless and lossy image format with transparency that was created specifically for the web.
It aims to be a replacement for JPEG as it provides good compression with the addition of transparency.
WebP is supported by all modern browsers but have zero support in older browsers so using them right now requires a fallback using an older image format.
When to use webP? For images and computer graphics if you know your audience will be using newer browsers. If you need to support older browsers provide fallbacks to either JPEG or PNG.
The main difference is GIF is patented and a bit more widely supported. PNG is an open specification and alpha transparency is not supported in IE6. Support was improved in IE7, but not completely fixed.
As far as file sizes go, GIF has a smaller default color pallet, so they tend to be smaller file sizes at first glance. PNG files have a larger default pallet, however you can shrink their color pallet so that, when you do, they result in a smaller file size than GIF. The issue again is that this feature isn't as supported in Internet Explorer.
Also, because PNGs can support alpha transparency, they're the only option if you want a variation of transparency other than binary transparency.
If you opt for JPEG, and you're dealing with images for a website, you may want to consider the Google Guetzli perceptual encoder, which is freely available. In my experience, for a fixed quality Guetzli produces smaller files than standard JPEG encoding libraries, while maintaining full compatibility with the JPEG standard (so your images will have the same compatibility as common JPEG images).
The only drawback is that Guetzli takes lot of time to encode.. but this is done only once, when you prepare the image for the website, while the benefits remains forever! Smaller images will take less time to download, so your website speed will increase in the everyday use.
GIF has 8 bit (256 color) palette where PNG as upto 24 bit color palette. So, PNG can support more color and of course the algorithm support compression
As pointed out by @aarjithn, that WebP is a codec for storing photographs.
This is also a codec to store animations (animated image sequence). As of 2020, most mainstream browsers has out of the box support for it (compatibility table). Note for WIC a plugin is available.
It has advantages over GIF because it is based on a video codec VP8 and has a broader color range than GIF, where GIF limits to 256 colors it expands it to 224 = 16777216 colors, still saving significant amount of space.
发布评论
评论（14）
您应该注意一些关键因素......
首先，有两种类型的压缩： 无损 和 有损。
还有不同的颜色深度（调色板）：索引颜色和直接颜色。
BMP - 无损/索引和直接
这是一种旧格式。它是无损的（保存时不会丢失图像数据），但也几乎没有压缩，这意味着保存为 BMP 会导致文件大小非常大。它可以同时具有索引和直接调色板，但这只是一个小小的安慰。文件大小太大，以至于没有人真正使用这种格式。
适合：没什么好处。 BMP 没有什么擅长的，也没有其他格式做得更好的。
GIF - 无损/仅索引
GIF 使用无损压缩，这意味着您可以保存一遍又一遍地扫描图像，永远不会丢失任何数据。文件大小比 BMP 小得多，因为实际上使用了良好的压缩，但它只能存储索引调色板。这意味着对于大多数用例，文件中最多只能有 256 种不同的颜色。这听起来像是一个很小的数额，确实如此。
GIF 图像也可以是动画的并且具有透明度。
适合：徽标、线条图和其他需要较小的简单图像。仅真正用于网站。
JPEG - 有损/直接
JPEG 图像旨在使详细的摄影图像尽可能小尽可能去除人眼不会注意到的信息。因此，它是一种有损格式，并且一遍又一遍地保存同一文件将导致随着时间的推移丢失更多数据。它有数千种颜色的调色板，因此非常适合照片，但有损压缩意味着它对徽标和线条图不利：它们不仅看起来模糊，而且与 GIF 相比，此类图像的文件大小也更大！
适合：照片。还有渐变。
PNG-8 - 无损/索引
PNG 是一种较新的格式，而 PNG- 8（PNG 的索引版本）确实是 GIF 的一个很好的替代品。然而遗憾的是，它有一些缺点：首先，它不能像 GIF 那样支持动画（它可以，但似乎只有 Firefox 支持，不像 GIF 动画，每个浏览器都支持）。其次，它对 IE6 等旧版浏览器存在一些支持问题。第三，像Photoshop这样的重要软件对格式的实现很差。 （该死的 Adobe！）PNG-8 只能存储 256 种颜色，就像 GIF 一样。
优点：PNG-8 比 GIF 更好的主要特点是支持 Alpha 透明度。
PNG-24 - 无损/直接
PNG-24 是一种很棒的格式将无损编码与直接颜色（数千种颜色，就像 JPEG 一样）相结合。在这方面，它与 BMP 非常相似，只是 PNG 实际上压缩了图像，因此它会生成更小的文件。不幸的是，PNG-24 文件仍然比 JPEG（用于照片）和 GIF/PNG-8（用于徽标和图形）大，因此您仍然需要考虑是否真的想使用它。
尽管 PNG-24 在压缩的同时允许数千种颜色，但它们并不是要取代 JPEG 图像。保存为 PNG-24 的照片可能比同等的 JPEG 图像至少大 5 倍，而可见质量几乎没有改善。 （当然，如果您不关心文件大小，并且希望获得最佳质量的图像，这可能是理想的结果。）
就像 PNG-8 一样，PNG-24 也支持 alpha 透明度。
SVG - 无损/矢量
目前越来越流行的一种文件类型是 SVG，它与上述所有文件类型的不同之处在于它是 矢量文件格式（以上均为光栅< /a>）。这意味着它实际上由直线和曲线而不是像素组成。当您放大矢量图像时，您仍然会看到一条曲线或一条直线。当您放大光栅图像时，您将看到像素。
例如：
这意味着 SVG 非常适合您希望在 Retina 屏幕上或不同尺寸下保持清晰度的徽标和图标。这也意味着一个小的 SVG 徽标可以在更大的尺寸下使用，而不会降低图像质量——这需要一个单独的更大（就文件大小而言）的光栅格式文件。
SVG 文件大小通常很小，即使它们在视觉上非常大，这很棒。然而，值得记住的是，它确实取决于所使用形状的复杂性。 SVG 比光栅图像需要更多的计算能力，因为绘制曲线和直线时涉及数学计算。如果您的徽标特别复杂，它可能会降低用户计算机的速度，甚至文件大小会非常大。尽可能简化矢量形状非常重要。
此外，SVG 文件是用 XML 编写的，因此可以在文本编辑器中打开和编辑（！）。这意味着它的值可以动态操纵。例如，您可以使用 JavaScript 更改网站上 SVG 图标的颜色，就像更改某些文本一样（即不需要第二个图像），甚至可以为它们设置动画。
总而言之，它们最适合简单的平面形状，例如徽标或图形。
You should be aware of a few key factors...
First, there are two types of compression: Lossless and Lossy.
There are also different colour depths (palettes): Indexed color and Direct color.
BMP - Lossless / Indexed and Direct
This is an old format. It is Lossless (no image data is lost on save) but there's also little to no compression at all, meaning saving as BMP results in VERY large file sizes. It can have palettes of both Indexed and Direct, but that's a small consolation. The file sizes are so unnecessarily large that nobody ever really uses this format.
Good for: Nothing really. There isn't anything BMP excels at, or isn't done better by other formats.
GIF - Lossless / Indexed only
GIF uses lossless compression, meaning that you can save the image over and over and never lose any data. The file sizes are much smaller than BMP, because good compression is actually used, but it can only store an Indexed palette. This means that for most use cases, there can only be a maximum of 256 different colours in the file. That sounds like quite a small amount, and it is.
GIF images can also be animated and have transparency.
Good for: Logos, line drawings, and other simple images that need to be small. Only really used for websites.
JPEG - Lossy / Direct
JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won't notice. As a result it's a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it's bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!
Good for: Photographs. Also, gradients.
PNG-8 - Lossless / Indexed
PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.
Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.
PNG-24 - Lossless / Direct
PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colours, just like JPEG). It's very much like BMP in that regard, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be bigger than JPEGs (for photos), and GIFs/PNG-8s (for logos and graphics), so you still need to consider if you really want to use one.
Even though PNG-24s allow thousands of colours while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about filesize, and want to get the best quality image you can.)
Just like PNG-8, PNG-24 supports alpha-transparency, too.
SVG - Lossless / Vector
A filetype that is currently growing in popularity is SVG, which is different than all the above in that it's a vector file format (the above are all raster). This means that it's actually comprised of lines and curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line. When you zoom in on a raster image, you will see pixels.
For example:
This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes. It also means a small SVG logo can be used at a much larger (bigger) size without degradation in image quality -- something that would require a separate larger (in terms of filesize) file with raster formats.
SVG file sizes are often tiny, even if they're visually very large, which is great. It's worth bearing in mind, however, that it does depend on the complexity of the shapes used. SVGs require more computing power than raster images because mathematical calculations are involved in drawing the curves and lines. If your logo is especially complicated it could slow down a user's computer, and even have a very large file size. It's important that you simplify your vector shapes as much as possible.
Additionally, SVG files are written in XML, and so can be opened and edited in a text editor(!). This means its values can be manipulated on the fly. For example, you could use JavaScript to change the colour of an SVG icon on a website, much like you would some text (ie. no need for a second image), or even animate them.
In all, they are best for simple flat shapes like logos or graphs.
JPEG 并不是所有类型（甚至大多数）图像中最轻的。根据压缩级别，角、直线和纯“填充”（纯色块）将显得模糊或有伪影。它是一种有损格式，最适合无法清晰看到伪影的照片。直线（例如绘图和漫画等）在 PNG 中压缩得非常好，而且是无损的。仅当您希望在 IE6 中发挥透明度或需要动画时才应使用 GIF。 GIF 仅支持 256 调色板，但也是无损的。
所以基本上这里有一种确定图像格式的方法：
并且如评论所述，如果您不确定什么符合条件，请尝试具有不同压缩比的每种格式和权衡图片的质量和尺寸，然后选择您认为最好的一张。我只是给出经验法则。
JPEG is not the lightest for all kinds of images(or even most). Corners and straight lines and plain "fills"(blocks of solid color) will appear blurry or have artifacts in them depending on the compression level. It is a lossy format, and works best for photographs where you can't see artifacts clearly. Straight lines(such as in drawings and comics and such) compress very nicely in PNG and it's lossless. GIF should only be used when you want transparency to work in IE6 or you want animation. GIF only supports a 256 color pallete but is also lossless.
So basically here is a way to decide the image format:
And as commented, if you are unsure of what would qualify, try each format with different compression ratios and weigh the quality and size of the picture and choose which one you think is best. I am only giving rules of thumb.
我通常选择 PNG，因为它似乎比 GIF 有一些优势。 GIF 曾经有专利限制，但现在已经过期。
GIF 适用于颜色数量有限的锐边线条艺术（例如徽标）。这利用了格式的无损压缩，有利于颜色均匀且边缘清晰的平坦区域（与 JPEG 相比，JPEG 有利于平滑的渐变和更柔和的图像）。
GIF 可用于小型动画和低分辨率电影剪辑。
鉴于 GIF 图像调色板一般限制为 256 色，因此它通常不用作数码摄影的格式。数码摄影师使用能够再现更大范围颜色的图像文件格式，例如 TIFF、RAW 或有损 JPEG，它们更适合压缩照片。
PNG 格式是 GIF 图像的流行替代品，因为它使用更好的压缩技术并且没有 256 色的限制，但 PNG 不支持动画。 MNG 和 APNG 格式均源自 PNG，支持动画，但应用并不广泛。
I usually go with PNG, as it seems to have a few advantages over GIF. There used to be patent restrictions on GIF, but those have expired.
GIFs are suitable for sharp-edged line art (such as logos) with a limited number of colors. This takes advantage of the format's lossless compression, which favors flat areas of uniform color with well defined edges (in contrast to JPEG, which favors smooth gradients and softer images).
GIFs can be used for small animations and low-resolution film clips.
In view of the general limitation on the GIF image palette to 256 colors, it is not usually used as a format for digital photography. Digital photographers use image file formats capable of reproducing a greater range of colors, such as TIFF, RAW or the lossy JPEG, which is more suitable for compressing photographs.
The PNG format is a popular alternative to GIF images since it uses better compression techniques and does not have a limit of 256 colors, but PNGs do not support animations. The MNG and APNG formats, both derived from PNG, support animations, but are not widely used.
JPEG 在锐边等方面的质量较差，因此它不适合大多数网页图形。它擅长拍照。
与 GIF 相比，PNG 提供更好的压缩、更大的调色板和更多功能，包括透明度。而且是无损的。
JPEG will have poor quality around sharp edges etc. and for this reason it is unsuitable for most web graphics. It excels at photographs.
Compared to GIF, PNG offers better compression, larger pallette and more features, including transparency. And it is lossless.
GIF 仅限于 256 色，并且不支持真正的透明度。您应该使用 PNG 而不是 GIF，因为它提供更好的压缩和功能。 PNG 非常适合小型且简单的图像，如徽标、图标等。JPEG
对于照片等复杂图像具有更好的压缩效果。
GIF is limited to 256 colors and do not support real transparency. You should use PNG instead of GIF because it offers better compression and features. PNG is great for small and simple images like logos, icons, etc.
JPEG has better compression with complex images like photos.
截至 2018 年，我们推出了多种新格式、对以前格式的更好支持以及使用视频代替图像的一些巧妙技巧。
对于照片
jpg- 仍然是最广泛支持的图像格式。webp- 来自 Google 的新格式。潜力很大，但浏览器支持不是很好。对于图标和图形
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 等），并且可以节省大量带宽。
As of 2018, we have several new formats, better support for previous formats and some clever hacks of using videos instead of images.
For photographs
jpg- still the most widely supported image format.webp- New format from google. Good potential, though browser support is not great.For Icons and graphics
svg- whenever possible. It scales well in retina screens, editable in text editors and customisable via JS/CSS if loaded in DOM.png- if it involves raster graphics (ie when created in photoshop). Supports transparency which is very essential in this use-case.For Animations
svg- plus css animations for vector graphics. All advantages of svg + power of css animations.gif- still the most widely supported animated image format.mp4- if animated images are actually short video clips. Twitter / Whatsapp converts gifs to mp4.apng- decent browser support (i.e. no IE, Edge), but creating it is not as straightforward as gifs.webp- close to using mp4. Poor supportThis is a nice comparison of various animated image formats.
Finally, whichever be the format, make sure to optimize it - There are tools for each format (eg SVGO, Guetzli, OptiPNG etc) and can save considerable bandwidth.
有一个技巧可以使用 GIF 图像来显示真实颜色。可以准备一个具有 256 个调色板帧、0 帧延迟的 GIF 动画，并将动画设置为仅显示一次。因此，所有帧都可以同时显示。最后，渲染出真彩色 GIF 图像。
许多软件都能够准备此类 GIF 图像。但是，输出文件大小比 PNG 文件大。如果确实有必要的话就必须使用。
编辑：正如@mwfarnley提到的，可能会出现一些问题。尽管如此，仍然有可能的解决方法。人们可以在此处看到一个工作示例。最终渲染的图像如下所示：
full-color-gif-image
There is a hack that can be done to use GIF images to show true color. One can prepare a GIF animation with 256 color paletted frames with 0 frame delay and set the animation to be shown only once. So, all frames could be shown at the same time. At the end, a true colored GIF image is rendered.
Many software is capable of preparing such GIF images. However, the output file size is larger than a PNG file. It must be used if it is really necessary.
Edit: As @mwfarnley mentioned, there might be hiccups. Still, there are still possible workarounds. One may see a working example here. The final rendered image looks like that:
full-color-gif-image
png 比 gif 具有更宽的调色板，并且 gif 是专有的，而 png 则不是。 gif 可以做动画，而普通-png 则不能。 png-transparency 仅受比 IE6 更新的浏览器支持，但有一个 Javascript 修复了该问题。两者都支持 Alpha 透明度。
一般来说，我会说你应该对大多数网页图形使用 png，而对照片、屏幕截图或类似图像使用 jpeg，因为 png 压缩在这些图像上效果不太好。
png has a wider color pallete than gif and gif is properitary while png is not. gif can do animations, what normal-png cannot. png-transparency is only supported by browser roughly more recent than IE6, but there is a Javascript fix for that problem. Both support alpha transparency.
In general I would say that you should use png for most webgraphics while using jpeg for photos, screenshots, or similiar because png compression does not work too good on thoose.
GIF 基于每个图像 256 种颜色的调色板（至少在其基本版本中）。 PNG 可以实现“TrueColour”，即开箱即用的 1670 万种颜色。无损 PNG 的压缩效果比无损 GIF 更好。 GIF 可以实现“二元”透明度（0% 不透明度或 100% 不透明度）。 PNG 可以处理 Alpha 透明度。
总而言之，如果您不需要使用 Alpha 透明图像并支持 IE6，那么当您需要像素完美的图像用于矢量插图等时，PNG 可能是更好的选择。 JPG 对于照片来说是无与伦比的。
GIF based on a palette of 256 colours per image (at least in its basic incarnation). PNG can do "TrueColour", i.e. 16.7 Million colours out of the box. Lossless PNG compresses better than lossless GIFs. GIF can do "binary" transparency (0% opacity or 100% opacity). PNG can handle alpha transparencies.
All in all, if you don't need to use Alpha-transparent images and support IE6, PNG is probably the better choice when you need pixel-perfect images for vector illustrations and such. JPG is unbeatable for photographs.
以下是包含 WebP 格式的更新答案：
JPEG：
使用复杂的颜色范围。
75%，没有太多细节丢失。
PNG
GIF：
SVG
WebP
Here's an updated answer that includes WebP format:
JPEG:
that use complex color ranges.
75% without much losing details.
PNG
GIF:
SVG
WebP
主要区别是 GIF 已获得专利并且得到更广泛的支持。 PNG 是开放规范，IE6 不支持 alpha 透明度。 IE7 中的支持得到了改进，但尚未完全修复。
就文件大小而言，GIF 的默认调色板较小，因此乍一看它们的文件大小往往较小。 PNG 文件具有较大的默认调色板，但是您可以缩小其颜色调色板，这样，当您这样做时，它们会产生比 GIF 更小的文件大小。问题又是 Internet Explorer 不支持此功能。
此外，由于 PNG 可以支持 Alpha 透明度，因此如果您想要除二进制透明度之外的其他透明度变化，它们是唯一的选择。
The main difference is GIF is patented and a bit more widely supported. PNG is an open specification and alpha transparency is not supported in IE6. Support was improved in IE7, but not completely fixed.
As far as file sizes go, GIF has a smaller default color pallet, so they tend to be smaller file sizes at first glance. PNG files have a larger default pallet, however you can shrink their color pallet so that, when you do, they result in a smaller file size than GIF. The issue again is that this feature isn't as supported in Internet Explorer.
Also, because PNGs can support alpha transparency, they're the only option if you want a variation of transparency other than binary transparency.
如果您选择 JPEG，并且要处理网站的图像，则可能需要考虑 Google Guetzli< /a> 感知编码器，免费提供。根据我的经验，对于固定质量，Guetzli 生成的文件比标准 JPEG 编码库更小，同时保持与 JPEG 标准的完全兼容性（因此您的图像将具有与常见 JPEG 图像相同的兼容性）。
唯一的缺点是 Guetzli 需要很多时间进行编码..但这仅在您为网站准备图像时完成一次，而好处永远存在！较小的图像下载所需的时间较少，因此您的网站速度在日常使用中会提高。
If you opt for JPEG, and you're dealing with images for a website, you may want to consider the Google Guetzli perceptual encoder, which is freely available. In my experience, for a fixed quality Guetzli produces smaller files than standard JPEG encoding libraries, while maintaining full compatibility with the JPEG standard (so your images will have the same compatibility as common JPEG images).
The only drawback is that Guetzli takes lot of time to encode.. but this is done only once, when you prepare the image for the website, while the benefits remains forever! Smaller images will take less time to download, so your website speed will increase in the everyday use.
GIF 有 8 位（256 色）调色板，而 PNG 最多有 24 位调色板。所以，PNG可以支持更多的颜色，当然算法也支持压缩
GIF has 8 bit (256 color) palette where PNG as upto 24 bit color palette. So, PNG can support more color and of course the algorithm support compression
正如 @aarjithn 所指出的，WebP 是一种用于存储照片的编解码器。
这也是一个存储动画（动画图像序列）的编解码器。截至 2020 年，大多数主流浏览器都对其提供开箱即用的支持（兼容性表）。
WIC 插件 可用。
它比 GIF 有优势，因为它基于视频编解码器 VP8 并且具有比 GIF 更广泛的颜色范围，其中 GIF 限制为 256 种颜色，它将其扩展到 224 = 16777216 种颜色，仍然节省了大量空间。
As pointed out by @aarjithn, that WebP is a codec for storing photographs.
This is also a codec to store animations (animated image sequence). As of 2020, most mainstream browsers has out of the box support for it (compatibility table).
Note for WIC a plugin is available.
It has advantages over GIF because it is based on a video codec VP8 and has a broader color range than GIF, where GIF limits to 256 colors it expands it to 224 = 16777216 colors, still saving significant amount of space.