Правильный формат векторных изображений и пиктограмм для сайта

13.04.2020

Правильный формат векторных изображений и пиктограмм для сайта

Пиктограммы — это небольшие векторные, растровые или, даже, текстовые изображения. На страницах сайтов их применяют достаточно широко:

Было: формат GIF или PNG

GIF

Долгое время основным форматом подобных изображения был - GIF (англ. Graphics Interchange Format — формат для обмена изображениями). Им можно пользоваться и сейчас, хотя он и устарел. Он не очень подходил для векторных изображений, но пиктограммы и простые растровые изображения с небольшим набором цветов оптимально было сохранять в нем. Формат отлично помогал сжимать изображения, строки которых имеют повторяющиеся участки. Кроме этого он поддерживал прозрачность фона и покадровую анимацию.

PNG

Позже стало возможно использовать и формат PNG (англ. Portable Network Graphics). Это растровый формат хранения графической информации, использующий сжатие без потерь по алгоритму Deflate. PNG был создан как свободный формат для замены GIF. Многие веб-дизайнеры и веб-мастера полностью или частично перешли на него.

Но с появлением различных устройств отображения, и прежде всего с высоким разрешением (к примеру, дисплеи Ретина от компании Apple) пиктограммы на сайтах, выполненных в формате GIF стали отображаться не очень четко. Появилась "замыленность" и "лесенка". Пример:

Замыленность пиктограмм в формате PNG

Разработчики сайтов, в первое время, придумали действовать так — делать несколько вариантов пиктограмм и показывать их в зависимости от разрешения пользователя. Это было не очень оптимально, так как занимало дополнительное время на создание и подключение.

Стало: формат SVG

Чуть позже появился, а точнее стал без проблем поддерживаться всеми браузерами формат SVG (англ. Scalable Vector Graphics — масштабируемая векторная графика). Это упростило разработку как небольших пиктограмм, так и размещение векторной графики на страницах сайта.

В этом формате достаточно сделать ровно один файл и он корректно будет отображаться на любых устройствах и на любых разрешениях.

Сегодня это самый удобный и популярный формат под такие задачи.

Есть задачи по техподдержке?

Если необходимо сделать подобные пиктограммы или оптимизировать изображения на сайте — смело отправляйте ваши задачи нашим специалистам в техническую поддержку. Все будет выполнено оперативно и за разумную стоимость.

#техподдержка #лендинг #корпоративный #интернет-магазин #вёрстка
Заявка на проект
На Вашу заявку ответим в течении 3-4 часов в рабочие дни с 9:30 до 18:00
Нажимая кнопку отправить, Вы подтверждаете свое согласие с условиями политики конфиденциальности
Напишите нам
На Вашу заявку ответим в течении 3-4 часов в рабочие дни с 9:30 до 18:00
Нажимая кнопку отправить, Вы подтверждаете свое согласие с условиями политики конфиденциальности
Задать вопрос
Задайте Ваш вопрос по созданию, продвижению и поддержке сайтов и мы обязательно свяжемся с Вами
Спасибо!
Задать вопрос