Зачем это нужно?
Для успешной реализации макета важно, чтобы верстальщик понимал различия между векторными и растровыми изображениями, а также знал особенности таких форматов, как SVG, WebP и PNG. Давайте рассмотрим эти аспекты подробнее.
Вектор или растр?
Все просто – вектор растягивается до любых размеров, а растр при увеличении начинает пикселить или размыливаться.
Формат .svg
Векторное изображение в вебе.
Примеры использования SVG:
- Векторные иконки
- Иллюстрации
- Логотипы
Не поддерживает размытие и иногда косит с градиентами – перепроверяйте экспорт в AI.
Формат .jpg
Растровый формат, без прозрачности.
Примеры использования JPEG:
- Фотографии
- Фоновые иллюстрации
- Графика, не требующая прозрачности
Не забудь сделать все в двойном размере, чтобы изображения не пикселили на ретине.
Формат .png
Растровый, поддерживающий прозрачность.
Примеры использования PNG:
- Графика, требующая прозрачности (например, вырезанное фото человека)
- Логотипы с прозрачным фоном
- Иконки для веб-сайтов
Чтобы изображение не пикселило на ретине, нужно делать в двойном размере. Сразу.
Формат .webp
Формат, уменьшающий размер PNG и JPEG.
Примеры использования WebP:
- Вся графика в растровых форматах
- Изображения для веб-сайтов
- Анимации
Поддерживается всеми современными браузерами. Чаще в него переносит сам верстальщик с помощью сборщика, и не нужно делать это вручную.
Заключение
Понимание различных форматов изображений и их особенностей поможет вам эффективно работать с графикой в веб-дизайне. Удачного дизайна!