Image and Graphics Best Practice
Image and Graphics Best Practice
WWDC 2018
Image Render Pipeline

Image Buffers

If you use the same image, the renderer will reuse the frame buffer.

Pipeline in Action


Downsampling (Solution) 👍



Decoding in Scrollable Views
Use the prefetching, background decoding / downsampling

Avoid thread explosion

Vector Artwork Pipeline

Vector Artwork Optimizations
- Xcode raterizes artwork for relevant scale factors while compiling.
- Prerasterized artwork used when image is drawn at natural size.
- If artwork has fixed sizes, use multiple image assets instead of relying on vector rasterization.
Custom Drawing vs UIImageView
- Do not override UIView.draw() when you make a customized view.
This is an very inefficient way. - Use UIImageView.draw() because ‘Decoded Image’ is better than ‘Backing store’


Backing Store Memory Costs
- Proportional to pixel size of view
- Element size grows to accommodate color range used by drawing
- Setting CALayer.contentsFormat opts out
- Update layerWillDraw(_:) implementations
Reducing Backing Store Use

Drawing Off-Screen
- Use UIGrahpicsImageRenderer to create and draw to an imag buffer
- Supports, Wide Color, unlike UIGraphicBeginContext( )
- Combine with UIImageView for efficient offscreen rendering
- Set prefersExtendedRange on UIGraphicsImageRendererFormat for direct control (new)
- UIImage.imageRendererFormat may offer an intermediate representation (new)
Advanced Image Effects
Core Image
- For realtime effects
- UIImageView renders CIImage efficiently. UIImage.init(ciImage: )
Interfacing with other frameworks
- CVPixelBuffer ( Data → Metal, Vision, Accelerate )
- Use the best initializer — don’t unwind work that’s already been done
- Guard against moving work GPU ↔ CPU
- Ensure buffers are correct format for Accelerate