Как moqimg.ru помогает при адаптивной верстке

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

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

В этой статье рассмотрим простой пример и покажем, как сервис moqimg.ru помогает быстрее подобрать оптимальные размеры изображений для адаптивной верстки.

Исходный код примера можно посмотреть в репозитории: https://gitlab.com/moqimg/how-moqimg-helps-with-responsive-design

Базовая страница

Создадим простую страницу с карточками товаров. Каждая карточка состоит из:

• изображения размером 1024x768 px
• названия товара
• кнопки "Купить"

Для верстки возьмем Bootstrap 5 и его стандартную сетку.

			<div class="container py-5">
  <div class="row g-5">

    <div class="col-md-6 col-xl-4">
      <div class="card h-100">

        <div class="ratio ratio-16x9 rounded-top">
          <div class="d-flex align-items-center justify-content-center px-3">
              <img src="https://moqimg.ru/1024x768"
                   alt="Смартфон X1"
                   class="img-fluid">
          </div>
        </div>

        <div class="card-body text-center">
          <h5 class="card-title">Смартфон X1</h5>
          <a href="#" class="btn btn-primary w-100">Купить</a>
        </div>

      </div>
    </div>

  </div>
</div>

		

Для простоты в статье показана только одна карточка — остальные устроены аналогично. Полный html-код страницы можно посмотреть по ссылке.

Класс overflow-hidden нужен для того, чтобы изображение не выходило за границы карточки.

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

На первый взгляд всё работает корректно. Однако давайте проверим страницу с помощью Lighthouse.

Проверяем с помощью Lighthouse

После запуска Lighthouse для мобильной версии можно увидеть рекомендацию: Improve image delivery

Lighthouse

Это означает, что браузер загружает изображения большего размера, чем требуется для их отображения.

Например:

• изображение загружается размером 1024x768 px
• но на странице отображается примерно 382x233 px

В результате загружается лишний объём данных.

Используем <picture> для адаптивных изображений

Чтобы браузер мог выбирать изображение подходящего размера, нужно использовать тег <picture>.

Он позволяет задать несколько вариантов изображения и условия, при которых браузер должен использовать каждый из них.

Добавим изображения для разных размеров экрана, будем использовать брейкпоинты фреймворка Bootstrap:

			<picture>
  <source srcset="https://moqimg.ru/1400" media="(min-width: 1400px)">
  <source srcset="https://moqimg.ru/1200" media="(min-width: 1200px)">
  <source srcset="https://moqimg.ru/992" media="(min-width: 992px)">
  <source srcset="https://moqimg.ru/768" media="(min-width: 768px)">
  <source srcset="https://moqimg.ru/576" media="(min-width: 576px)">

  <img class="img-fluid"
       src="https://moqimg.ru/1024x768"
       alt="Смартфон X1">
</picture>

		

Теперь браузер будет выбирать подходящее изображение в зависимости от ширины экрана.

Сервис moqimg.ru отображает размер изображения прямо на картинке, поэтому легко увидеть, какое изображение отображается в настоящее время.

Полный html-код страницы можно посмотреть по ссылке.

На видео показано как будет выглядеть страница для разной ширины экрана.

Почему этого недостаточно

Хотя браузер теперь использует разные изображения, их размеры всё ещё не оптимальны.

Например:

• изображение может загружаться 1400x1400 px
• но реально отображаться размером 382x233 px

Это всё равно приводит к избыточной загрузке данных.

Поэтому важно подобрать реальный размер изображения, соответствующий размеру элемента на странице.

Определяем реальные размеры изображения

Откроем страницу в браузере и увеличим окно до максимальной ширины.

Теперь с помощью Chrome DevTools посмотрим, какой размер занимает изображение. Точнее не изображение, а родительский блок, в котором находится изображение.

В нашем примере изображение занимает область примерно: 382×233 px

Chrome DevTools

Теперь мы можем указать, что если ширина экрана браузера больше или равна 1400 px браузеру нужно использовать изображение по адресу https://moqimg.ru/382x233 .

Будем менять ширину экрана браузера, брать размер родительского блока картинки и использовать его в элементе source:

			<picture>
  <source srcset="https://moqimg.ru/382x233" media="(min-width: 1400px)">
  <source srcset="https://moqimg.ru/322x200" media="(min-width: 1200px)">
  <source srcset="https://moqimg.ru/422x256" media="(min-width: 992px)">
  <source srcset="https://moqimg.ru/302x188" media="(min-width: 768px)">
  <source srcset="https://moqimg.ru/482x290" media="(min-width: 576px)">

  <img class="img-fluid"
       src="https://moqimg.ru/516x309"
       alt="Смартфон X1">
</picture>

		

Теперь изображения максимально близки к размеру блока, в котором они отображаются.

Полный html-код страницы можно посмотреть по ссылке.

На видео показано как будет выглядеть страница для разной ширины экрана.

Проверяем результат

После этой оптимизации снова запустим Lighthouse.

Lighthouse

Теперь рекомендация Improve image delivery исчезла.

Это означает, что изображения загружаются в оптимальном размере.

Чем полезен moqimg.ru

Настроить адаптивные изображения можно и без специальных сервисов.

Однако moqimg.ru делает этот процесс значительно удобнее.

Он позволяет:

• быстро генерировать изображения любого размера
• видеть размеры изображения прямо на картинке
• проверять адаптивность без подготовки реальных изображений

Это ускоряет разработку и делает настройку адаптивных изображений более наглядной.