为Phonegap应用优化图像

Question

Optimizing images for native development on iOS is pretty straight forward just using image catalogs for the different devices and resolutions but in Javascript what are the optimization techniques? Is it best practice to save a bunch of the same image out at different resolutions and pick the best image based on the device size? How do you go about doing this efficiently? I'm developing this application to release on both iOS and Android so how should I be optimizing my images so that I have the best quality while also maintaining small application size and best performance?

Answer 1

I'm not a Phonegap expert, but AFAIK you use HTML for the interface. In that case, I think you'd look for <picture> , in particular the sub-tag <source> and its srcset and media attributes.

See more at MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Answer 2

If these images are like icons or other vector-type images, then use scalable SVG.

If they are PNG or JPG, then make the images large, like 1000px, but compress 50%. They'll look fine at large sizes and terrific at smaller sizes.

Also, integrate lazy loading of images if the user must scroll down to see a lot of them. With lazy loading, they load only when they are coming into view.