css - 网站上的图像网格，我可以使用 CSS 缩小图像吗？

Question

我有很多分辨率约为 500x1500 的图像，我想在我的网站上以网格形式显示所有这些图像。网格中的每张图片应为 200x200 像素。

如果我使用 CSS 将图片从 500x1500 像素缩小到 200x200 像素，并在我的网站上显示 10 张 200x200 像素的图片，这是否意味着访问者必须先下载 500x1500 像素的图片，然后他们的浏览器将图片缩小？

如果是这样的话，那么这样做是一个糟糕的解决方案，对吧？相反，我应该为每张图片设置两个版本，一个 500x1500px 版本和一个 200x200px 版本。我说得对吗？

那么问题是缩小数百张图片的最简单方法是什么？

Answer 1

是的，我认为浏览器会下载较大的图像，然后对其进行缩放。您可以通过打开浏览器上的开发工具(如果您使用的是 Chrome，请按 F12)并在重新加载站点时监控网络流量来自行检查。

缩小数百张图像的最简单方法是查找或编写程序来执行此操作。