html - 在 HTML 中加载图像

Question

我们正在做一个html元素。在这个元素中，我们使用了很多图像。请验证以下情况，

场景 1:

• 上传单张图片 (a.jpg)

• 在主页面中，我们正在设置宽度并加载 950x450 尺寸的图像 (a.jpg)。

• 在描述页面中，我们设置宽度并加载 400x200 尺寸的图像 (a.jpg)。

• 在页脚中，我们设置宽度并加载 50x50 尺寸的图像 (a.jpg)。

场景 2:

• 上传不同尺寸的单张图片副本(a_size1.jpg,
  a_size2.jpg)

• 在主页面中，我们正在加载 a_size1.jpg。

• 在描述页面中，我们正在加载 a_size2.jpg。

我们需要遵循哪个场景？为什么？

场景 1:是否存在任何性能问题？场景 2:速度快，但内存空间更大。

Answer 1

场景一:性能有问题吗？

是的。因为在描述和页脚页面中，加载了全尺寸图像。那么带宽就浪费了，加载也会变慢

场景 2:速度快，但内存空间大。

是的，加载图像时速度更快。但成本不是内存空间，而是硬盘空间。只有在请求图像时才将图像加载到内存中。事实上，加载较小尺寸的图像会消耗较少的运行时内存。顺便说一句，你只需要上传一张图片，然后在服务器端，你可以使用一些图片处理库(比如java中的Thumbnailator)来自动生成更小尺寸的图片。