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

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

• Показать ключевые основные свойства продукта/услуги.
• Выделить акценты среди множества характеристик товара.
• Упростить получение информации, сделав её более наглядной, например, преимущества компании или ключевые факты.

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

GIF

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

PNG

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

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

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

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

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

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

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

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

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