圓形圖像 - 是否更好地裁剪他們舍入或使用CSS？

假設你有大量的圖像顯示（20+）在一個頁面上，使用一組透明背景導致圓角的圖像效果或使用jpg和使用css圖像四捨五入更好？圓形圖像 - 是否更好地裁剪他們舍入或使用CSS？

我試圖顯着提高客戶端網站的性能。純粹從用戶性能方面來說，以下哪個選項可能會提供更好的結果。

選項1 - 圖片格式：PNG，透明邊緣使圖像看起來像圓圈。

選項2 - 圖像格式：jpg 使用border-radius css屬性舍入爲圓形顯示的圖像。

隨時提供見解。這有助於在將來被問及時瞭解這一點。

我覺得這會被標記爲一個本地化問題，對於OP的情況來說太具體了。如果是這樣的話，請找一個方法來重寫我的問題。很多我認識的人都遇到過這個問題，但找不到答案。我有點覺得這是一個重要的問題。 CSS與圖像優化。我喜歡普遍的答案。 –

嗯，一個涉及渲染圖像，另一個涉及渲染圖像，瀏覽器做了很多工作將其裁剪成一個圓。你認爲哪個更有效率？ – leigero

@leigero啊，但它有一點涉及。雖然裁剪後的png效果更好，但jpg文件會更小，因此加載效率更高。 –

這完全取決於您所稱的「性能」。

如果您在談論下載速度：這取決於您的圖像的類型和大小。通常較大的照片和很多細節最終會更好，因爲jpg，圖形，銳利邊緣和較小的圖像與png相比更好。

如果您正在談論渲染性能：鑑於您的圖像具有相同的大小，無論類型如何，在渲染時使用邊框半徑當然較慢，但對於現代瀏覽器，這應該不是什麼大問題。

我認爲最大的因素是選擇合適的圖像格式爲您的使用情況，然後決定是否值得它有一個人準備使用透明像素，而不是僅僅讓瀏覽器做的工作的所有圖像。

我建議還有其他方面可以提高性能的更重要的方式（如高性能JavaScript，圖像延遲加載，高效的標記（最小化您的代碼，選擇正確的壓縮，...））。

2017-05-02 20:40:34 Christoph

回答