Как различные технологии значков и логотипов работают на веб-сайтах?

Question

В основном это вопрос о качестве логотипов/значков, используемых на веб-сайтах. Я создаю логотипы/значки с помощью Illustrator, но когда я вижу значки на профессиональных веб-сайтах (см. Изображение и ссылки), они выглядят четкими, как текст, без размытости. Край очень ясен. Например, смотрите изображения, особенно значок поиска и значок списка меню:

1. Это мой собственный Blog, который имеет плохие иконки, то Логотип и значок Меню. Оба они - PNG изображений.
2. Это Entrepreneur сайт с удивительным значок меню и поиск значок. Если вы проверите элемент Inspect для мобильного сайта, вы увидите, что значок поиска и значок меню не являются изображениями (я не знаю, на самом деле, реальность). Он использует элемент pseudo. Как это работает? Возможно, это имеет какое-то отношение к качеству.
3. То же самое верно с TimeofIndia. Здесь значок меню выполнен с использованием hr тега, поэтому, очевидно, это замечательно, но все же значок непонятен, так как он использует элемент.
4. И еще один сценарий связан с этой техникой сайта Business Insider. Я видел это на большинстве веб-сайтов, особенно на Facebook, таких как сайты. Они используют одно изображение для всех значков. Как это возможно? Если вы не понимаете, посетите этот веб-сайт и проверьте адрес меню и значок изображения поиска. Как дела?

Итак, сначала я хотел бы знать, как это работает? Как выглядят эти значки?

Во-вторых, почему я не получаю такое качество, как они? Должен ли я прекращать использование таких изображений? Я спрашиваю об этом, потому что я пытался экспортировать разными способами с помощью Illustrator, с такими же размерами, сколько требуется, но все же качество отстой. Если вы видите, на мобильном сайте моего собственного блога (Blog) средняя горизонтальная полоса размыта, несмотря на то, что исходное изображение выглядит потрясающе перед загрузкой. Почему это?

Я думаю, что это слишком много вопросов. Я был бы признателен, если бы вы могли предоставить подходящие ссылки, чтобы полностью понять эти вещи, если объяснить их здесь непросто.

Спасибо.

Answer 1

Если бы я мог, я бы дал @ marc-b пять upvotes :). Первый шаг, прежде чем прийти к SO, должен всегда пытаться решить проблему самостоятельно. Тогда вы можете прийти к нам с on-topic question. Здесь этот первый шаг - щелкнуть правой кнопкой мыши по одному из значков, которые вас интересуют, и выбрать «проверить».

Здесь есть несколько вопросов: какие способы сделать четкие изображения ?, и что такое сделка с несколькими изображениями в одном файле?Оба эти очень Googlable, но я дам вам фору:

Два распространенных способа сделать изображения хрустящий являются:

• SVG (векторная графика - как пользователь Illustrator вы уже знаете о разница между ними и растровой графикой, и почему они четкие. Если нет, «разность векторов в ракурсе» google
• 2x изображения - техника здесь состоит в том, чтобы сделать изображение в два раза большим размером дисплея, а затем использовать CSS для сжатия это вниз. Масштабирование в браузере будет иметь более четкий результат, просто отображая 1-кратное изображение.
• Наличие нескольких изображений в одном называется «спрайт». У вас может быть растровый спрайт или svg спрайт.

Вот введение в SVG https://css-tricks.com/using-svg/, вот интро спрайтов https://css-tricks.com/css-sprites/, вот введение в SVG спрайтов https://css-tricks.com/svg-sprites-use-better-icon-fonts/, а вот вступление к последней вещи, srcsethttps://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/