API - 适用于iOS和Android的图像尺寸（不同的屏幕尺寸） - 优化

Question

处理一个应用程序，该应用程序以各种大小显示网格，列表（类似Instagram），占据整个屏幕的图像。

实施例。 - 你可能有一个网格视图图像（不是很大），但同样的图像显示在另一个几乎与整个屏幕大小相同的屏幕上。它就像一个爆炸版本。这些图像也有较小的缩略图。

与后端团队合作，提出最佳解决方案。

问题：

1. 处理不同屏幕尺寸图像的最佳方式是什么？我知道instagram会发送高分辨率低分辨率和缩略图的URL。

2. 每张图片需要多种尺寸吗？例。每个图像的网格视图（我们需要1x，2x或3x）吗？或者一种尺寸可以提供所有手机屏幕尺寸，我们可以在代码中设置比例模式吗？即使是较小的屏幕尺寸，这也可以吗？这对于较小的手机尺寸来说是一种糟糕的体验，因为它们需要图像。对我而言，这并不是最佳选择，因为像SE这样的小型手机不具备与iPhone 8 plus相同的处理能力。

3. 如果我们使用相同的API来为iPhone和Android提供服务 - 考虑到他们有更多的图像尺寸需要处理，这个API如何能够用于Android。

任何指导都会非常感激。

Answer 1

的前提：

  

您正在谈论来自网络服务器的图片。不是svgs，不是界面   图形。这个领域没有官方文件，只是   假设和经验结果。我和我分享了。

     

如果您的意思是界面图形，那么Apple和Google都会提供官方文档。如果你的意思是svgs，它们会自动缩放。如果您打算回答这些问题，请编辑主题或打开新主题

解决方案可能是，而不是仅对图像大小起作用，以改变JPG的质量。

对于所有设备尺寸，分辨率和型号都可以使用全尺寸〜200x~200图像的小缩略图（头像，照片图标），而不会太重。

然后，对于更大的预览/完整图像打开，您可以保持相同的大小（原始的，或您定义的最大大小）但是，使用两个版本的图像：一个具有很少的JPG质量（这样它可以是快速加载，消耗更少的字节并显示图像内容）和另一个具有原始质量（需要加载和字节，但它只按需要显示）。

要选择小缩略图的正确值（~200px），请检查您的拇指大小。如果你的头像泡泡在最小的res上是96x96，那么将它乘以3（96 * 3 = 288）就可以了！ 确实，最小的分辨率屏幕只需要一个96x96的图像，但是，鉴于这些数字很小，差异是不相关的（因为我们讨论的是照片而不是矢量图像，如果你手动缩放或者如果你将缩放保留给设备，结果是一样的。）

我发现了Google的一些文档，其中介绍了有关图像格式以及如何减少下载大小的一些内容：https://developer.android.com/topic/performance/network-xfer.html 他们说使用JPEG，PNG或WebP，并显示一些选择正确格式的示例和指南

Answer 2

您可以使用svg资源（基于矢量的图像）：通过这样做，您不需要为每个分辨率生成资源，只需要1个资源。实时，svg图像将扩展到设备的分辨率。

根据文档，你可以在这里获得很多东西：

  

使用矢量绘图而不是位图可以减小APK的大小   因为可以针对不同的屏幕密度调整相同的文件大小   不损失图像质量

我在Android中使用了它，它解决了Android中的问题。

我没有在iOS中使用它，但看起来也有类似的solution。

Answer 3

你的所有问题几乎都有相同的目标。所以基本上保存6个版本的图像，如50px 100px 200px 400px 800px和1600px等。

6就足够了，因为你可以覆盖几乎所有的屏幕尺寸，比如google在android中的尺寸。这是ldpi mdpi hdpi xhdpi xxhdpi和xxxhdpi

使用API​​来处理图片请求，将屏幕尺寸发送到api作为参数，然后返回结果图像宽度和高度。例如：对于800x600的屏幕，发回400px版本。

如果你不这样做，你将不得不在客户端大小上调整它们的大小，这对性能不利，也不利于IOS中的自动布局。

Answer 4

您可以使用第三方图片管理解决方案，例如Cloudinary。

https://cloudinary.com/

Cloudinary生成不同宽高比的图像，可用于所有类型的设备。