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

Question

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

1. 这是我自己的Blog有坏的图标，该标志和菜单图标。他们都是PNG图像。
2. 这是Entrepreneur网站与真棒菜单图标和搜索图标。如果您检查移动网站的检查元素，您会看到搜索图标和菜单图标不是图像（实际上我不知道实际情况）。它使用的是伪元素。它是如何工作的？也许这与质量有关。
3. 与TimeofIndia网站同样如此。这里的菜单图标是使用小时标签制作的，所以它显然很棒，但仍然搜索图标是无法理解的，因为它使用的是伪元素。
4. 而另一种情况与此Business Insider网站的技术有关。我在大多数网站上都能看到它，特别是像Facebook这样的网站。他们为所有图标使用单个图像。这怎么可能？如果您不明白，请访问此网站并检查菜单和搜索图标的图像的URL。它是如何完成的？

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

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

我觉得这些问题太多了。如果能够提供合适的链接以充分理解这些内容，我将不胜感激，如果在这里解释它们并不容易。

谢谢。

Answer 1

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

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

两种常用的方法，使图像酥是：

• SVG（矢量图形 - 因为你已经了解了用户的Illustrator这些技术和光栅图形之间的区别，以及它们为什么很脆，如果不是，谷歌“矢量光栅差异”）
• 2x图像 - 这里的技术是使图像的两倍最终显示大小，然后使用CSS缩小它下降。浏览器内缩放将具有更清晰的结果，仅显示1x图像。
• 将一个以上的图像称为“精灵”。你可以有一个光栅精灵或一个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/