Как правильно настроить компонент next/image ?
Фреймворк Next.js. Я использую компонент next image :
<ImageContainer >
<Image
alt={"some alt"}
src={imageUrl}
height={imageHeight}
width={imageWidth}
/>
</ImageContainer>
Размер моего контейнера (в нем весь контент) имеет максимальную ширину 1150px и изображения всегда находятся в этом контейнере. Но next image использует изображение шириной 1920px (для моего экрана). https://i.imgur.com/l85veAj.png Это слишком много! Мой план, настроить конфигурацию так:
module.exports = {
images: {
deviceSizes: [640, 750, 828, 1080, 1150],
},
}
То есть поставить максимальную ширину 1150, как у моего контейнера. Это плохая идея? Что вы мне посоветуете сделать, чтобы избежать загрузки слишком большого изображения?
Ответы (1 шт):
Для контейнера с жестко заданными 1150px, по хорошему, изображение должно быть в 2 раза больше, для дисплеев с devicepixelratio = 2 (макбуки и аймаки с ретиной), но, в то же время, так много брейкпойнтов может быть не нужно, экономия в размере жпега между 640 и 750 возможно не столь велика, чтобы ради этого создавать отдельный файл и отдельный набор кешей.