圆角图像 - 将它们裁剪为圆形还是使用css更好?

时间:2017-05-02 20:25:17

标签: css image performance

假设您在页面上显示大量图像(20+),是否最好使用一组透明背景的png导致圆形图像效果或使用jpgs并使用css舍入图像?

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

选项1 -   图像格式:png具有透明边缘,使图像看起来像圆圈。

选项2 -   图像格式:jpg   四舍五入的图像使用border-radius css属性显示为圆圈。

随意提供见解。当将来询问时,它有助于理解这一点。

1 个答案:

答案 0 :(得分:2)

这完全取决于你所称的“表现”。

如果您正在谈论下载速度:这取决于图像的类型和大小。通常情况下,具有大量细节的更大照片会更好,因为jpgs,图形,边缘锐利的图像以及更小的东西都会更好。

如果你在谈论渲染性能:鉴于你的图像大小相同,无论类型如何,使用border-radii当然在渲染时速度较慢,但​​对于现代浏览器,这应该不是什么大问题。

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

我建议页面上还有其他区域可以以更重要的方式提高性能(等性能javascript,图像延迟加载,高效标记(最小化代码,选择适当的压缩,......)。) / p>