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

Question

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

有什么方法可以只加载我需要的图像切片而不是加载整个图像？ Google 的 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

根据您运行您的网站的平台，可能有一种方法可以将图像文件的一部分流式传输/发送到浏览器，但这可能会导致浏览器将其读取为无效/不完整. 在其他情况下，例如 css 裁剪或调整大小，图像仍然作为整体加载并且 Speed Insights 看到它是这样的，并且会知道它比必要的更大，或者只有一部分是可见的。是什么阻止您裁剪图像本身，只保留可见部分？

Answer 2

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 and using srcset 为客户端浏览器提供多种选择。

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

Can I prevent loading an entire image on a web page?

html

css

web-performance