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

标签 html gif

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

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

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

使用 JPG 会提高性能吗?

这是该图片的 HTML 代码:

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

最佳答案

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

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

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

关于html - 如何改善静态 HTML 网站的加载时间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/673655/

相关文章:

html - 调整 srcset 图像大小的正确方法

javascript - 如何使用 javascript 更改@keyframes 值?

html - 在平移图像背景上放置一个小图像

scripting - FFMPEG 脚本将文件夹中的所有 Webm 文件转换为 Gif,然后删除那些 Webm

html - 如何使用 CSS 网格对齐嵌套 HTML 中的列

javascript - 如何使用 JavaScript 检测 Ctrl+V、Ctrl+C?

javascript - 从服务器端调用 Javascript 函数 C#

javascript - 在加载 iframe 之前显示 loading.gif

html - 加载微调器 gif 图像卡住

javascript - 在 JavaScript 中从 url 中读取图像数据