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

有什么方法可以只加载我需要的图像切片，而不是加载整个图像？

简短回答：否。

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

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

Answer 2

根据运行站点的平台，可能存在一种仅将图像文件的一部分流式发送/发送到浏览器的方法，但这可能导致浏览器将其读取为无效/不完整。在其他情况下，例如css裁剪或调整大小，图像仍会整体加载，而Speed Insights会照原样加载它，并且会知道它的大小超出了必要，或者只有一部分可见。是什么让您无法裁剪图像本身，仅保留可见部分？

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

2 个答案: