如何使 PNG 更小 CSS

PNG 格式的图像通常会比 JPEG 或 GIF 格式更大，因此在建立网站时，需要考虑如何使 PNG 图像更小。以下是一些技巧，可帮助您优化 PNG 图像并减小它们的大小。

1. 使用 PNGGauntlet

PNGGauntlet 是一款免费的压缩 PNG 图像的软件。 它可以在不损失质量的情况下压缩 PNG 文件，并减小它们的大小。 它甚至可以自动转换您的 JPEG 图像为 PNG，并将它们压缩成更小的文件。您可以从官方网站 PNGGauntlet.com 下载此软件。

2. 压缩 PNG 图像

使用诸如 TinyPNG 或 Compressor.io 等在线工具可以压缩 PNG 图像，并使它们更小。这些工具会尝试减少 PNG 图像中的颜色数量，从而减小文件大小。

例如：
![Uncompressed PNG](/path/to/image.png)  <!-- 5.9 MB -->
![Compressed PNG](/path/to/compressed-image.png)  <!-- 2.2 MB -->

3. 移除不必要的透明度

在某些情况下，PNG 图像中的透明度可能并不必要。 如果您可以将 PNG 图像中的透明度移除，则可以减少文件大小。

例如：
![Transparent PNG](/path/to/transparent-image.png)  <!-- 3.6 MB -->
![Solid PNG](/path/to/solid-image.png)  <!-- 2.7 MB -->

4. 使用 CSS Sprites

CSS Sprites 是将多个小图标合并成一个PNG文件，以便在网页中同时加载多张图像。这既减小了HTTP请求的数量，又减小了每个图像的文件大小。

#icon-github {
  background-image: url(icons.png);
  background-position: 0 0;
  width: 24px;
  height: 24px;
}

#icon-twitter {
  background-image: url(icons.png);
  background-position: -24px 0;
  width: 24px;
  height: 24px;
}

总结

PNG 图像一般比其它格式的图像大，而且不够常用。 但是，在构建网站时，它们可能很常用。借助这些技巧，你可以将它们变得更小，以便快速加载并占用更少的带宽。

Happy Coding!