В чём разница между векторной и растровой графикой
Растровое изображение состоит из сетки точек, у каждой из которых свой цвет. Чем больше размер и детальнее картинка, тем больше файл, а при увеличении качество падает: проявляются квадраты. Векторное изображение описывается формулами: линии, кривые, заливки. Такой рисунок можно растянуть до любого размера без потери резкости, а его файл обычно небольшой, если рисунок простой. Формат SVG хранит вектор в виде текста на языке разметки, поэтому его можно сжимать, править вручную и вставлять прямо в страницу.
Вывод для сайта: SVG подходит для того, что нарисовано (логотипы, значки, схемы), а растр — для того, что снято (фотографии) или сложно закрашено.
Какой формат выбрать
| Формат | Подходит для | Плюсы | Ограничения |
|---|---|---|---|
| SVG | Логотипы, значки, схемы, простые иллюстрации | Не теряет качества при масштабе; маленький вес; можно стилизовать | Плохо подходит для фотографий; нужна проверка содержимого |
| JPEG | Фотографии без прозрачности | Хорошее сжатие фото | Нет прозрачности; при сильном сжатии появляются артефакты |
| PNG | Скриншоты, графика с прозрачностью и резкими краями | Без потерь, есть прозрачность | Большой вес у фото |
| WebP | Фото и графика, замена JPEG и PNG | Меньше вес при том же качестве | Нужен запасной вариант для очень старых браузеров |
| AVIF | Фото, где важен минимальный вес | Очень сильное сжатие | Дольше кодируется; поддержка зависит от браузера |
| GIF | Короткие простые анимации | Работает везде | Большой вес, мало цветов; для анимации лучше видео |
Подробнее о подготовке размеров и настройках сжатия — в статье оптимизация изображений.
Как принять решение
Влияние на скорость
- Тяжёлые растровые картинки — самая частая причина медленной загрузки страницы и плохих показателей скорости.
- Правильный SVG весит меньше растра и не требует нескольких версий для экранов с разной плотностью пикселей.
- Сложный SVG с тысячами узлов (например, экспорт из иллюстратора без оптимизации) может весить больше фото и тормозить отрисовку.
- Для растра задавайте размеры в атрибутах
widthиheight, чтобы страница не смещалась при загрузке: смещения макета. - Ниже первого экрана включайте отложенную загрузку: ленивая загрузка без вреда для индексации.
Как подключать SVG
<!-- 1. Как обычную картинку: кешируется, но не стилизуется снаружи -->
<img src='/assets/img/logo.svg' alt='Транслит Яндекс' width='160' height='40'>
<!-- 2. Прямо в страницу: можно менять цвет стилями, нет отдельного запроса -->
<svg viewBox='0 0 24 24' width='24' height='24' role='img' aria-label='Поиск'>
<circle cx='11' cy='11' r='7' fill='none' stroke='currentColor' stroke-width='2'/>
<line x1='16' y1='16' x2='21' y2='21' stroke='currentColor' stroke-width='2'/>
</svg>
<!-- 3. Фото: несколько форматов и запасной вариант -->
<picture>
<source srcset='/assets/img/foto.webp' type='image/webp'>
<img src='/assets/img/foto.jpg' alt='Офис компании' width='800' height='450' loading='lazy'>
</picture>Первый способ подходит для логотипа, второй — для значков, цвет которых должен меняться вместе с темой сайта, третий — для фотографий. Не встраивайте в страницу большие SVG-иллюстрации целиком: они увеличивают размер HTML и не кешируются отдельно.
Индексация и доступность
- Задавайте
altдля значимых изображений и оставляйте его пустым у декоративных; для встроенного SVG используйтеrole='img'иaria-label. - Давайте файлам понятные имена: транслитерация в именах изображений.
- Чтобы картинки попадали в поиск по изображениям, подключите карту и разметку: карта сайта для изображений.
- Тексты внутри изображений робот читает хуже, чем обычный HTML: важные слова выносите в текст страницы.
Безопасность загружаемого SVG
Файл SVG — это разметка, и в неё можно вставить скрипт. Если сайт позволяет пользователям загружать SVG (аватары, вложения), такой файл может выполнить код при открытии напрямую. Поэтому:
- не разрешайте загрузку SVG от посторонних, пока не настроена очистка содержимого;
- удаляйте из файлов теги
script, обработчики событий и внешние ссылки; - отдавайте загружаемые файлы с отдельного домена или с ограничивающими заголовками: заголовки безопасности.
Правило. Значки и логотипы — в SVG, фотографии — в WebP или JPEG с запасным вариантом, скриншоты — в PNG или WebP. У каждого изображения должны быть размеры, понятное имя и alt.
Частые вопросы
Что лучше для логотипа: SVG или PNG?
Как правило, SVG: он остаётся резким на любом размере и экране и обычно весит меньше, если логотип простой.
Индексируется ли SVG поисковыми системами?
Да, но надёжнее подключать его как изображение с alt и давать важные слова обычным текстом на странице.
Опасен ли SVG, загруженный пользователем?
Он может содержать скрипты, поэтому чужие SVG нужно очищать или не разрешать, а загруженные файлы отдавать с ограничивающими заголовками.
Готовый адрес можно собрать прямо сейчас: откройте генератор ЧПУ — он транслитерирует фразу по таблице Яндекса, уберёт служебные слова и покажет длину адреса.