gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-03 02:34:31 26 4
gpt4 key购买 nike

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

首页: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 框架并根据屏幕尺寸放大/缩小。

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

最佳答案

文件类型

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

Sprite 和预加载器

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

虽然 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

Do Images Load Faster in HTML or CSS?

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

26 4 0