如何在Web应用中呈现多个相同图像的尺寸？

Question

我需要在不同大小的多个页面中显示相同的图像。就像用户照片在用户列表页面中显示60x60px，而同一张照片将在用户配置文件页面中显示400x400。此外，产品照片在列表页面中为100x100px，而在产品详细信息页面中为240x240。如果产品在主页上有特色，我还需要400x400px。我很困惑是否：

1. 保存同一图像的多个副本（头像）并将其地址存储在数据库中。 或
2. 只保存原始副本并使用CSS在任何地方显示它们。

保存图像并有效渲染图像的最佳做法是什么？

提前致谢，

Answer 1

我会以多种尺寸保存图片，因为如果您为所有用户加载列表，则不建议加载大图并使用css调整大小。最好加载更多尺寸较小的图像。

您可以使用如下的后缀：

user123_64.png

user123_32.png