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

图片：

已经使用一些在线搜索引擎优化工具，我可以看到他们都大大增加了页面加载时间显然会产生消极的影响关于SEO的表现。

由于网站使用Bootstrap框架并且根据屏幕大小向上/向下缩放，所以图像必须较大。

有什么我可以做的，以减少文件大小和/或加载时间？

2016-07-08 Michael LB

文件类型

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

精灵和预加载器

用于减少负载时间一个有用的做法是利用CSS子图形，这是显示了一块较大的图像的CSS代码。这种技术通常用于按钮上的鼠标悬停状态。例如，使用精灵，您可以在网站上显示一张图片作为按钮，并且每当用户将鼠标移到该图片上时，该图片的其他部分都会显示为该图片。

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

除了精灵之外，还可以使用JavaScript，jQuery，Ajax或CSS预加载图像。预加载图像时，浏览器下载或“预加载”图像，然后在用户访问图像时立即显示图像。预加载可以大大减少图像大量网站的加载时间，特别是带有照片库的网站。

使用CSS，而不是图片

有时，最好的方式来降低图像加载时间是不是在所有使用的图像。 CSS的改进使得浏览器可以使用纯CSS渲染某些“图像”。现在可以使用CSS生成圆角矩形，渐变，阴影和透明图像。需要警告的是，每个浏览器都不会总是支持这些技术，并且在用CSS替换图像之前应仔细考虑浏览器的兼容性。

如果使用图像，建议在图像优化方面进行一些较好的读取并减少加载时间。

2016-07-08 08:40:00

回答