圆形图像 - 将它们裁剪成圆形或使用 css 更好吗？答案

【问题标题】：Rounded images - is it better to crop them rounded or use css?圆形图像 - 将它们裁剪成圆形或使用 css 更好吗？
【发布时间】：2017-05-03 04:40:34
【问题描述】：

假设您要在页面上显示大量图像（20+），是使用一组具有透明背景的 png 来产生圆角图像效果，还是使用 jpg 并使用 css 圆角图像更好？

我正在尝试显着提高客户网站的性能。纯粹从用户性能方面来说，以下哪个选项可能会提供更好的结果。

选项 1 - 图片格式：带有透明边缘的png，使图片看起来像圆形。

选项 2 - 图片格式：jpg 使用border-radius css 属性将图像四舍五入以显示为圆形。

随时提供见解。将来被问到时有助于理解这一点。

【问题讨论】：

我觉得这将被标记为一个本地化问题，过于具体到 OP 的情况。如果是这样，请找到一种方法来改写我的问题。我认识的很多人都遇到过这个问题，但找不到答案。我觉得这是一个很重要的问题。 CSS 与图像优化。我想要一个一般性的答案。
一个涉及图像的渲染，另一个涉及图像的渲染，浏览器做了很多工作将其裁剪成一个圆圈。你认为哪个更有效率？
@leigero 啊，但它稍微复杂一些。虽然裁剪后的 png 渲染效率更高，但 jpg 文件会更小，因此加载效率更高。
@MrLister 我想，但你必须真正关心微秒，或者加载大量图像才能做到这一点。
@AaronLoften 如果这是针对您想要提高性能的现有网站，我想说您可以轻松进行试验，然后选择最有效的方法。

【解决方案1】：

这完全取决于您所说的“性能”。

如果您谈论的是下载速度：这取决于图片的类型和大小。通常，带有很多细节的较大照片最终会更好，因为 jpg、图形、边缘锐利的图像和较小的东西最好是 png。

如果您谈论的是渲染性能：鉴于您的图像具有相同的大小，无论类型如何，在渲染时使用边框半径当然会更慢，但对于现代浏览器，这应该不是什么大问题。

我认为最大的因素是为您的用例选择正确的图像格式，然后决定是否值得让一个人准备所有具有透明像素的图像，而不是让浏览器完成工作。

我建议页面上的其他区域可以以更显着的方式提高性能（例如高性能 javascript、图像延迟加载、高效标记（最小化代码、选择适当的压缩...）。

【讨论】：