移动网站，哪种图像类型最好

Question

很多用户在手机上打开我的网站

告诉我哪种图片类型会在移动设备中快速加载，

jpg，gif，png，

哪一个最好？

Answer 1

没有单一的“最佳”图像类型。加载最快的图像是最小的图像。但是如果您的图像失真且无法识别，快速加载对您没有好处。

根据您尝试渲染的图像类型选择图像格式：

• 当你考虑到相对于文件大小的感知图像质量时，99％的时候JPEG是最好的照片;但JPEG的有损压缩算法依赖于噪声的存在（大量的软/微妙的颜色过渡）以及源图像中缺少锐利的线条/边缘以获得最佳效果。 永远不要将JPEG用于栅格化文本！
• PNG是光栅化图像的最佳选择，包括锐边和平滑/纯色块。基本上，任何时候你需要干净/无损图像（徽标，图标，UI元素，文本等 - 除了照片/绘画之外的任何东西），你都会使用PNG。当您需要Alpha通道/部分透明度时，它也是唯一真正的选项。
• GIF是唯一普遍支持的动画图像格式，但除此之外我会在大多数情况下使用PNG。
• SVG用于矢量图像，但我不确定有多少移动浏览器支持它。

Answer 2

尽可能使用PNG8并限制调色板。尝试只使用尽可能多的颜色而不是更多。

有PNG调整工具可以让你摆脱那个PNG的不必要的块。有关PNG块的更多信息，请参见此处的PNG块规范。

http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html

我在谈论的调整工具可以在这里找到。就我测试它而言，它使用wine在Linux上运行。

http://entropymine.com/jason/tweakpng/

此外，TinySVG是一种非常有趣的格式。 SVG图形允许无损重新缩放，因为它实际上是一个XML文件，你可以用编程方式修改它。

编辑：关于JPEG图形的一个注释。如果文件大小超过10kb，如果它低于10bk则保存为基线。这是JPEG的一个小优化。

Answer 3

从快速阅读开始，jpeg似乎是最佳选择。但是，这取决于您对某些图像可能具有的任何特定需求（即jpeg不执行透明背景等）。

另外，特别是对于移动网站，如果图像经常被用作网站布局的一部分（即按钮等），则使用CSS Sprites是一种很好的做法，因为它减少了要下载的元素数量用户（当然，在权衡时，下载的图像更大）。