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 возможно не столь велика, чтобы ради этого создавать отдельный файл и отдельный набор кешей.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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