html - 我可以阻止在网页上加载整个图像吗？

Question

我的网页上有一个 header 背景图片，只有大约 1/3 的图片在页面上可以看到的范围内。

有什么方法可以只加载我需要的图像片段而不是整个图像加载？谷歌的page speed insights说我的图片是我的主页第一次加载时间这么长的主要原因。

CSS:

header.masthead {
  position: relative;
  background-color: #343a40;
  background: url("../images/showcase.jpg") no-repeat center center;
  background-size: cover;
  padding-top: 8rem;
  padding-bottom: 8rem;
}

HTML:

  <header class="masthead">
    <div class="overlay"></div>
    <div class="container">
      <div class="row text-center">
        <div class="col-xl-9 mx-auto">
          <h1 class="text-light" >Lorem</h1>
        </div>
            <div class="row text-center">
              <div class="col-md-12">
                <a href="{{ url_for('billing.pricing') }}"><button type="submit" class="btn btn-main">Ipsum</button></a>
              </div>

        </div>
  </div>
</div>

Answer 1

Is there any way to load just the slice of the image I need instead of the entire image loading?

简短的回答:没有。

如果您只显示图片的 1/3 并且适用于所有设备，裁剪图片可能是您最好的选择。

如果您想进一步微调，请考虑 optimizing your image size并使用 srcset为客户端浏览器提供多种选择。