Введение в адаптивную оптимизацию изображений с помощью HTML5 и Intersection Observer

1656609970 vvedenie v adaptivnuyu optimizacziyu izobrazhenij s pomoshhyu html5 i intersection

автор Риккардо Канелла

JDfC95VzZFnUY05NLzSkanNtv-Gkqw2zuipl

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

Оптимизация изображения – это и наука, и искусство. Это наука, потому что существует много хорошо разработанных методов и алгоритмов, которые могут значительно снизить размер изображения. Это искусство, потому что нет однозначного ответа.

Но как мы можем оптимизировать наши изображения с мобильной формы в дополнение к магии изображений или любого другого инструмента веб-оптимизации?

Элемент img

Элемент HTML5 был разработан, чтобы предоставить разработчику возможность оптимизировать изображение в соответствии с разрешением экрана. Это делается с помощью двух атрибутов, srcset и sizes. С помощью простого синтаксиса вы можете поручить браузеру решить, какой из разных размеров изображение требуется:

<img srcset="
              1.5x,
              2x"
             src=" 
alt="The Death Star">

В этом случае браузер выберет изображение, которое лучше всего соответствует его разрешению. Но предположение, что изображение должно отображаться на весь экран (100vw). Обычно это не страшное предположение.

The sizes атрибут используется во избежание этой проблемы и, следовательно, помочь браузеру выбрать наиболее оптимизированное изображение для этого случая. Вы можете использовать размеры, чтобы точно соответствовать вашему макету CSS и точно сообщать обозревателю, насколько это изображение будет большим на каждом размере экрана, отвечая тому, как ваши точки остановки работают в вашем дизайне.

Это может быть немного сложным и, честно говоря, это может быть немного опасным. Вы размещаете материалы CSS в разметке и знаете, как это происходит. Он может быть автоматизирован или введен на сторону сервера. Даже в этом случае синтаксис действительно очень прост:

<img srcset="
              1.5x,
              2x"
             src=" 

alt="The Death Star">

Элемент изображения

Существуют различные форматы для оптимизации изображений для Интернета, например webpи jpg2000. Но не все браузеры могут их поддерживать – например, Internet Explorer. Это не должно препятствовать нам использовать наиболее оптимизированный формат для большинства современных браузеров.

Элемент изображения – это отличный способ предоставить альтернативные источники для файлов изображений, поэтому браузер может выбирать в зависимости от возможностей устройства. Синтаксис очень похож на элемент

<picture>
  <source type="image/webp" srcset="
  <source media=”(min-width: 320px)” srcset=”the-death-star-mn.jpg”>
  <source media=”(min-width: 465px)” srcset=”the-death-star-sm.jpg”>
  <source media=”(min-width: 650px)” 
          srcset=”the-death-star-md.jpg, 
                 the-death-star-lg.jpg 1.5x”
          
  >
  <img src=”the-death-star.jpg” alt=”Flowers” style=”width:auto;”>
</picture>

Но могу ли я использовать элемент везде?

К сожелению нет. Браузер, например Internet Explorer 11, не поддерживает этот элемент.

8Mln3ivuAOqt9Dc67yvdlpXjl9yQOj8lBEo8
Источник изображения.

Но есть решение. Очень маленькая библиотека JS позволяет использовать этот элемент даже в неподдерживаемых браузерах.

Ленивая загрузка изображений

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

Если вы ранее писали код отложенной загрузки, возможно, вы выполнили свою задачу, используя такие обработчики событий, как scroll или resize. Этот подход наиболее совместим между браузерами. Однако современные браузеры предлагают более производительный и эффективный способ проверки видимости элементов. Это производится через API Intersection Observer.

Intersection Observer легче использовать и читать, чем код, который полагается на разные обработчики событий. Разработчикам нужно только зарегистрировать наблюдателя для наблюдения за элементами, а не писать изнурительный код обнаружения видимости элементов. Все, что остается сделать разработчику, это решить, что делать, когда элемент становится видимым.

<img class="lazy" 
     src=" 
     data-src="image-to-lazy-load-1x.jpg" 
     data-srcset=" 2x, 
      1x" alt="I'm an image!"
>

Три соответствующие части этой разметки: class атрибут, и data-src и data-srcset атрибуты. Последние два являются атрибутами-заполнителями, содержащими URL изображения, которое мы загрузим, когда элемент будет в окне просмотра.

document.addEventListener("DOMContentLoaded", () => {
 var lazyImages =[].slice.call(
  document.querySelectorAll("img.lazy")
 )
 if ("IntersectionObserver" in window) {
    let lazyImageObserver = 
      new IntersectionObserver((entries, observer) => {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazy");
            lazyImageObserver.unobserve(lazyImage);
          }
        });
      });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});

Код очень простой и легко отлаживается (это код, чтобы увидеть этот код в действии), но есть большая проблема. API Intersection Observer не поддерживается правильно.

QLM7MhXfeIzVdyRrq3oY4qOtNj-FAuo-k4Nn
Источник изображения.

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

Прогрессивная загрузка изображения

Это небольшой совет: Когда вы экспортируете свои изображения (JPEG, GIF, PNG), вы можете отметить прогрессивный параметр (например, Photoshop или Sketch). Изображения уже постепенно воспроизводятся в веб-браузере. Но прогрессивное изображение начинается с низкого разрешения, и со временем оно постепенно улучшается.

Эту технику сейчас используют почти все, поскольку она позволяет сразу показать пользователю предварительный просмотр изображения, а затем медленно загружать разные детали (например, Instagram). Этот метод позволяет предотвратить, чтобы пользователи с медленным соединением покидали ваш сайт, поскольку он отображает белый экран.

Окончательная таблетка

Обратившись в Интернет, я встретил прекрасную статью Хосе М. Переса о том, как Medium оптимизирует и реализует прогрессивную загрузку изображения.

Если вам понравилась статья, пожалуйста, хлопайте и следите за мной.
Спасибо и следите за обновлениями?
Следите за моими последними новостями и советами в Facebook

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *