優化Phonegap應用程序的圖像

Question

爲iOS上的本機開發優化圖像非常簡單直接，只需使用不同設備和分辨率的圖像目錄，但使用Javascript，優化技術是什麼？最佳做法是以不同分辨率保存一堆相同的圖像，並根據設備尺寸選擇最佳圖像？你如何有效地做到這一點？我正在開發此應用程序以便在iOS和Android上發佈，因此我應該如何優化我的圖像，以便在保持小應用程序大小和最佳性能的同時保持最佳質量？

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，那麼使圖像很大，如1000px，但壓縮50％。它們在大尺寸時看起來很好，在小尺寸時也很棒。

此外，如果用戶必須向下滾動才能看到大量圖片，請整合圖片的延遲加載。使用延遲加載時，只有當它們進入視圖時才加載。