javascript - 网站上的大尺寸图像在手机上呈现

Question

我正在开发一个 Web 应用程序，用于存储和显示给定位置的卫星图像。

我的问题是这些图像非常大(高达 20MB jpg 文件)，这会导致某些移动设备上出现渲染问题。

在某些 Android 手机上，图像分辨率会降低，而在某些 iOS 设备上，图像甚至无法加载。 iOS问题可能被描述为here ，但没有解决方案。

有人有解决此类问题的经验吗？

如果我的问题太广泛，我深表歉意，但我真的只是在寻找一些指示或想法。

我正在使用 jquery/javascript 进行 html/css 开发，服务器由带有 Linux CentOS 机器的 cPanel 托管。

问候佩德。

Answer 1

你基本上有两个选择:

1. 将这些大图像分割成较小的图像并平铺它们(仍然会下载大量数据，但至少客户端可以分块完成)

2. 降低图像分辨率。也就是说，动态地提供客户端实际可以处理的图像质量。

许多 map 网站都会结合使用两者。他们会为您密切关注的区域下载一些高质量的片段，并为您没有密切关注的所有区域下载低质量的片段。