Как moqimg.ru помогает при адаптивной верстке
Как оптимизировать скорость загрузки страницы используя адаптивные изображения на реальном примере.
При адаптивной верстке важно не только правильно расположить элементы на странице, но и оптимизировать загрузку изображений.
Частая проблема — браузер загружает слишком большие изображения, даже если они отображаются в небольшом размере. Это увеличивает время загрузки страницы и ухудшает показатели производительности.
В этой статье рассмотрим простой пример и покажем, как сервис moqimg.ru помогает быстрее подобрать оптимальные размеры изображений для адаптивной верстки.
Исходный код примера можно посмотреть в репозитории:
Базовая страница
Для примера создадим простую страницу с карточками товаров. Каждая карточка состоит из:
- изображения размером 1024x768 px
- названия товара
- кнопки Купить
Для верстки используем Bootstrap 5 и его стандартную сетку.
Для простоты в статье показана только одна карточка — остальные устроены аналогично. Полный html-код страницы можно посмотреть по ссылке.
Класс overflow-hidden нужен для того, чтобы изображение не выходило за границы карточки.
На видео ниже показано, как будет выглядеть страница при изменении ширины экрана.
На первый взгляд всё работает корректно. Однако давайте проверим страницу с помощью Lighthouse.
Проверяем Lighthouse
После запуска Lighthouse для мобильной версии можно увидеть рекомендацию: Improve image delivery
Это означает, что браузер загружает изображения большего размера, чем требуется для их отображения.
Например:
- изображение загружается размером 1024x768 px
- но на странице отображается примерно 382x233 px
В результате загружается лишний объём данных.
Используем элемент picture для адаптивных изображений
Чтобы браузер мог выбирать изображение подходящего размера, нужно использовать тег <picture>.
Он позволяет задать несколько вариантов изображения и условия, при которых браузер должен использовать каждый из них.
Добавим изображения для разных размеров экрана, будем использовать брейкпоинты фреймворка Bootstrap:
Теперь браузер будет выбирать разные изображения в зависимости от ширины экрана.
Сервис moqimg.ru отображает размер изображения прямо на картинке, поэтому легко увидеть, какое изображение загрузилось.
Полный html-код страницы можно посмотреть по ссылке.
На видео показано как будет выглядеть страница для разной ширины экрана.
Почему этого недостаточно
Хотя браузер теперь использует разные изображения, их размеры всё ещё не оптимальны.
Например:
- изображение может загружаться 1400x1400 px
- но реально отображаться размером 382x233 px
Это всё равно приводит к избыточной загрузке данных.
Поэтому важно подобрать реальный размер изображения, соответствующий размеру элемента на странице.
Определяем реальные размеры изображения
Откроем страницу в браузере и увеличим окно до максимальной ширины.
Теперь с помощью Chrome DevTools посмотрим, какой размер занимает изображение.
В нашем примере изображение занимает область примерно: 382×233 px
Теперь можно использовать изображение именно такого размера.
Будем менять ширину экрана браузера, брать размер родительского блока картинки и использовать его в элементе source. Получится примерно такие размеры:
Теперь изображения максимально близки к размеру, в котором они отображаются.
Полный html-код страницы можно посмотреть по ссылке.
Проверяем результат
После этой оптимизации снова запустим Lighthouse.
Теперь рекомендация Improve image delivery исчезла.
Это означает, что изображения загружаются в оптимальном размере.
Чем полезен moqimg.ru
Настроить адаптивные изображения можно и без специальных сервисов.
Однако moqimg.ru делает этот процесс значительно удобнее.
Он позволяет:
- быстро генерировать изображения любого размера
- видеть размеры изображения прямо на картинке
- проверять адаптивность без подготовки реальных изображений
Это ускоряет разработку и делает настройку адаптивных изображений более наглядной.