图片相关

[ShannonChenCHN]

• 图片的本质
• 图片的格式
  • PNG
  • JPEG
  • GIF
  • WebP
  • APNG
  • BPG
• 图片编解码
• 移动端的图片下载
• 图片的显示、渲染
• 图片处理
  • 美颜滤镜
  • 贴纸
  • 人脸识别
• 生成图片

[ShannonChenCHN]

延伸阅读：

• UIImage， UIImageView 与图片处理

• Core Image Tutorial: Getting Started

• 移动端图片格式调研

• iOS 处理图片的一些小 Tip

• IOS应用架构思考二（网络图片库）

• Medium 图片加载模式（译）（原文）

• Image Resizing Techniques

• Resize a UIImage the right way

• 图片的显示样式

  • reydanro/UIImageViewAligned
  • sochalewski/UIImageViewAlignedSwift

• Evolution of : Gif without the GIF: Safari 11.1 (including iOS 11.3) lets you replace animated gifs with silent videos (<img src="video.mp4">) for smaller downloads, better decoding performance, and a larger color palette. This post does a great job explaining why this is awesome.

• WebP 相对于 PNG、JPG 有什么优势？

• iOS UIImage与Bytes Pixel之间转换

• 位图 - 维基百科

• 位图和矢量图区别

• iOS图片加载速度极限优化—FastImageCache解析

• SVGKit/SVGKit

[ShannonChenCHN]

WebP 格式

• WebP 相对于 PNG、JPG 有什么优势？

[ShannonChenCHN]

图片拉伸之点九图

什么是点九图

点九图（nine patch）是安卓开发中的概念。
.9.png确实是标准的PNG格式，只是在最外面一圈额外增加1px的边框，这个1px的边框就是用来定义图片中可扩展的和静态不变的区域。

iOS 中提供了 resizableImageWithCapInsets: 方法。

android 的做法的确更全面，比如说内容区域偏上几个像素，偏下几个像素，这些都是可以在图片上标识出来，再比如说一个图片单方向上有两个区域需要拉伸，这些都是ios不能简单实现的，而android的.9做到了。如图所示：

iOS 中的图片拉伸

UIImage 提供了以下几个方法用于图片拉伸。

第一种：

- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;  // iOS 2.0 ~ iOS 5.0

// 左端盖宽度  
NSInteger leftCapWidth = image.size.width * 0.5f;  
// 顶端盖高度  
NSInteger topCapHeight = image.size.height * 0.5f;  
// 重新赋值  
image = [image stretchableImageWithLeftCapWidth:leftCapWidth topCapHeight:topCapHeight];

注意：这个方法只能拉伸1x1的区域。

第二种：

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets; // iOS 5.0 及以后

CGFloat top = 25; // 顶端盖高度  
CGFloat bottom = 25 ; // 底端盖高度  
CGFloat left = 10; // 左端盖宽度  
CGFloat right = 10; // 右端盖宽度  
UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);  
// 伸缩后重新赋值  
image = [image resizableImageWithCapInsets:insets];  

第三种：这种方法可以指定拉伸模式是平铺还是拉伸。

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode; // iOS 6 及以后

CGFloat top = 25; // 顶端盖高度  
CGFloat bottom = 25 ; // 底端盖高度  
CGFloat left = 10; // 左端盖宽度  
CGFloat right = 10; // 右端盖宽度  
UIEdgeInsets insets = UIEdgeInsetsMake(top, left, bottom, right);  
// 指定为拉伸模式，伸缩后重新赋值  
image = [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch]; 

参考

• 关于点九图的介绍及其制作
• Android 所使用的 NinePatch 相对于 iOS 的图像边角拉伸 API 是一个更好的解决方案吗？
• resizableImageWithCapInsets:方法的探析
• iOS图片拉伸技巧 - M了个J

[ShannonChenCHN]

图片编解码

• 图片是如何显示到屏幕上的
• 为什么需要解码？
• 常用的解码方案有哪些？

参考

• 一步一步解码 PNG 图片
• 谈谈 iOS 中图片的解压缩 - 雷纯锋的技术博客
• 图片解码小记
• iOS图片解码实践