【Перевод】Подробнее о реализации прогрессивной загрузки изображений

внешний интерфейс SVG Canvas WebP

Эта статья также размещена в моем блоге,Добро пожаловать на просмотр 😄

Translated by FrankZhang.

Если есть какие-либо ошибки, пожалуйста, дайте мне знать, спасибо!

существуетпредыдущий постВ этой статье я более подробно рассмотрю технологию, которую Medium.com использует для демонстрации изображений, которые переходят от размытого изображения к четкому во время отображения изображения. С тех пор я нашел другие сайты, которые отображают изображения аналогичным образом. Давайте посмотрим, как реализованы Quora, Quartz и Clicktorelease.

Краткое пособие

Изображения — это самый большой статический ресурс на веб-странице, и они обычно занимают две трети места. Оптимизация изображения и выбор правильного формата изображения имеют решающее значение. Кроме того, некоторые сайты используют маленькие миниатюры в качестве заполнителей, когда изображения не загружены. Эту технику также часто называют «blur-up". Эта технология в основном предназначена для повышения воспринимаемой пользователем производительности, а при использовании с отложенной загрузкой она также может экономить трафик.

Конечно, есть и другие альтернативы этой технологии. Один из них заключается в использовании одного изображения в формате JPEG, настройке его сценария сканирования для быстрого рендеринга пиксельной версии оригинала и постепенном рендеринге окончательного четкого изображения при последующих сканированиях. Я рекомендую вам прочитатьProgressive JPEGs and green MartiansЧтобы узнать больше об этой технологии.

Еще один момент, если вам нравится оптимизация загрузки изображений, вы можете следитьБлог Cloudinary, в блоге которого много сообщений на эту тему.

Quartz

Взгляните на это видео ниже, которое записывает при использовании медленного доступа к сети.QZ.com, способ Кварца реализован следующим образом:

  1. запросить небольшой для запутанных<img />. В данном случае они использовали изображение шириной 50 пикселей и качеством 80%.
  2. Примените эффект размытия с помощью фильтра CSS.
  3. Запросите большое изображение.

Одна интересная особенность Quartz заключается в том, что они используют синтаксис адаптивного изображения для разметки больших изображений. Самая большая разница в том, что они используютdata-srcsetатрибут, чтобы они могли контролировать время выполнения запроса и предотвращать запрос браузером больших изображений после анализа разметки.

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

<figure class="progressive-image featured-image size-extra-large">
  
  <picture style="padding-bottom: 56.1875%; background-image: url(https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50);">
    
    <img src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50">
    
    <img alt="INDIA-fishermen" />
    
    <noscript>
      <img src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=320" alt="INDIA-fishermen">
    </noscript>
  </picture>
  <figcaption>...</figcaption>
</figure>

Quora

Quora также реализовала технологию размытия изображения в своей статье. Например, см.head to this page.

Здесь мы можем увидеть, как выглядит страница, когда отображается размытое изображение заполнителя.

Давайте углубимся в код, чтобы увидеть, как именно он реализован. Во-первых, давайте взглянем на разметку HTML:

<div>
    
    
    <canvas class="qtext_image_placeholder portrait qtext_image zoomable_in zoomable_in_feed"
        width="499"
        height="874"
        data-src="data:image/PNG;base64,UklGRmgAAABXRUJQVlA4IFwAAADwAQCdASoGAAoAAUAmJYgCdEf/g…iD0z/yA/5ipcuk5xHSdrS38j8CkH7s+vKeZu9EwRy0f/KPIlo/+UifdfcpiRcJiRnXXAAAAA==">
    </canvas>
    
    
    
    
    <img src />
</div>

Зачем использовать обаdata-srcа такжеmaster-src?master_srcИзображение — это то, которое загружается при нажатии на изображение для увеличения размера.

Quora не использует эффект размытия. они используютcanvas.drawImage()Отрисовывает маленькие миниатюры на холсте. Вы можете увидеть этот метод, просмотрев их код, связанный с основным файлом JS.shared/lazy_load_imagesВ модуле можно увидеть:

// draw the data-uri image on the canvas
function a(e) {
    if (e.getAttribute("data-src")) {
        var t = new Image;
        t.src = e.getAttribute("data-src");
        var i = e.getAttribute("width")
          , n = e.getAttribute("height")
          , o = e.getContext("2d");
        t.addEventListener("load", function() {
            o.drawImage(t, 0, 0, i, n)
        }, false)
    }
}
// go through all canvas on the page with a data-src
function r() {
    var e = document.querySelectorAll("canvas[data-src]");
    d.insertionQ("canvas[data-src]").every(function(e) {
        a(e)
    }),
    [].forEach.call(e, a)
}

Короче говоря, технологии, используемые Quora, в основном включают:

  1. Визуализируйте очень маленький png, встроенный в холст.
  2. Запросите изображения большего размера, используя Webp (если поддерживается) или другие форматы.
  3. Установите изображение большого размера на<img />ресурс для элемента, затем постепенно меняйте его непрозрачность и скрывайте холст.

Clicktorelease

Clicktorelease.com, @thespite, который был только что переработан, также устанавливает отложенную загрузку изображений.

Самая важная часть здесь заключается в том, что миниатюра — это не само изображение, которое нужно загрузить, а миниатюра.Матрица ДКПзначение, что делает нагрузку очень и очень маленькой.

Шаги для загрузки изображения следующие:

  1. проситьthumb-srcкартина. Это миниатюра 16x4 PNG, обычно размером около 300 байт.
  2. Создавать<canvas />и рисуйте поверх него, вычисляя миниатюры в обратном порядкеDCTполученная картина.
  3. использоватьoriginal-srcАдрес запрашивает изображение большого размера. Если браузер поддерживает формат webp, то в src будет добавлен «.webp», который будет запрашивать изображение в формате webp.

Исходная разметка выглядит так:

<div>
    
    
    
    
    <div>
    
    <div>
        
        <noscript><img src="/images/graphical-web-2016.jpg"></noscript>
    </div>
</div>

Я думаю, что это очень хороший пример прогрессивного улучшения, которое обеспечивает<noscript>Вместо этого постепенно накладывайте эффект от фиксированного фонового изображения к размытому изображению и, наконец, к большому изображению, поддерживающему webp.

Суммировать

Интересно наблюдать за этими небольшими изменениями в реализации прогрессивной загрузки изображений, некоторые из которых используют Javascript, некоторые основаны на адаптивных изображениях, некоторые используют фильтры CSS, а некоторые используют холст.

Если вам нужен базовый пример, вы можете переместитьмоя ручка «Воспроизведение эффекта загрузки среднего изображения». Если вы увидите другие сайты, использующие ту же технику, сообщите мне об этом.

связанная информация

Мой разговор на моей Renderconf 2017Progressive Image RenderingВовлеченные в эту тему, конечно, этот промежуточный промежуток также упомянул вместе с другими изображениями, могут сделать более эффективную технологию погрузки.

Я также писал об использовании SVG для создания заполнителей, см.Использование SVG в качестве заполнителей — Другие методы загрузки изображений.

Категории