如何管理移动应用的图像

Question

我正在从Core Java / OSGi跳到移动领域，对于我的初始项目，我正在整理一个小的Cordova / Famous / Angular应用程序。我想显示一个填充屏幕上半部分的图像（100％宽x 50％高），然后使用在图像之间转换的灯箱。

我很难找到描述管理图片资源最佳做法的资源。
我的一些问题包括：

• 我的假设是您希望将图像标准化为特定大小和目标密度。我应该定位的x尺寸密度组合是什么？
• 由于这是一张背景图片，最好是使用<span>并设置背景图片属性还是使用<img>？
• 如果我想获得镜像效果，上述标签选择如何变化？我应该坚持<img>并设置webkit-box-reflect还是使用其他<span>结合轮换？

这个想法是填补空间，这意味着在某些设备上，水平或垂直边缘可能不可见。最终，我知道最好的答案是找到有用的东西并坚持下去。

哪些可靠资源描述了图像管理的最佳做法，特别是与管理移动设备图像有关？

谢谢，

JD

Answer 1

那里有很多资源。您可以轻松找到许多视频，教程，文章等。

我建议从以下开始。它们涵盖了几乎所有方面，包括图形，性能，直观应用程序的质量。

Apple iOS

了解如何构建Apple客户期望的精美，引人入胜且直观的应用

• https://developer.apple.com/design/
• https://developer.apple.com/accessibility/

<强>的Android

以正确的方式设计和构建应用程序。了解如何在尽可能多的设备上创建看起来很棒且性能良好的应用，从手机到平板电脑等等。

• http://developer.android.com/design/index.html
• http://developer.android.com/guide/practices/index.html

IBM移动解决方案最佳实践

启动新的移动开发项目？这些最佳实践的范围很广，可以帮助您通过前端开发来规划应用程序的体系结构和进度。 （这些做法并非特定于任何特定的Worklight版本。）

• http://www.ibm.com/developerworks/mobile/worklight/best-practices.html

查看与Tips相关的图片。

黑莓

当您遵循最佳做法时，您可以提高应用程序的性能并使其更易于调试和维护。

• http://developer.blackberry.com/html5/documentation/v2_2/best_practices_for_web_development.html

Windows Mobile Apps

• http://msdn.microsoft.com/en-us/library/windows/apps/hh994633.aspx

• http://msdn.microsoft.com/en-us/library/windows/apps/hh202944(v=vs.105).aspx

• http://msdn.microsoft.com/en-us/library/bb677125.aspx

<强>更新

图片优化

Google Developers网站上还有另一个很棒的来源，特定于图像优化。

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization

• 消除和替换图像
• 矢量与光栅图像
• 高分辨率屏幕的含义
• 优化矢量图像
• 优化光栅图像
• 无损与有损图像压缩
• 选择正确的图片格式
• 工具和参数调整
• 提供缩放图像资源
• 图像优化核对表

希望这应该有所帮助。