0

Фреймворк Next.js. Я использую компонент next image :

<ImageContainer >
<Image
  alt={"some alt"}
  src={imageUrl}
  height={imageHeight}
  width={imageWidth}
/>
</ImageContainer>

Размер моего контейнера (в нем весь контент) имеет максимальную ширину 1150px и изображения всегда находятся в этом контейнере. Но next image использует изображение шириной 1920px (для моего экрана). https://i.stack.imgur.com/4QKcJ.png Это слишком много! Мой план, настроить конфигурацию так:

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1150],
  },
}

То есть поставить максимальную ширину 1150, как у моего контейнера. Это плохая идея? Что вы мне посоветуете сделать, чтобы избежать загрузки слишком большого изображения?

1 ответ 1

0

Для контейнера с жестко заданными 1150px, по хорошему, изображение должно быть в 2 раза больше, для дисплеев с devicepixelratio = 2 (макбуки и аймаки с ретиной), но, в то же время, так много брейкпойнтов может быть не нужно, экономия в размере жпега между 640 и 750 возможно не столь велика, чтобы ради этого создавать отдельный файл и отдельный набор кешей.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.