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

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

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

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

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

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

Пример:

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

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

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

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

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

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

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

#техподдержка

Будем вам полезны

Мы являемся студией полного цикла и готовы предложить вам услуги по созданию, поддержке и продвижению сайтов.
Создание
сайтов
50 000—180 000 ₽
Мы разрабатываем разные сайты: от сайта-визитки до корпоративного сайта с уникальным дизайном или сложного по функционалу интернет-магазина. Каждый проект стараемся выполнить современным, аккуратным и удобным.
Мы занимаемся поддержкой и развитием сайтов и сделаем всё, чтобы ваш сайт выглядел и работал максимально эффективно: это касается улучшений внешнего вида, наполнения и функционала сайта.
Качественная подготовка, настройка, размещение и ведение контекстной рекламы Яндекс Директ и Гугл Реклама: соберем ключевые слова, доработаем сайт, подготовим объявления, настроим и запустим рекламу.
Продвижение сайтов (SEO)от 24 000 ₽ в месяц
Эффективное и качественное продвижение в поисковых системах обеспечит вашему сайту постоянный приток потенциальных клиентов и рост числа онлайн-обращений и телефонных звонков.
Заявка на проект
На Вашу заявку ответим в течении 3-4 часов в рабочие дни с 9:00 до 18:00
Нажимая кнопку отправить, Вы подтверждаете свое согласие с условиями политики конфиденциальности
Напишите нам
На Вашу заявку ответим в течении 3-4 часов в рабочие дни с 9:00 до 18:00
Нажимая кнопку отправить, Вы подтверждаете свое согласие с условиями политики конфиденциальности
Задать вопрос
Задайте Ваш вопрос по созданию, продвижению и поддержке сайтов и мы обязательно свяжемся с Вами
Спасибо!
Задать вопрос