API-iOS和Android的圖片大小（不同的屏幕大小）-優化

Question

在一個應用程序上工作，該應用程序將各種大小的圖像顯示為網格，列表（類似於Instagram）和占據整個屏幕的圖像。

例如 -您可能有一個網格視圖圖像（不是很大），但是在另一個屏幕中也顯示了相同的圖像，該圖像幾乎是整個屏幕的大小。 這就像一個炸毀的版本。 這些圖像也有較小的縮略圖。

與后端團隊合作，提出最佳解決方案。

問題：

1. 處理不同屏幕尺寸的圖像的最佳方法是什么？ 我知道instagram發送的是高分辨率，低分辨率和縮略圖的URL。

2. 每個圖像需要多個尺寸嗎？ 例。 每個圖像的網格視圖（我們需要1x，2x還是3x）？ 還是一種尺寸可以滿足所有手機屏幕尺寸，而我們只需在代碼中設置縮放模式即可？ 即使較小的屏幕尺寸也可以嗎？ 對於較小尺寸的手機，這會是不好的體驗，因為它們需要圖像。 對我來說，這不是最佳選擇，因為SE等較小的手機沒有與iPhone 8 plus相同的處理能力。

3. 如果我們使用相同的API來為iPhone和Android服務-鑒於它們需要處理更多圖像大小，那么該api如何成為Android的杠桿。

任何指導將不勝感激。

Answer 1

前提：

您正在談論來自Web服務器的圖像。 不是svgs，不是界面圖形。 該領域沒有正式文件，只是假設和經驗結果。 我在分享我的。

如果要使用界面圖形，則有Apple和Google的官方文檔。 如果您的意思是svg，它們會自動縮放。 如果您希望得到這些答案，請編輯主題或打開新主題

解決方案可以改變JPG的質量，而不是僅作用於圖像大小。

您可以使用高質量的〜200x〜200圖像作為小縮略圖（頭像，照片圖標），這對於所有設備尺寸，分辨率和型號都可以，而且不會太重。

然后，對於較大的預覽/打開的完整圖像，您可以保持相同的尺寸（原始尺寸，或者您定義的最大尺寸），但是要使用兩種版本的圖像：一種版本的JPG質量較低（以便可以快速加載，消耗較少的字節並顯示圖像內容），而另一種具有原始質量（需要加載和字節，但是僅按需顯示）。

要選擇小縮略圖的正確值（約200像素），請檢查較大的拇指尺寸。 如果您的頭像氣泡在最小分辨率上為96x96，則將其乘以3（96 * 3 = 288），您就可以擁有它的大小！ 的確，最小的分辨率屏幕僅需要96x96的圖像，但是鑒於這些數字很小，因此兩者之間的差異並不重要（而且，因為我們是在談論照片，而不是矢量圖像，如果您手動縮放或將縮放比例留給設備，結果是相同的）。

我從Google找到了一些文檔，其中解釋了有關圖像格式以及如何減少下載大小的一些內容： https : //developer.android.com/topic/performance/network-xfer.html他們說要使用JPEG，PNG，或WebP，並顯示一些示例和准則以選擇正確的格式

Answer 2

您可以使用svg資源（這是基於矢量的圖像）：這樣，您無需為每個分辨率生成一個資源，只需要一個資源即可。 實時，svg圖像將擴展到設備的分辨率。

根據文檔，您在這里有很多收獲：

使用矢量繪制而不是位圖可以減小APK的大小，因為可以為不同的屏幕密度調整同一個文件的大小，而不會降低圖像質量

我已經在Android中使用了它，它可以解決Android中的問題。

我還沒有在iOS中使用它，但是看起來也有類似的解決方案 。

Answer 3

您所有的問題幾乎都有相同的目標。 因此，基本上可以保存6個版本的圖片，例如50px 100px 200px 400px 800px和1600px等。

6就足夠了，因為您可以像google一樣在Android中覆蓋幾乎所有屏幕尺寸。 這是ldpi mdpi hdpi xhdpi xxhdpi和xxxhdpi

使用API​​進行圖片請求，將屏幕尺寸發送給api作為參數，然后返回結果圖像的width和height 。 例如：對於800x600的屏幕，請傳回其400px版本。

如果不這樣做，則必須根據客戶端大小調整它們的大小，這對性能不利，對於IOS中的自動布局而言也不利。

Answer 4

您可以使用Cloudinary之類的第三方圖像管理解決方案。

https://cloudinary.com/

Cloudinary生成不同寬高比的圖像，可用於所有類型的設備。