通过屏幕宽度创建不同的缩略图尺寸，或者使用最大的缩略图尺寸以获得最大的屏幕尺寸？

Question

我正在构建一个应用程序，其中有一个列表视图和一个地图视图。列表视图有image和info部分，但我在图像缩放时遇到了问题。

这些图像是用户上传自己的图片，他们的列表等。我正在使用AWS Lambda + S3。所以，我可以灵活地修改缩略图的图像缩放比例，可能会创建多维缩略图。

我应该如何缩放这些图像，以便移动/平板电脑，台式机和大型（2k +）显示器可以访问这些图像？我应该从用户上传的图像制作3个或更多分辨率的缩放图像，然后分别使用某种img-sm,img-md和img-lg区分器吗？

感谢

Answer 1

使用img标签与srcset属性。 更多信息：https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

Answer 2

我不会建议通过CSS调整大小。因为无论如何都会在用户的设备上下载大文件，并且与小尺寸的图像相比，加载需要更多时间。

在提供完美大小的图像的情况下，您有两种流行的方法。

一种方法是在用户上载图像后立即在所需的所有维中创建调整大小的图像。

另一种方法是只上传一个大图像，然后通过指定URL参数中的高度&宽度来获得所需的尺寸。它有更多的好处。这将使您可以在未来很方便地改变应用程序的布局。否则，您将不得不再次以新的所需尺寸上传旧图像。

您可以检出ImageKit.io。它具有所有这些特性+优化。