Image and Graphics Best Practice

WWDC 2018

Posted by Den on June 28, 2018 · 7 mins read
Image and Graphics Best Practice

Image and Graphics Best Practice

WWDC 2018

Image and Graphics Best Practice

WWDC 2018

Image Render Pipeline

Image Buffers

Frame Buffer

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

Reuse the frame buffer

Pipeline in Action


Downsampling (Solution) 👍

Downsampling process
Downsampling large images for display at smaller size

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’
UIImageView (Decoded image) vs UIView (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