我正在开发一个包含许多菜谱的数据库的应用程序。API是用Django (与Django REST Framework一起编写的)编写的,前端为React。
每个食谱都被赋予一个高质量的形象。在React应用程序中,用户可以在列表视图中看到所有的菜谱及其图像。问题是它们的装载时间太长。我想出的解决方案是为每顿饭存储两张图片。一个是高分辨率的图像,它只在细节视图中加载,而缩略图只是列表视图中显示的图片的一个较小的版本。
你会怎么做?这是最优解吗?还是有一种方法可以缩小已经在前端的图像,而不必将两个图像存储在数据库中?
发布于 2022-06-19 10:37:15
拥有多个不同分辨率的图像是一个非常好的主意。也许2,也许更多,在您的用例中--可能是这2。
向下缩放的问题是,您必须:
第一个占用网络带宽,其余两个占用CPU时间。我敢肯定这三种中的一些是你的瓶颈。如果你缩小了正面图像的比例,那么所有这些都会重复占用资源。
如果您已经知道您需要什么样的解决方案,并且需求不会改变,则只存储这些解决方案。如果没有,则可以存储两个的幂,例如2048x2048、1024x1024、512x512、256x256、128x128。
发布于 2022-06-19 11:01:28
你会遇到的最大问题是带宽。很简单,较大的图像比较小的图像需要更多的字节。为您的列表创建一个缩小的映像有助于节省带宽,直到用户实际选择打开的菜谱。你当时不需要高分辨率的照片。缺点是在数据库中存储更多的字节。很多倍的带宽是值得的。
你可以有几种选择:
底线是,你需要处理照片,唯一的区别是你选择做它的机制。如果您已经准备好异步生成缩略图,那么您确实需要一个占位符图像,直到缩略图准备好为止。
发布于 2022-06-20 14:10:41
有累进图像编码的概念。这实际上是将图像分割成层,其中每个层都包含额外的详细信息。这可以允许先下载质量较低的映像,然后再下载附加的详细信息。与使用单独的缩略图相比,这可以节省一些数据。这种技术可能是一个主要的好处,你想要快速显示一个完整的分辨率图像质量较低,添加更多的细节,因为更多的数据有时间下载。
但是它可能需要一个更复杂的系统,而且一些组件可能不支持渐进编码。因此,使用单独的缩略图可能会更容易。如果全分辨率图像和缩略图之间的大小比很大,那么额外的开销就会很小。
https://softwareengineering.stackexchange.com/questions/439340
复制相似问题