假设您有大量图像要在页面上显示(超过 20 张)，是使用一组具有透明背景的 png 来产生圆 Angular 图像效果，还是使用 jpg 并使用 css 使图像圆 Angular 更好？
我正在尝试显着提高客户站点的性能。纯粹从用户性能方面来说，以下哪些选项可能会提供更好的结果。
选项 1 - 图片格式:png 透明边缘使图像看起来像圆圈。
选项 2 - 图片格式:jpg 使用 border-radius css 属性将图像四舍五入以显示为圆圈。
随时提供见解。这有助于将来询问时理解这一点。
最佳答案
这完全取决于您所说的“性能”。
如果您谈论的是下载速度:这取决于图像的类型和大小。通常，具有大量细节的较大照片最终会更好，因为 jpg、图形、具有锐边的图像和较小的东西更适合 png。
如果您在谈论渲染性能:鉴于您的图像大小相同，无论类型如何，在渲染时使用 border-radii 当然会更慢，但对于现代浏览器，这应该不是什么大问题。
我认为最重要的因素是为您的用例选择正确的图像格式，然后决定让一个人准备所有具有透明像素的图像而不是让浏览器来完成工作是否值得。
我建议页面上的其他区域可以更显着地提高性能(例如高性能 javascript、图像延迟加载、高效标记(最小化代码、选择适当的压缩，...))。
关于css - 圆形图像 - 将它们裁剪成圆形或使用 css 哪个更好？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43746646/