Курс NextJS. 3. Оптимизация шрифтов и изображений / Learning NextJS. Optimizing Fonts & Images

Показать описание

Курс NextJS. 3. Оптимизация шрифтов и изображений / Learning NextJS. Optimizing Fonts & Images

Оптимизация шрифтов (средствами next/font) и изображений (с помощью компонента Image из next/image).
Переключение изображений в зависимости от актуального размера окна браузера (viewport): одно изображение для настольных компьютеров, другое - для мобильных устройств.

Презентацию можно скачать здесь:

Хронометраж

0:00:00 Введение
0:00:40 Целевая аудитория
0:01:14 План работы
0:02:42 Зачем оптимизировать шрифты (с помощью next/font)?
0:03:53 Добавление основного шрифта
0:06:25 Добавление дополнительного шрифта
0:07:56 Зачем оптимизировать изображения (с помощью next/image)?
0:15:34 Полезные ссылки
0:17:01 Подводим итоги сессии
0:28:02 Заключительные замечания.

Timing

0:00:00 Introduction
0:00:40 Target audience
0:01:14 Agenda
0:02:42 Why optimize fonts (with next/font)
0:03:53 Adding a primary font
0:06:25 Adding a secondary font
0:07:56 Why optimize images (with next/image)
0:15:34 Useful links
0:17:01 Session Summary
0:18:02 Closing Comments.

Optimization of fonts (using next/font) and images (using the Image component from next/image).
Switching images depending on the current size of the browser window (viewport): one image for desktop computers, another for mobile devices.

The presentation can be downloaded here: