Компонент Next.js и оптимизация изображений

{"document": [{"text": [{"type": "string", "attributes": {}, "string": "Привет всем! Сегодня мы рассмотрим Next.js. Это гибкий фреймворк React, который предоставляет вам конструкторские блоки для создания быстрых веб-приложений. У него есть куча интересных функций прямо из коробки. Вместо того, чтобы говорить обо всем этом, мы сосредоточимся на одной функции, которую мы находим очень интересной и которая значительно ускоряет работу вашего веб-приложения."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"italic": true}, "string": "Для тех, кто хочет узнать больше, Next.js обладает "}, {"type": "string", "attributes": {"href": "https://nextjs.org/docs", "italic": true}, "string": "обширной документацией"}, {"type": "string", "attributes": {"italic": true}, "string": ". Вам обязательно следует проверить её для получения более подробной информации."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "1_A6Y2KC1t2Pyr09AsM-dtdw.jpeg", "filesize": 57776, "height": 422, "pic_id": 108577, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/07/27/1_A6Y2KC1t2Pyr09AsM-dtdw.jpeg", "width": 750}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Нашей темой в Next.js будет компонент "}, {"type": "string", "attributes": {"bold": true}, "string": "image "}, {"type": "string", "attributes": {}, "string": "и то, как мы должны внедрять изображения в наши веб-сайты и веб-приложения."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В Next.js компонент "}, {"type": "string", "attributes": {"bold": true}, "string": "image "}, {"type": "string", "attributes": {}, "string": "является расширением элемента HTML "}, {"type": "string", "attributes": {"bold": true}, "string": "<img>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Однако, прежде чем говорить о компоненте "}, {"type": "string", "attributes": {"bold": true}, "string": "image"}, {"type": "string", "attributes": {}, "string": ", мы должны сначала поговорить о самих изображениях."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Что такое изображения"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Изображения являются одним из самых важных элементов веб-сайта. Мы добавляем их для того, чтобы:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "дать пользователю лучший пользовательский опыт;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "визуально привлеките внимание;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "помочь пользователю лучше понять контент;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "направить взгляд вашего посетителя;"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Поэтому неправильное их использование может привести к резкому замедлению работы нашего веб-сайта. А в мире, где все происходит быстро, люди, вероятно, не стали бы ждать загрузки наших веб-сайтов в течение 10 секунд."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Оптимизация изображений"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Используйте изображения правильного размера в соответствии с шириной устройства. Для рабочего стола вы можете использовать изображение 1920х1280. Но использование изображения того же размера для мобильного устройства с шириной устройства 375px приведет к ненужному замедлению работы вашего сайта."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Используйте правильный формат для ваших изображений. Предлагается использовать формат "}, {"type": "string", "attributes": {"bold": true}, "string": "webp"}, {"type": "string", "attributes": {}, "string": ", поскольку его качество такое же, как при использовании формата "}, {"type": "string", "attributes": {"bold": true}, "string": "jpg "}, {"type": "string", "attributes": {}, "string": "или "}, {"type": "string", "attributes": {"bold": true}, "string": "png"}, {"type": "string", "attributes": {}, "string": ", но он менее тяжелый."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"italic": true}, "string": "WebP - это современный формат изображений, который обеспечивает превосходное сжатие изображений в Интернете без потерь и с потерями. Он поддерживается большинством браузеров. Проверьте "}, {"type": "string", "attributes": {"href": "https://caniuse.com/?search=webp", "italic": true}, "string": "здесь"}, {"type": "string", "attributes": {"italic": true}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Если вы используете много картинок на своем сайте, возможно, вам захочется добавить атрибут "}, {"type": "string", "attributes": {"bold": true}, "string": "loading=«lazy» "}, {"type": "string", "attributes": {}, "string": " к вашему элементу "}, {"type": "string", "attributes": {"bold": true}, "string": "<img />"}, {"type": "string", "attributes": {}, "string": ". Таким образом, браузер не будет отправлять никаких запросов на загрузку дополнительных ресурсов до тех пор, пока пользователи не попадут в поле зрения. Это повысит производительность и ускорит загрузку сайта, поскольку изображения запрашиваются тогда, когда они необходимы."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"italic": true}, "string": "Всегда делайте это перед началом работы, чтобы избежать возможных ошибок."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Используйте явные атрибуты ширины и высоты для предотвращения кумулятивного сдвига макета (CLS)."}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь представьте, что вам не нужно проходить через все эти шаги, чтобы убедиться, что ваше изображение хорошо оптимизировано. Именно здесь на помощь приходит компонент Next.js "}, {"type": "string", "attributes": {"bold": true}, "string": "<Image />"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Next.js и компонент Image"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "В Next.js, вместо традиционного элемента "}, {"type": "string", "attributes": {"bold": true}, "string": "img"}, {"type": "string", "attributes": {}, "string": ", использование встроенного компонента "}, {"type": "string", "attributes": {"bold": true}, "string": "image "}, {"type": "string", "attributes": {}, "string": "дает вам столько возможностей прямо из коробки, включая те, о которых мы еще не говорили. Но наше внимание будет сосредоточено на тех, которые мы уже проверили выше."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Оптимизация размера изображения"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "imgpreview (1).png", "filesize": 88227, "height": 155, "pic_id": 108586, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/07/27/imgpreview_1.jpeg", "width": 1200}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Когда изображение используется в компоненте "}, {"type": "string", "attributes": {"bold": true}, "string": "Image"}, {"type": "string", "attributes": {}, "string": ", его размер автоматически оптимизируется в соответствии с шириной устройства. Это означает, что размер изображения 1920x1280 будет уменьшен, если пользователь зайдет на ваш сайт с мобильного устройства."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"italic": true}, "string": "Next.js использует API для оптимизации изображений. При изменении размера экрана размер изображения также изменяется в соответствии с определенными точками останова. Если вы не указали точки останова явно, значения по умолчанию будут такими:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"italic": true}, "string": "module.exports = {"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": ""}, {"type": "string", "attributes": {"italic": true}, "string": "images: {"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": ""}, {"type": "string", "attributes": {"italic": true}, "string": "deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": ""}, {"type": "string", "attributes": {"italic": true}, "string": "},"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": ""}, {"type": "string", "attributes": {"italic": true}, "string": "}"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Оптимизация формата изображения"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Мы уже говорили о том, что рекомендуется использовать формат "}, {"type": "string", "attributes": {"bold": true}, "string": "Webp "}, {"type": "string", "attributes": {}, "string": "для изображений, когда мы используем их на наших сайтах. На самом деле, вы также можете проверить Google Lighthouse из инспектора. Если формат изображения "}, {"type": "string", "attributes": {"bold": true}, "string": "jpg "}, {"type": "string", "attributes": {}, "string": "или "}, {"type": "string", "attributes": {"bold": true}, "string": "png"}, {"type": "string", "attributes": {}, "string": ", Lighthouse предложит вам использовать формат "}, {"type": "string", "attributes": {"bold": true}, "string": "Webp "}, {"type": "string", "attributes": {}, "string": "для лучшей производительности."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Next.js справляется и с этим! Он меняет формат изображения на "}, {"type": "string", "attributes": {"bold": true}, "string": "Webp"}, {"type": "string", "attributes": {}, "string": ", даже если это "}, {"type": "string", "attributes": {"bold": true}, "string": "jpg "}, {"type": "string", "attributes": {}, "string": "или "}, {"type": "string", "attributes": {"bold": true}, "string": "png "}, {"type": "string", "attributes": {}, "string": "и т.д. Вот код:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"italic": true}, "string": "<div className={styles.imgWrapper}> <Image src=«/pic.jpg» layout=«fill» objectFit=«cover» /> </div>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вот вывод в браузере:"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "imgpreview (2).png", "filesize": 58199, "height": 162, "pic_id": 108580, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/07/27/imgpreview_2.jpeg", "width": 1075}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вот сравнение использования "}, {"type": "string", "attributes": {"bold": true}, "string": "jpg "}, {"type": "string", "attributes": {}, "string": "и "}, {"type": "string", "attributes": {"bold": true}, "string": "Webp "}, {"type": "string", "attributes": {}, "string": "с одним и тем же изображением:"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "imgpreview (3).png", "filesize": 50422, "height": 134, "pic_id": 108581, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/07/27/imgpreview_3.jpeg", "width": 1095}}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Ленивая загрузка"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": ""}, {"type": "string", "attributes": {}, "string": "Помните, мы говорили о том, как важно использовать атрибут "}, {"type": "string", "attributes": {"bold": true}, "string": "loading=«lazy» "}, {"type": "string", "attributes": {}, "string": " для повышения производительности сайта? Это также автоматически выполняется компонентом Next.js "}, {"type": "string", "attributes": {"bold": true}, "string": "Image"}, {"type": "string", "attributes": {}, "string": ". Изображения не будут отображаться до тех пор, пока они не попадут в начальную область просмотра."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Кумулятивный сдвиг макета (CLS)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": ""}, {"type": "string", "attributes": {}, "string": "Чтобы предотвратить CLS, изображения должны иметь явную ширину и высоту. Откройте Lighthouse и попробуйте сами. Он выдаст вам следующее предупреждение:"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "imgpreview (4).png", "filesize": 12642, "height": 93, "pic_id": 108582, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/07/27/imgpreview_4.jpeg", "width": 704}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Для локальных изображений, используемых в компоненте "}, {"type": "string", "attributes": {"bold": true}, "string": "Image"}, {"type": "string", "attributes": {}, "string": ", Next.js автоматически предоставляет эти значения. Это устраняет проблему. Однако для изображений, которые мы используем на наших сайтах, необходимо предоставить явные значения ширины и высоты. Поскольку Next.js не имеет доступа к удаленным файлам в процессе сборки. И на самом деле, он выдает это предупреждение:"}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "imgpreview (5).png", "filesize": 74652, "height": 122, "pic_id": 108584, "url": "https://storage.yandexcloud.net/pabliko.files/article_cloud_image/2022/07/27/imgpreview_5.jpeg", "width": 933}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Заключение"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Next.js пользуется большой популярностью не просто так. Существует множество других преимуществ создания веб-приложений с помощью этого фреймворка. Если вы являетесь разработчиком "}, {"type": "string", "attributes": {"bold": true}, "string": "react"}, {"type": "string", "attributes": {}, "string": " и хотите узнать больше, мы рекомендуем вам ознакомиться "}, {"type": "string", "attributes": {"href": "https://nextjs.org/docs"}, "string": "с их документацией"}, {"type": "string", "attributes": {}, "string": ". Она очень информативна и проста в изучении."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Понравилась статья? Тогда ставьте лайки, пишите комментарии, делитесь ею с друзьями, а также подписывайтесь на нас тут и на других площадках (ссылка в шапке профиля)."}], "attributes": []}], "selectedRange": [3106, 3106]}