不同的圖標/徽標技術在網站上如何工作？

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/