Question

我的网站有背景图片，当我第一次加载时;我看到按钮等，图片在之后加载了一两秒左右，图像原始大小为1.1 MB，阅读以下帖子后，我将其缩小为 160 KB，仍然需要加载图像...

Crystal，G。5 Easy Ways to Help Reduce Your Website’s Page Loading Speed。 Hub Spot 。 2015年8月3日。

还有其他改进方法吗？

我的使用不像以下那样：

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: white;
    background: url(../img/intro-bg-compr.jpg) no-repeat bottom center scroll;
    /* ... */
}

Answer 1

你保存了JPEG隔行扫描吗？它可以帮助感知下载时间。

https://en.wikipedia.org/wiki/Interlacing_(bitmaps)

我也通过https://tinypng.com/

成功优化了图片

或者考虑通过创建微调器来向用户提供页面仍在加载的反馈： http://www.ajaxload.info/

Answer 2

function backGroundDiv() { document.GetElementById('intro').style.background="../img/intro-bg-compr.jpg" no-repeat bottom center scroll;
}

window.onload= backGroundDiv;

如果您在页头部分运行此代码并修复此css;

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: white;
}

有效。我希望它适合你。

Answer 3

关注此

第1步：在Photoshop中打开图片。 第2步：点击另存为。 第3步：保存之后您将获得JPEG选项。 选择累进选项 并提供扫描计数并单击确定以保存

这将改善您网站中的背景图片加载时间。您的背景图像质量将增加扫描扫描。

改善网站上的背景图像加载

3 个答案: