Курс NextJS. 3. Оптимизация шрифтов и изображений / Learning NextJS. Optimizing Fonts & Images Оптимизация шрифтов (средствами next/font) и изображений (с помощью компонента Image из next/image). Переключение изображений в зависимости от актуального размера окна браузера (viewport): одно изображение для настольных компьютеров, другое - для мобильных устройств. Презентацию можно скачать здесь:
Поддержать автора:
https://www.donationalerts.com/r/dmit... Хронометраж 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:09:54 Добавление компонента Image (hero-desktop.png) 0:12:37 Добавление компонента Image (hero-mobile.png) 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:09:54 Adding the Image component (hero-desktop.png) 0:12:37 Adding the Image component (hero-mobile.png) 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:
Donate the author:
https://www.donationalerts.com/r/dmit... 