Размер картинки в Nuxt

Давайте разберём, как указать целевой размер кадра. У компонента NuxtImg есть атрибуты width и height: они задают, сколько места занимает изображение в вёрстке и какой вариант файла должен подготовить модуль. Исходник в public может быть большим, но сервис @nuxt/image отдаст версию ближе к запрошенным пикселям.

На главной выведем обложку с шириной 400 и высотой 300:

<template>
	<NuxtImg
		src="/cover.jpg"
		width="400"
		height="300"
		alt="Cover"
	/>
</template>

Числа в атрибутах не обязаны совпадать с реальными пикселями исходного JPEG: модуль масштабирует картинку на лету. Браузер всё равно резервирует область под 400×300, поэтому макет не прыгает при загрузке. Для других блоков достаточно сменить числа, не переименовывая файл в public.

Выведите логотип на главной через компонент модуля с шириной 200 и высотой 80.

Сделайте промо-страницу с широким баннером из public, у которого в разметке ширина 1200 и высота 300.