如何减少大图像的文件大小以提高页面加载时间？

Question

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

主页：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性能产生负面影响。

图片必须是大的大小，因为网站使用的引导带框架和缩放/下降取决于屏幕大小。

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

Answer 1

文件类型

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

雪碧和预装机

减少负载时间的一个有用的实践是使用CSS精灵，这是一种CSS代码，显示一个更大的图像。这种技术经常用于按钮上的鼠标过载状态.例如，使用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

Do Images Load Faster in HTML or CSS?