Оптимизация изображения Next.js и imgix без знания его размера

Question

Мне нужно отображать изображения на моем статически созданном веб-сайте Next.js, и я хотел бы сделать это в соответствии с современными передовыми методами.

Я видел, что Next.js включает в себя большую часть оптимизации из коробки. Учитывая, что у меня не будет изображений, сохраненных в разных размерах, я искал imgix, чтобы сделать это за меня.

Как я представлял себе эту настройку, я сбрасываю все изображения в ведро S3 (я знаю только имя файла), которое будет использоваться imgix. Учитывая имя файла и требования к ширине, я бы оставил его на next/Image для изменения размера и рендеринга изображений через загрузчик imgix.

Что меня смущает, так это то, что в документах Next.js упоминается , что ширина и высота должны быть известны заранее. Как я узнаю высоту, если я предоставлю imgix только ширину и позволю ему изменить размер?

Я уверен, что мне здесь не хватает чего-то очевидного, но указатель был бы очень признателен.

Answer 1

Небольшой отказ от ответственности, я работаю в imgix.

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

• Next.js отвечает за манипулирование текстом/html/dom/больше (т.е. размещение тегов img с соответствующими атрибутами в разметке/html/и т. д.)

• imgix отвечает за всю обработку изображений (т.е. почти так, как вы описали, s3 => request a specific size => done)

• разработчики/дизайнеры отвечают за макет страницы (например, css, общую структуру html)

Связанный раздел в документации Next.js хорошо объясняет изменение макета и способы его избежать (это может быть проблемой для вас или не быть).

Высота (и ширина) ваших изображений определяется макетом вашей страницы. Например, вы разработали галерею изображений, в которой отображаются изображения одинакового размера (т. е. каждое изображение ограничено сверху верхней частью строки, нижней — нижней частью строки и слева/справа — столбцами).

Как я узнаю высоту, если я предоставлю imgix только ширину и позволю ему изменить размер?

Один из способов узнать, каковы размеры ваших изображений / должны быть, чтобы ваш дизайнер сказал вам, какими они должны быть. Многим из нас не так повезло, поэтому, если вы дизайнер , как только вы будете удовлетворены своим макетом, вы можете проверить ширину/высоту визуализированных изображений, а затем использовать эту информацию для предоставления атрибутов ширины/высоты для Next.js. составная часть.

Они также указывают третий вариант, который включает использование " layout="fill"что заставляет изображение расширяться, чтобы заполнить его родительский элемент». Если вы выберете этот третий вариант, помните: «При использовании layout='fill', родительский элемент должен иметь position: relative."

Опять же, все это в контексте предотвращения смещения макета. Если вы укажете ширину изображений для imgix, высота будет рассчитана в соответствии с соотношением сторон исходного изображения. Вы также можете указать соотношение сторон вместе с другими параметрами, чтобы получить желаемый эффект.

Answer 2

Я закончил загрузку в imgix во время сборки, что также вернуло бы мне размеры изображения. Основываясь на них, я рассчитал соотношение, и на основе этого и желаемой ширины я также мог вычислить высоту.

Answer 3

Насколько я читал в документации здесь и знаю из своих проектов, Next.js уже делает это, используя Sharp внутри , поэтому всегда обслуживает изображение правильного размера для каждого устройства при использовании next/imageсоставная часть. Без необходимости иметь изображение разных размеров.

Соответствующий раздел из документации

Некоторые оптимизации, встроенные в компонент Image, включают:

1. Улучшенная производительность: всегда используйте изображение правильного размера для каждого устройства, используя современные форматы изображений.

2. Визуальная стабильность: автоматическое предотвращение кумулятивного смещения макета.

3. Более быстрая загрузка страниц: изображения загружаются только тогда, когда они попадают в область просмотра, с дополнительными заполнителями для размытия.

4. Гибкость активов: изменение размера изображения по запросу, даже для изображений, хранящихся на удаленных серверах.