html - 如何减小大图像的文件大小以缩短页面加载时间？

我的网站主页上有以下图片/幻灯片；

图片:

在使用了一些在线 SEO 工具后，我发现它们大大增加了页面加载时间，这显然会对 SEO 性能产生负面影响。

图片必须很大，因为网站使用 Bootstrap 框架并根据屏幕尺寸放大/缩小。

我能做些什么来减少文件大小和/或加载时间吗？

最佳答案

文件类型

优化图像时首先要考虑的也是最简单的事情是文件类型。某些图像文件类型更适合特定图像。例如，JPG 最适合摄影图像。另一方面，PNG 最适合颜色较少的简单图像或使用透明度的图像。 24 位 PNG 最适合包含摄影元素和简单图形的图像。 8 位 PNG 可以进一步减小少于 256 色的图像的文件大小。

Sprite 和预加载器

减少加载时间的一个有用的做法是使用 CSS Sprite ，这是显示一幅较大图像的 CSS 代码。这种技术通常用于按钮上的鼠标悬停状态。例如，使用 sprite，您可以将一张图片的一部分显示为网站上的按钮，并在用户将鼠标悬停在该图片上时将另一张图片显示为该按钮。

虽然 sprite 经常用于交互式菜单和按钮，但它们也可用于显示单个图像文件中的多个站点图像。这将要求浏览器只下载一张图片，而不是三张或四张。

除了 sprite 之外，还可以使用 JavaScript、jQuery、Ajax 或 CSS 预加载图像。预加载图像时，浏览器会下载或“预加载”图像，然后在用户访问它时立即显示它。预加载可以大大减少图片较多的网站的加载时间，尤其是带有图片库的网站。

使用 CSS 代替图像

有时，减少图像加载时间的最佳方法是根本不使用图像。 CSS 的改进使浏览器可以使用纯 CSS 呈现某些“图像”。现在可以使用 CSS 生成圆角矩形、渐变、阴影和透明图像。请注意，并非所有浏览器都支持这些技术，在用 CSS 替换图像之前应仔细考虑浏览器兼容性。

推荐一些关于图像优化和减少加载时间(如果使用图像)的好读物。

关于html - 如何减小大图像的文件大小以缩短页面加载时间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38261953/