不同的图标/徽标技术如何在网站上运作？

Question

这主要是关于网站中使用的徽标/图标质量的问题。我使用Illustrator创建徽标/图标，但当我在专业网站上看到图标时（参见图片和链接），它们看起来像文字一样清晰，没有模糊。边缘非常清晰。例如，请参阅此图片，尤其是搜索图标和菜单列表图标：

1. 这是我自己的Blog，其中包含错误的图标，徽标和菜单图标。它们都是 PNG 图像。
2. 这是Entrepreneur网站，其中包含精彩的菜单图标和搜索图标。如果您选中 Inspect Element for mobile 网站，您会发现搜索图标和菜单图标不是图片（我实际上并不了解现实）。它使用伪元素。它是如何工作的？也许这与质量有关。
3. TimeofIndia网站也是如此。这里的菜单图标是使用 hr 标记制作的，所以它显然很棒，但搜索图标仍然无法理解，因为它使用伪元素。
4. 另一种情况与此Business Insider网站的技术有关。我在大多数网站上都看过它，尤其是类似Facebook的网站。他们对所有图标使用单个图像。怎么可能？如果您不明白，请访问此网站并查看菜单的网址并搜索图标的图片。怎么做的？

首先，我想知道这些东西是如何工作的？这些图标如何呈现？

其次，为什么我没有像他们那样获得质量？我应该停止使用像他们这样的图像吗我之所以这样问，是因为我尝试使用Illustrator以多种方式导出，并且要求的尺寸相同，但质量仍然很差。如果您可以在我自己的博客（Blog）移动网站上看到，尽管原始图片在上传之前看起来很棒，但中间水平条仍然模糊不清。那是为什么？

我认为这些问题太多了。如果你能提供合适的链接来完全理解这些东西，我将不胜感激，如果在这里解释它们并不容易。

谢谢。

Answer 1

如果可以，我会给@ marc-b五个upvotes :)第一步，在来到SO之前，应该总是尝试自己解决问题。然后你可以用on-topic question来找我们。在这里，第一步是右键单击您感兴趣的其中一个图标，然后选择＆＃34;检查＆＃34;。

这里有几个问题：制作清晰图像的方法有哪些？以及在一个文件中包含多个图像的处理方式是什么？这两个都非常糟糕，但我会给你一个良好的开端：

使图像清晰的两种常见方法是：

• SVG（矢量图形 - 作为Illustrator用户，您已经了解这些与光栅图形之间的区别，以及为什么它们会变得清脆。如果没有，谷歌＆＃34;矢量光栅差异＆＃34;）
• 2x图像 - 这里的技术是将图像设置为最终显示尺寸的两倍，然后使用CSS将其缩小。浏览器内缩放将获得更清晰的结果，只显示1x图像。
• 将一个以上的图像合二为一，称为＆＃34;精灵。＆＃34;你可以有一个栅格精灵或一个svg精灵。

这里是svg https://css-tricks.com/using-svg/的介绍，这里是spces https://css-tricks.com/css-sprites/的介绍，这里是svg sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/的介绍，以及这是最新内容的介绍，srcset https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/