css - 如何在 Web 应用程序中渲染多个尺寸的同一图像？

Question

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

1. 保存同一图像的多个副本(头像)并将它们的地址存储在数据库中。或者
2. 仅保存原始副本并使用 CSS 将它们显示在各处。

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

提前致谢

Answer 1

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

您可以使用像这样的后缀:

user123_64.png

user123_32.png