html - 如何改善静态 HTML 网站的加载时间？

Question

我们在网站上工作时注意到 GIF 图像 (100kb - 200kb) 加载速度非常慢。

该站点是一个带有 CSS/HTML 的静态站点。

是否有人对为什么图像加载缓慢有任何指示？

使用 JPG 会提高性能吗？

这是该图片的 HTML 代码:

<div><img src="images/mainImg_3.gif">

Answer 1

它们加载缓慢，因为它们很大。 200KB 是一个非常大的图像文件。我不确切知道对网络图像的建议是什么，但将它们保持在 50K 以下是一个很好的主意。

GIF 图像对于摄影图像不是很有效。您应该尝试使用 JPG 和 PNG 等其他格式，看看是否能以较小的文件大小获得相同的质量。您应该能够在保持质量的同时将文件大小缩小很多。

另一个技巧:使用缩略图。保存每个图像的两个版本，一个是另一个的 25% 大小(按分辨率)。如果您的站点访问者想查看更多内容，可以单击缩略图。这将加快加载时间并减少带宽费用。