我的网站主页上有以下图片/幻灯片；
首页：https://www.atlasestateagents.co.uk/
图片：
https://www.atlasestateagents.co.uk/img/Liverpool-Slide.png
https://www.atlasestateagents.co.uk/img/Landlord-Slide.png
https://www.atlasestateagents.co.uk/img/Vendor-Slide.png
使用过一些在线 SEO 工具，我可以看到它们大大增加了页面加载时间，这显然会对 SEO 性能产生负面影响。
图片必须很大，因为该网站使用 Bootstrap 框架并根据屏幕尺寸放大/缩小。
我可以做些什么来减少文件大小和/或加载时间？
【问题讨论】：
标签： html seo filesize page-load-time
文件类型
优化图像时首先要考虑的也是最简单的事情是文件类型。某些图像文件类型更适合特定图像。例如，JPG 最适合照片图像。另一方面，PNG 最适合用于颜色较少的简单图像或使用透明度的图像。 24 位 PNG 最适合同时包含摄影元素和简单图形的图像。 8 位 PNG 可以进一步减小少于 256 色的图像的文件大小。
精灵和预加载器
减少加载时间的一个有用做法是使用 CSS sprite，这是一种显示较大图像的 CSS 代码。这种技术通常用于按钮上的鼠标悬停状态。例如，使用 sprite，您可以在您的网站上将图像的一部分显示为按钮，并在用户将鼠标悬停在其上时将该图像的另一部分显示为按钮。
虽然精灵经常用于交互式菜单和按钮，但它们也可用于显示来自单个图像文件的多个站点图像。这将要求浏览器只下载一张图片，而不是三张或四张。
除了 sprite，还可以使用 JavaScript、jQuery、Ajax 或 CSS 预加载图像。预加载图像时，浏览器会下载或“预加载”图像，然后在用户访问时立即显示。预加载可以大大减少图片繁重的网站的加载时间，尤其是带有照片库的网站。
使用 CSS 代替图片
有时，减少图片加载时间的最佳方法是根本不使用图片。 CSS 的改进使浏览器可以使用纯 CSS 渲染某些“图像”。现在可以使用 CSS 生成圆角矩形、渐变、阴影和透明图像。请注意，并非所有浏览器都支持这些技术，在用 CSS 替换图像之前，应仔细考虑浏览器兼容性。
建议一些关于图像优化和减少加载时间（如果使用图像）的好读物。
http://www.getsnappy.com/web-optimization/improving-page-load-times.html
http://www.monitis.com/blog/2011/05/29/30-tips-to-optimize-htmlcssimages-for-smooth-web-experience
http://www.practicalecommerce.com/articles/3354-Optimizing-Images-to-Reduce-Load-Times
【讨论】：