Как веб-разработчики и софтверные инженеры мы хотим дать людям то, что они хотят. Если вы хорошо знакомы с 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 и вебсайт!
Спасибо, что прочитали этот небольшой обзор!
Комментариев нет:
Отправить комментарий