Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Что такое SVG?
SVG (Scalable Vector Graphics) — это формат векторной графики, который позволяет отображать изображения, масштабируемые без потери качества. SVG используется для создания логотипов, иконок, диаграмм и других графических элементов, которые остаются четкими при любом разрешении. Элементы SVG можно анимировать и управлять ими через CSS и JavaScript.
Что такое атрибут alt у тега <img> и почему он важен?
Атрибут alt у тега <img> используется для предоставления текстового описания изображения. Это важно для пользователей, которые не могут видеть изображение, например, для людей с нарушениями зрения или когда изображение не загружается. Также поисковые системы используют этот текст для индексации изображений, что улучшает SEO.
Как сделать тень, падающую по границе изображения?
drop-shadow() — это функция в CSS, используемая для добавления тени к элементам, включая изображения. Она применяется с помощью свойства filter и принимает значения для смещения по оси X, смещения по оси Y, размытия и цвета тени. Эта функция особенно полезна, потому что она позволяет сохранить прозрачные области изображения, создавая естественный и аккуратный эффект тени.
Как вы контролируете повтор изображений с помощью CSS?
Свойство background-repeat позволяет управлять тем, как фоновые изображения повторяются на странице. Его значения могут быть:
repeat (повтор по горизонтали и вертикали),
repeat-x (повтор только по горизонтали)
repeat-y (повтор только по вертикали)
no-repeat (без повторения)
Какое свойство используется для управления прокруткой изображения?
Свойство background-attachment используется для управления прокруткой фонового изображения. Оно определяет, будет ли фоновое изображение прокручиваться вместе со страницей (scroll) или оставаться на месте (fixed).
Какие преимущества и недостатки использования SVG вместо растровой графики в веб-дизайне?
Как настроить Webpack для работы с изображениями?
Как Next.js оптимизирует изображения? (Компонент Image, сжатие, форматы)
Какие способы оптимизации ассетов ты знаешь (видео, изображения, SVG)?
Почему изображения не блокируют построение страницы?
Рейтинг:
2
Сложность:
5
SVG имеет ряд преимуществ перед растровой графикой, таких как масштабируемость без потери качества, небольшой размер файлов и возможность применения стилей через CSS. Однако SVG может быть сложным для представления фотографий и иметь проблемы с производительностью при отображении сложных или детализированных изображений.
Рейтинг:
4
Сложность:
6
Webpack обрабатывает изображения через asset modules или загрузчики, такие как file-loader и url-loader. Можно настроить автоматическое копирование изображений в папку сборки или встроить их как данные base64, если они небольшие.
Рейтинг:
3
Сложность:
6
Компонент next/image автоматически сжимает изображения, конвертирует их в современные форматы (WebP/AVIF), изменяет размеры под нужный макет и lazy load-ит их. Это уменьшает вес страниц и ускоряет их загрузку без усилий со стороны разработчика
Рейтинг:
5
Сложность:
6
Оптимизация ассетов заключается в уменьшении их размера и загрузке только тогда, когда они реально нужны. Для изображений используют сжатие и современные форматы, для видео — кодеки и снижение разрешения, для SVG — очистку и упрощение структуры. Также важны lazy loading и code splitting. Грамотная оптимизация ассетов напрямую улучшает Core Web Vitals. Это базовый навык для production-фронтенда.
Рейтинг:
4
Сложность:
4
Рейтинг:
1
Сложность:
3
Рейтинг:
1
Сложность:
3
Рейтинг:
3
Сложность:
6
Рейтинг:
1
Сложность:
3
Рейтинг:
3
Сложность:
8
