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

Posted 2023-03-15

【中文标题】API - iOS 和 Android 的图像尺寸（不同的屏幕尺寸） - 优化

【英文标题】：API - Image Sizes for iOS and Android (Different Screen sizes) - Optimization

【发布时间】：2017-10-20 18:46:55

【问题描述】：

在一个应用程序上工作，该应用程序将各种尺寸的图像显示为网格、列表（Instagram 之类）、占据整个屏幕的图像。

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

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

问题：

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

我们是否需要为每个图像提供多种尺寸？例子。每个图像的网格视图（我们需要 1x、2x 还是 3x）？或者一种尺寸可以服务于所有手机屏幕尺寸，我们可以在代码中设置缩放模式？即使对于较小的屏幕尺寸也可以吗？对于较小的手机尺寸来说，这会是一种糟糕的体验，因为它们需要图像。对我来说，这不是最佳选择，因为像 SE 这样的小型手机没有 iPhone 8 plus 那样的处理能力。

如果我们使用相同的 API 来为 iPhone 和 android 提供服务 - 鉴于 Android 有更多的图像尺寸需要处理，这个 api 怎么能被利用。

任何指导将不胜感激。

【参考方案1】：

前提：

您正在谈论来自网络服务器的图像。不是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，并展示了一些选择正确格式的示例和指南

【讨论】：

是的，我的意思是来自服务器的图像。这说得通。我正在尝试找到有关此的支持文档。对我来说 - 这很有意义，但这是我第一次这样做。

我从 Google 找到了一些文档，将其添加到答案中

这种方法更有意义。因此，对于每种情况——如果它是缩略图或中等大小的图像甚至更大的图像——你会想要有两个版本的图像。为什么因为某些设备不需要更大尺寸的图像 - 您只想加载您为该设备加载的图像。 API 将为每个返回低分辨率和高分辨率 URL。我认为这将涵盖 ios 的大多数情况。你的回答很有道理——我们会看看这在实践中是如何进行的；）谢谢！

【参考方案2】：

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

根据文档，您可以在这里收获很多：

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

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

我没有在 iOS 中使用过这个，但是，看起来也有类似的 solution。

【讨论】：

我听说过基于矢量的图像 - 我从来没有为 iOS 做过。我想知道这将如何处理不是网络视图的东西。我将有像缩略图这样的小图像和用户可以放大和结帐细节的大图像。我会调查谢谢！

【参考方案3】：

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

6 就足够了，因为您可以覆盖几乎所有的屏幕尺寸，就像 google 在 android 中所做的那样。即 ldpi mdpi hdpi xhdpi xxhdpi 和 xxxhdpi

使用 API 处理图片请求，将屏幕尺寸作为参数发送给 api，然后返回生成的图像 width 和 height。例如：对于 800x600 屏幕，发回 400px 版本。

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

【讨论】：

我明白你在说什么 - 如果不需要，我绝对不想使用大图像。这就是为什么您要根据屏幕尺寸加载图像....从 url。

【参考方案4】：

您可以使用 Cloudinary 等第三方图像管理解决方案。

https://cloudinary.com/

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