Изображение html5 Пиксельная нагрузка

Ответ 1

Или, если вы хотите размытие пикселизации/рендеринга, вы можете посмотреть здесь: https://www.google.com/amp/s/jmperezperez.com/medium-image-progressive-loading-placeholder/amp/

Вот что происходит:

• Отобразите div, где будет отображаться изображение. Средний использует a с нижним уровнем заполнения, установленным в процентах, что соответствует соотношению сторон изображения. Таким образом, они предотвращают пересчеты при загрузке изображений, так как все отображается в конечном положении. Это также называют внутренними заполнителями.

• Загрузите крошечную версию изображения. На данный момент они, похоже, запрашивают небольшие миниатюры JPEG с очень низким качеством (например, 20%). Разметка для этого маленького изображения возвращается в исходном HTML как a, поэтому браузер сразу начинает получать их.

• Как только изображение будет загружено, оно будет нарисовано в a. Затем данные изображения берутся и передаются через пользовательскую функцию blur(). Вы можете увидеть это, немного скремблированное, в файле main-base.bundle JS. Эта функция аналогична, хотя и не идентична функции размытия StackBlur. В то же время запрашивается основное изображение.

• Как только основное изображение загружено, оно отображается, и холст скрыт.

Все переходы довольно плавные, благодаря применению анимаций CSS.

Пример из страницы:

<figure name="7012" id="7012" class="graf--figure graf--layoutFillWidth graf-after--h4">
  <div class="aspectRatioPlaceholder is-locked">
    <div class="aspect-ratio-fill" style="padding-bottom: 66.7%;"></div>
    <div class="progressiveMedia js-progressiveMedia graf-image is-canvasLoaded is-imageLoaded" data-image-id="1*sg-uLNm73whmdOgKlrQdZA.jpeg" data-width="2000" data-height="1333" data-scroll="native">
      <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">
        <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas" width="75" height="47"></canvas>
        <img class="progressiveMedia-image js-progressiveMedia-image __web-inspector-hide-shortcut__" data-src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
        <noscript class="js-progressiveMedia-inner">&lt;img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;</noscript>
    </div>
  </div>
</figure>

Или вы можете проверить это CodePen. Этот JMPerez настроен в попытке воссоздать сам эффект.

Прошу прощения за мой первый ответ, если это не то, что вы искали.