Конвертировать SVG в WebP
Превратите векторный файл в WebP точно той ширины в пикселях, которая нужна вашему макету. Это пригодится, если CMS не принимает SVG, для превью в соцсетях требуется растровое изображение или в иллюстрации столько контуров, что браузер отрисовывает ее медленно.
Конвертер изображений
или перетащите сюда файлы JPG, JPEG, JPE … ·
Макс. 95 MB на файл· До 20 файлов· Удаляются через 30 минут
Файлы обрабатываются на наших серверах и удаляются через 30 минут.
При 85 фотографии визуально не отличаются от оригинала. Снижайте значение, только если нужен файл меньше.
JPG, BMP и EPS не поддерживают прозрачность. Прозрачные пиксели заполняются этим цветом.
HEX-код цвета под прозрачными пикселями, например #FFFFFF.
Этот формат хранит только одно изображение. Чтобы сохранить анимацию, выберите GIF или WebP.
Многоразмерная иконка содержит несколько разрешений в одном файле; браузеры и операционные системы выбирают нужное.
Сохраните исходные размеры или укажите одну сторону — пропорции сохранятся.
Размер выбранной выше стороны в пикселях.
Процент от исходных размеров.
sRGB подходит для экранов и веба. Для печати сохраните исходное; оттенки серого убирают цвет.
Только метаданные; 0 сохраняет исходное значение. Это число читают принтеры и некоторые порталы; размеры в пикселях не меняются.
Как пользоваться инструментом
- 1
Загрузите SVG
Добавьте до 20 файлов .svg, экспортированных из Figma, Illustrator, Inkscape или библиотеки диаграмм, по 95 MB каждый.
- 2
Задайте ширину результата
В поле Изменить размер изображения по умолчанию задана ширина 1200 px; укажите вдвое большую ширину, чем та, которую изображение займёт на странице. Качество по умолчанию 90, а для плоских логотипов и значков отметьте Без потерь в разделе Расширенные настройки.
- 3
Конвертируйте в WebP
Нажмите Преобразовать в WebP и скачайте файлы или один ZIP. Прозрачные области остаются прозрачными.
Как конвертировать SVG в WebP нужного размера?
Загрузите SVG, задайте в поле Изменить размер изображения нужную ширину в пикселях (по умолчанию 1200 px) и нажмите Преобразовать в WebP. Вектор отрисовывается заново в этой ширине, поэтому ничего не растягивается и не размывается.
Когда SVG стоит перевести в WebP
SVG стал рекомендацией W3C в 2001 году и подходит для большинства логотипов и значков: это несколько килобайт текста, который остаётся чётким при любом масштабе. Проблемы начинаются, когда файл покидает ваш код. WordPress и многие конструкторы интернет-магазинов не принимают загрузку SVG, превью ссылок в Facebook, LinkedIn и X загружаются как растровые изображения, а дизайнерские программы экспортируют иллюстрации со встроенными растровыми эффектами, из-за которых векторный файл превращается в несколько мегабайт разметки.
WebP, выпущенный Google в 2010 году и поддержанный Safari только в версии 14 в 2020 году, — это растровый формат, созданный для такой задачи: он меньше PNG при том же виде и имеет настоящий альфа-канал. Отрисовка SVG сразу в WebP в итоговом размере позволяет обойтись без привычного обходного пути через большой PNG. Если нужно обратное преобразование, на странице WebP в SVG объясняется, почему в эту сторону требуется трассировка, а не конвертация.
Размеры SVG в WebP для типичных мест на сайте
1200 × 630 px
Превью ссылки Open Graph
Изображение, которое показывается при публикации страницы
1920 × 1080 px
Иллюстрация на всю ширину страницы
Подходит для большинства экранов компьютеров при 1×
1600 × 900 px
Изображение в колонке блога при 2×
Для колонки контента шириной 800 px
400 × 100 px
Логотип в шапке при 2×
Для места под логотип 200 × 50 px
SVG
Scalable Vector Graphics
SVG — векторный формат на основе XML, стандартизированный W3C в 2001 году. Вместо пикселей он описывает фигуры, контуры и текст, поэтому остаётся чётким при любом размере и для логотипов и иконок обычно весит совсем немного. Он поддерживает прозрачность, стили CSS, скрипты и анимацию, и все браузеры отображают его без дополнений. SVG не подходит для фотографий, а сложные иллюстрации могут медленно отрисовываться. Открывать и редактировать его могут Illustrator, Inkscape, Figma и браузеры.
- Сжатие
- –
- Прозрачность
- Да
- Анимация
- Да
- Год появления
- 2001 · W3C
WEBP
Изображение WebP
WebP — формат изображений, выпущенный Google в 2010 году, чтобы веб-страницы загружались быстрее. Он объединяет сжатие с потерями и без потерь, альфа-прозрачность и анимацию в одном формате. Файлы WebP с потерями обычно на 25–35% меньше JPEG сопоставимого визуального качества, а WebP без потерь, как правило, меньше PNG. Его поддерживают все современные браузеры, но некоторые старые настольные программы, сервисы печати и формы загрузки до сих пор его не принимают. Windows, macOS и большинство современных графических редакторов открывают файлы WebP.
- Сжатие
- С потерями или без потерь
- Прозрачность
- Да
- Анимация
- Да
- Год появления
- 2010 · Google
SVG конвертируют в WebP, чтобы получить лёгкое растровое изображение фиксированного размера для мест, которые не принимают векторные файлы или медленно их отрисовывают: CMS, превью в соцсетях, нагруженная посадочная страница. WebP в SVG — это трассировка, а не простая смена формата.
Как SVG растрируется и что проверить
Конвертер считывает собственные width, height и viewBox из SVG, затем отрисовывает все контуры в заданной вами ширине; высота определяется пропорциями. Поскольку рисование выполняется сразу в итоговом размере, тонкие линии и мелкий текст сглаживаются один раз и в правильном масштабе. Если позже увеличивать маленький PNG, результат так чисто не выглядит.
Чаще всего удивляют шрифты. Если в SVG указана гарнитура, которая не встроена и не переведена в кривые, используется запасной шрифт, и длина строк меняется. Переведите текст в кривые в программе дизайна перед экспортом. Внешние изображения, подключённые в SVG по URL, не загружаются, поэтому встройте их или предварительно сведите макет.
Конвертация SVG в WebP: что делать и чего избегать
| Так нужно | Так не нужно |
|---|---|
| Отрисовывайте в 2× от отображаемой CSS-ширины | Конвертировать простые встроенные значки, которые в SVG занимают меньше места |
| Используйте Без потерь для плоских логотипов с малым числом цветов | Отрисовывать в 4000 px для места шириной 600 px |
| Храните исходный SVG для будущих размеров | Отправлять WebP в email-рассылках |
| Подключайте WebP с атрибутами width и height, чтобы избежать сдвига макета | Ждать живого текста: WebP состоит из пикселей, текст в нём нельзя выделить |
Вопросы о конвертации SVG в WebP
Какую ширину в пикселях выбрать при конвертации SVG в WebP?
Возьмите ширину, с которой изображение показывается на странице в CSS-пикселях, и умножьте на два, чтобы оно оставалось чётким на экранах телефонов и ноутбуков с высокой плотностью пикселей. Иллюстрацию в колонке шириной 800 px нужно отрисовать в 1600 px. Масштаб 3× в вебе редко оправдан: файл растёт, а видимый выигрыш невелик.
Что лучше для сайта: WebP или SVG?
Для простых логотипов, значков и диаграмм не нужно: чистый SVG очень мал и остаётся чётким в любом размере, так что оставьте его. WebP выигрывает для сложных иллюстраций с градиентами, фильтрами или тысячами контуров, а также там, где принимаются только растровые изображения, например в превью для соцсетей или в CMS без поддержки SVG.
Сохранится ли прозрачный фон SVG в WebP?
Да. WebP поддерживает полноценный альфа-канал и в режиме с потерями, и без потерь, поэтому области без заливки в SVG остаются прозрачными. Края фигур сглаживаются относительно прозрачности, поэтому выглядят правильно на любом цвете фона.
WebP с потерями или без потерь для векторной графики?
Режим без потерь подходит для плоских логотипов, значков и диаграмм с небольшим числом сплошных цветов: они отлично сжимаются и сохраняют идеально чистые края. Режим с потерями при качестве 85–90 подходит для иллюстраций с градиентами, тенями или текстурами, где файлы без потерь получаются тяжёлыми. Попробуйте оба варианта на одном файле и оставьте тот, что меньше по весу и выглядит чисто.
Почему WordPress не дает загрузить SVG?
WordPress не включает SVG в список разрешённых для загрузки типов, потому что SVG может содержать скрипты. WebP он принимает с версии 5.8, выпущенной в 2021 году, поэтому после конвертации вы получите файл, который медиабиблиотека примет без плагина безопасности. Если сайту нужна настоящая векторная графика, поддержку SVG можно добавить через плагин с очисткой кода.
Можно ли использовать WebP в email-рассылке?
Лучше не стоит. Ряд почтовых клиентов, включая настольный Outlook для Windows, не показывает WebP, а Gmail не отображает SVG. Для рассылок отрисуйте изображение через SVG в PNG.
