Phonegap应用程序的图像优化

Question

在iOS上为本机开发优化映像是非常直接的，仅仅为不同的设备和分辨率使用图像目录，但是在Javascript中，优化技术是什么？最好的做法是在不同分辨率下保存一堆相同的图像，并根据设备大小选择最佳图像吗？你如何有效地做到这一点？我正在开发这个应用程序以同时在iOS和安卓上发布，所以我应该如何优化我的映像，使我有最好的质量，同时保持小的应用程序大小和最好的性能？

Answer 1

我不是Phonegap专家，但是AFAIK您使用HTML作为界面。在这种情况下，我认为您应该查找<picture>，特别是子标记<source>及其srcset和media属性。

请参阅MDN：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture的更多内容

Answer 2

如果这些图像类似于图标或其他向量类型的图像，那么使用可伸缩的SVG。

如果它们是PNG或JPG，那么将图像放大，比如1000 50，但是压缩50%。它们大号时看上去很好，而尺寸更小的时候看上去很棒。

此外，如果用户必须向下滚动以查看大量图像，则集成延迟加载图像。在延迟加载时，它们只在进入视图时加载。