在 iOS 上为原生开发优化图像非常简单，只需为不同的设备和分辨率使用图像目录，但在 Javascript 中，优化技术是什么？以不同的分辨率保存一堆相同的图像并根据设备尺寸选择最佳图像是最佳做法吗？你如何有效地做到这一点？我正在开发此应用程序以在 iOS 和 Android 上发布，那么我应该如何优化我的图像，以便在获得最佳质量的同时保持较小的应用程序大小和最佳性能？
【问题讨论】：
标签： javascript image cordova optimization
我不是 Phonegap 专家，但据我所知，您使用 HTML 作为界面。在这种情况下，我认为您会寻找<picture>，尤其是子标签<source> 及其srcset 和media 属性。
在 MDN 上查看更多信息：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
【讨论】：
如果这些图像类似于图标或其他矢量类型的图像，则使用可缩放的 SVG。
如果它们是 PNG 或 JPG，则将图像放大，例如 1000 像素，但压缩 50%。它们在大尺寸时看起来很好，在小尺寸时看起来很棒。
此外，如果用户必须向下滚动才能看到大量图像，请集成延迟加载图像。使用延迟加载，它们仅在它们出现时加载。
【讨论】：