Картинка под ширину экрана в Nuxt

Давайте изучим адаптивную подачу файла. На телефоне картинка часто тянется на всю ширину экрана, а на десктопе занимает половину колонки или фиксированный блок. Если всегда запрашивать один крупный вариант, мобильный пользователь скачает лишние данные. Модуль @nuxt/image умеет отдавать разные версии; браузеру нужно подсказать, какую ширину кадра ожидать на каждом диапазоне экрана.

Для этого у компонента NuxtImg есть атрибут sizes. Строка описывает правила через пробел: префикс брейкпоинта и желаемая ширина слота. Пример для обложки, которая на маленьком экране занимает всю ширину viewport, на среднем - половину, на большом сжимается до 400 пикселей:

<template>
	<NuxtImg
		src="/cover.jpg"
		width="400"
		height="300"
		sizes="sm:100vw md:50vw lg:400px"
		alt="Cover"
	/>
</template>

При узком viewport модуль готовит файл под полную ширину экрана, а не под полноразмерный исходник из public. На широком мониторе запрашивается вариант около 400 px по правилу lg. Атрибуты width и height по-прежнему задают пропорции в вёрстке; sizes связывает эту область с тем, что реально скачивает браузер.

Сделайте карточку товара, где фото на маленьком экране занимает всю ширину, на среднем половину колонки, а на большом ограничено 320 пикселями, через атрибут sizes.

Сделайте landing с баннером, который на телефоне тянется на 100 viewport width, на планшете на 80 viewport width, а на десктопе не шире 960 px.