BetterImage: новый инструмент для оптимизации изображений

Если вы хотите написать приятный глазу сайт, достаточно ли немного фантазии с CSS и HTML? Большинство из нас ответили бы на этот вопрос ← нет. Мы хотим картинок, много картинок! Когда мы смотрим на большой сайт интернет-магазина или просто пост блога, наши взгляды естественным образом притягивают изображения между строками текста. Изображения помогают проиллюстрировать идеи, юмор или показывают детали товара, который мы покупаем.

---

Как веб-разработчики и софтверные инженеры мы хотим дать людям то, что они хотят. Если вы хорошо знакомы с NextJS, вы должны иметь представление о потрясающей функции оптимизации изображений, включённойю в недавно выпущенную версию 10. NextJS — это фреймворк, который может применяться как на бэкенде, так и на фронтенде приложений React. Он способен выполнять щирокий спектр манипуляций, включая конвертирование изображений в дружественный вебу формат WebP с загрузкой изображений по мере необходимости пользователя и многим другим.

Если вы уже работаете с NextJS, это очень кстати. Но что, если вы хотите функциональность оптимизации, встроенные стили и простоту компонента React без связанных с новым фреймворком преград?


Изображения — это великолепно, но все эти мемы с милыми котиками могут прибавить больших проблем. А ведь хочется, чтобы сайт загружался быстро, даже (и особенно!) на наших телефонах.

Тогда знакомьтесь, BetterImage

BetterImage — инструмент с открытым исходным кодом, подражающий многим функциям оптимизации просто и удобно в формате React. Он конвертирует изображение в оптимизированный WebP, размером на 30 % меньший, чем JPEG, не жертвуя качеством. Это улучшает отображение, а также SEO, доступности на Google Lighthouse в сравнении со стандартным тегом. Компонент также рационализирует форматирование CSS, включая в себя из коробки самые популярные манипуляции. Компонент берёт свойства, абстрагируя манипуляции и импорты, позволяя больше фокусироваться на приложении. BetterImage совместим с компонентами на основе классов и функциональными компонентами, так что вы можете включать его в приложение независимо от того, с какими приправами подаёте React. Включение резервного изображения, а также высоты и ширины измерений CSS предупреждает применение метрики совокупного сдвига макета при оценке сайта в Google Lighthouse.


Результаты Google Lighthouse для стандартного тега  (слева) в сравнении с результатами BetterImage (справа).

Компонент всё ещё в бете, в разработке новая функциональность и пакеты NPM. Если вы хотите попробовать компонент деле или у вас есть вопросы, пожалуйста, посетите Github и вебсайт!

А что под капотом BetterImage?

Тесты Lighthouse показывают, что компонент может улучшить производительность загрузки изображения. Другие фреймворки, похожие на Next.JS дают великолепную оптимизацию. Наша команда хочет перенять это в React так, чтобы другие фреймворки были не нужны. Мы создали BetterImage, чтобы разработчики могли писать стили прямо в коде React в виде строки. Стилизация опциональна и может не использоваться вообще.


Компонент BetterImage

А что под капотом? Свойства передаются компоненту, который затем абстрагирует информацию для манипуляций с изображением. Нет необходимости импортировать само изображение в компонент React, нужен только относительный путь, и BetterImage динамически импортирует конвертированное изображение. BetterImage конвертирует файл-источник в WebP с помощью вызова API внешнего пакета NPM и сохраняет конвертированное изображение в локальной папке. Такой подход помогает изображение быстрее. Вся остальная функциональность — неизменно гибко — применяется по мере необходимости. Для ознакомления с компонентом, который сейчас в бете, добро пожаловать на Github и вебсайт!

Спасибо, что прочитали этот небольшой обзор!

• Профессия Веб-разработчик
• Frontend-разработчик