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

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

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

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

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

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

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

Пример:

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

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

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

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

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

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