如何在网络应用程序中渲染多个尺寸的相同图像？

Question

我需要在不同大小的多个页面中显示相同的图像。就像用户照片将在用户列表页面中显示 60x60 像素，而同一张照片将在用户个人资料页面中显示 400x400。此外，产品照片在列表页面中为 100x100 像素，而在产品详细信息页面中为 240x240。如果产品出现在主页上，我还需要 400x400 像素。我很困惑是否：

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

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

提前致谢，

Answer 1

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

您可以使用以下后缀：

user123_64.png

user123_32.png