NextJS 13. Оптимизация изображений

Фреймворк NextJS предлагает собственный компонент Image для оптимизации картинок. Он позволяет автоматически генерировать современные форматы изображений, такие как webp и avif, разные размеры картинки под разные устройства, обеспечивает ленивую подгрузку и многое другое.

Мои курсы по вебу с купонами:

📢 Поддержка канала:

[NikOroferov]

Комментарий приемлемой длины в благодарность Михаилу

[IT-Svyatoslav]

Благодарю Михаил! Вы нам Очень помогаете!

[ShaftiloO]

Если не сложно, сделайте, пожалуйста, видео по актуальной локализации сайта в next js 13 - тк судя по всему, вариантов сделать это сейчас появилось много и все они очень различаются. Если добавите локализацию и рутов - вообще было бы супер

[ilyaprotsenko]

Спасибо! Ещё про параллельные роуты и перехватывающие роуты интересно было бы послушать в твоём исполнении)

[pink-doublethink]

Благодарен за хороший ролик за Имадж. В своё время всё это сам изучал через документацию и код библиотеки.

[olegsh]

Словил флэшбэки, как мы писали подобный компонент, но сами) Михаил, спасибо за обзорные ролики по Нексту! Я хоть на нем и не пишу, но смотрю, впитываю на будущее) Пытаюсь убедить бизнес перейти на него с самопального SSR. Уже почти смог)

[arman-]

Отличный материал и подача! Спасибо!)
По картинкам хорошо бы ещё уточнить:
1. Если WebP не поддерживает браузер, то отдаст оригинал. При этом, если был оригинал WebP, то сконвертирует в JPG, что плохо, так как теряет альфа-канал. Держать все с прозрачностью в PNG тяжело по размеру. Не нашел конфиг, чтобы изменить такое поведение, кажется, захардкодили, судя по исходникам.
2. По sizes всё-таки подробнее рассказать, как оптимизирует, когда картинка не на весь экран, и как он работает с ретинами.
3. Кэширование нарезки превью. По умолчанию очень маленький кэш на время, а для больших картинок нужно держать огромный оригинал, что, соответственно, давит на CPU.

В перспективе было бы здорово, если добавишь материалы продвинутого уровня, например: оптимизация под Lighthouse, тестирование, логирование браузерных ошибок, ISR на запрос от CMS, сборка в Docker-образ, мониторинг продакшн и т.д. =)

[three-zeros]

Михаил, спасибо за Ваши уроки, благодаря Вам вчера получил первый офер!!))
Пожалуйста, расскажите в Вашем новом видео о том, как работать с Firebase в Нексте! Буду очень благодарен!

[NeoCoding]

спасибо за видосик. как раз работал с новыми картинками только что. там кстати как я понял, если нужен именно респонсив-вариант, чтобы картинки адекватно изменялись при изменении размеров экрана, то именно теперь всё на fill завязано, а не как раньше layout="responsive". В итоге, пришлось убирать размеры из Image, ставить fill, а размеры делать через css. На мой взгляд удобнее было как раньше указал размеры, и поставил layout responsive. чтобы всё автоматом работало. Если не делать обёртку и указать размеры то надо возится с sizes и прописывать адаптивы, но это имхо путь тайлвинда, который противоречит моим убеждениям, что код и стиль должны быть разнесены.

[true]

по поводу атрибута alt вот что пишут на странице некста: If the image is purely decorative or not intended for the user, the alt property should be an empty string (alt=""). И это относится не только к нексту. Они в свою очередь взяли эту информацию из спека. Т.е. если изображение бэкграунд, то альт должен быть пустым. И еще: насколько я понял картинки заданные через background-image css не оптимизируются некстом

[kjsywmg]

Подскажите, пожалуйста, как отключить минификацию html в dev-режиме next js?

[andyjs]

C <Image /> есть одна проблема. К сожалению, он не предназначен для генерации статических сайтов (SSG). Вот почему в Gatsby смогли сделать, а тут всё никак?

[govorov_top]

Михаил, здравствуйте! Спасибо за полезное видео.

У меня возник вопрос по поводу момента на 3:55, где Next.js рекомендует указывать размеры изображений для предотвращения 'дёрганий' на странице.

Как быть в случае адаптивного дизайна? Если я разрабатываю 'Desktop First', то размеры, например, 500x500 понятны.
Но что делать, если экран у пользователя 992px или меньше? Как в этом случае быть с данными размерами?

Если это уже описано в документации то я не нашел))))

[oleksiishe]

на сколько стабилен generateStaticParams у меня с ним build не всегда работает, хотя делаю все как на видео, back end у меня на мангоДб, апи делаю на NextJs
было у вас так ?

[letonik]

Подскажите пожалуйста плагин, для отображения размера импортов как у автора, на Php storme

[vladislavkhantaev]

Надеюсь вы сможете помочь, почему при запуске в дев все изображаются корректно, но при билде и запуск на сервере и просмотр через домен часть изображений не отображаются?

[balnazzzar]

Спасибо за уроки по next13. Подскажите а будет ли в ближайшее время урок по интернационализации ?

[maratfaizer]

Спасибо за видео! Вопрос: за счет чего работатает priority? в ущерб чему?

[lisofsky]

когда можно будет купить курс nextjs ?

[dmitri]

Михаил здравствуйте! Вы знаете как происходит процесс получения оптимизированной картинки? Этот механизм внутри библиотек некста иди некст отправляет картинку в сторонний сервис? Мне недавно главный девопс сказал не оптимизировать картинки, так как нечего тут трафик гонять лишний раз в Германию, он имел в виду что сервис который якобы оптимизирует картинки для некста наверняка находятся в Европе и что проще оставить картинку в изначальном в виде, зато трафика больше не станет, хочу понять насколько истинно такое суждение 🤔