Могу ли я предотвратить загрузку всего изображения на веб-странице?

Question

У меня есть фоновое изображение на моей веб-странице, что только около 1/3 изображения находится в пределах, видимых на странице.

Есть ли способ загрузить только нужный мне фрагмент изображения вместо загрузки всего изображения? Google: скорость страницы говорит, что мое изображение - главная причина, по которой моя домашняя страница загружается с первого раза.

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 своего изображения и это применимо ко всем устройствам, обрезка изображения, вероятно, будет лучшим выбором .

Если вы хотите выполнить более точную настройку, рассмотрите возможность оптимизации размера изображения и использования srcset , чтобы предложить несколько альтернатив клиентскому браузеру.

Answer 2

В зависимости от того, на какой платформе вы запускаете свой сайт, может существовать способ для потоковой передачи / отправки только части файла изображения в браузер, но это может привести к тому, что браузеры будут считать его недействительным / неполным. В других случаях, таких как кадрирование или изменение размера CSS, изображение по-прежнему загружается как целое, и Speed ​​Insights видит его как таковой и будет знать, что оно больше необходимого, или видна только часть. Что мешает вам обрезать само изображение, чтобы оставить только видимую часть?