Using and Creating Images in iOS

This talk will cover using images in iOS, from loading from the disk and network efficiently to creating images from scratch in your iOS app. WIth five separate screen resolutions to account for, images can quickly get out of hand, increasing the size of your binary and making it a nightmare to support. We'll look at making stretchable images that can support any resolution, creating thumbnails of large images, and even look at a new library I've created for rendering images on the fly.

Transcript

1. Using Images in iOS
   Jeff Kelley | @SlaunchaMan
   MobiDevDay, May 4, 2013
   Saturday, May 4, 13
   

   View Slide

2. Who Am I?
   Saturday, May 4, 13
   

   View Slide

3. Using Images in iOS
   Saturday, May 4, 13
   

   View Slide

4. Using Images in iOS
   Saturday, May 4, 13
   

   View Slide

5. Why A Talk About Images?
   Saturday, May 4, 13
   

   View Slide

6. iDevice Displays
   Saturday, May 4, 13
   

   View Slide

7. Image Pitfalls
   • One uncompressed Retina iPad image file:
   ~12 MB
   • App Store download limit for non-WiFi
   connections: 50 MB
   • One uncompressed background image for
   all resolutions: ~18 MB
   Saturday, May 4, 13
   

   View Slide

8. Special Images in the
   Bundle
   • Icon Files
   • 29x29 (iPhone Settings)
   • 50x50 (iPad Search Results)
   • 57x57 (iPhone Icon)
   • 58x58 (iPhone Settings, Retina)
   • 72x72 (iPad Icon)
   • 100x100 (iPad Search Results, Retina)
   • 114x114 (iPhone Icon, Retina)
   • 144x144 (iPad Icon, Retina)
   Saturday, May 4, 13
   

   View Slide

9. Special Images in the
   Bundle
   • iTunes Artwork
   • Include as ‘iTunesArtwork’ (no extension)
   for ad-hoc builds
   • now must be 1024x1024
   • Warn your designer!
   • Consider using vector graphics
   Saturday, May 4, 13
   

   View Slide

10. Special Images in the
    Bundle
    • Default Images
    • Display while your app is launching
    • One for each resolution/rotation
    • Separate image for iPhone 5
    • The presence of this image indicates
    whether your app has iPhone 5
    support
    Saturday, May 4, 13
    

    View Slide

11. How can we balance good UIs with image
    sizes?
    Saturday, May 4, 13
    

    View Slide

12. Retina Graphics
    • Everything on an iOS display is measured in
    points, not pixels
    • To get the pixel dimensions of an image,
    multiply scale by size
    • Images created with +imageNamed:
    automatically seek out image files with the
    “@2x” suffix before the extension
    • “image.png” and “image@2x.png”
    Saturday, May 4, 13
    

    View Slide

13. Retina Graphics
    • Tell your designers: design for non-Retina,
    create for Retina
    • Yes, this is hard.
    • Retina graphics must be exactly twice the
    scale—no odd dimensions.
    • Even with drop shadows!
    Saturday, May 4, 13
    

    View Slide

14. Stretchable Images
    • Once you have an image, you can create a
    resizable version that can resize to any
    arbitrary size
    •- (UIImage *)resizableImageWithCapInsets:
    (UIEdgeInsets)capInsets;
    • The inner portion is tiled or stretched
    Saturday, May 4, 13
    

    View Slide

15. Stretchable Images
    Top
    Bottom
    Left Right
    Saturday, May 4, 13
    

    View Slide

16. Demo
    Saturday, May 4, 13
    

    View Slide

17. Animated Images
    • Load individual frames of an animation as
    separate images and cycle through them
    • Can initialize with an array of images or
    with a prefix
    • Up to 1,024 frames
    Saturday, May 4, 13
    

    View Slide

18. Animated Images
    • Creating from a prefix:
    + (UIImage *)animatedImageNamed:(NSString *)name
    duration:(NSTimeInterval)duration;
    • Creating from an array:
    + (UIImage *)animatedImageWithImages:(NSArray
    *)images duration:(NSTimeInterval)duration;
    Saturday, May 4, 13
    

    View Slide

19. Demo
    Saturday, May 4, 13
    

    View Slide

20. Animated Images
    • If you’re really crazy:
    •+ (UIImage *)animatedResizableImageNamed:(NSString
    *)name capInsets:(UIEdgeInsets)capInsets duration:
    (NSTimeInterval)duration;
    Saturday, May 4, 13
    

    View Slide

21. Image Patterns
    • Sometimes you want to make a tiny image
    repeat, such as in a background
    • Create a UIColor object with the image as
    a pattern:
    UIColor *myPatternColor = [UIColor
    colorWithPatternImage:myImage];
    • Great way to save space
    Saturday, May 4, 13
    

    View Slide

22. Demo
    Saturday, May 4, 13
    

    View Slide

23. “We’ll Do It Live!”:
    Rendering with
    CoreGraphics
    Saturday, May 4, 13
    

    View Slide

24. CoreGraphics
    • AKA QuartzCore
    •
    • Allows you to draw graphics yourself as
    opposed to including images
    Saturday, May 4, 13
    

    View Slide

25. Custom View Rendering
    • The easiest path to custom drawing
    • Override -drawRect:
    Saturday, May 4, 13
    

    View Slide

26. Graphics Contexts
    • Graphics contexts, represented by the
    CGContext opaque type, are the thing you
    draw into
    • In -drawRect:, you can get the current
    context with
    UIGraphicsGetCurrentContext()
    Saturday, May 4, 13
    

    View Slide

27. Demo
    Saturday, May 4, 13
    

    View Slide

28. Custom Drawing
    • A view doesn’t always redraw itself
    • Call -setNeedsDisplay to mark it as dirty
    • When marked as dirty, will re-draw in the
    event loop
    Saturday, May 4, 13
    

    View Slide

29. Custom Drawing
    • Can be a performance problem
    • Lots of duplicate rendering effort
    Saturday, May 4, 13
    

    View Slide

30. Problem: Interpolation
    • Images resized in UIImageViews have no
    control over interpolation quality
    • Bad solution: multiple images in the bundle,
    resized to the necessary sizes
    • How can we resize an image with good
    quality?
    Saturday, May 4, 13
    

    View Slide

31. Interpolating with
    CoreGraphics
    • Create a new bitmap graphics context
    • Set its interpolation quality to high
    • Draw the original image into the context
    • Get a new image
    Saturday, May 4, 13
    

    View Slide

32. Demo
    Saturday, May 4, 13
    

    View Slide

33. Image Data
    • CoreGraphics is fun and all, but sometimes
    you need to access pixel data
    • What is pixel data? How is it formatted
    • iOS uses (mostly) RGBA8888 format
    • What the heck does that mean?
    Saturday, May 4, 13
    

    View Slide

34. Color Spaces
    • CGColorSpace opaque type
    • Two main color spaces to worry about:
    • CGColorSpaceCreateDeviceGray()
    • CGColorSpaceCreateDeviceRGB()
    • Defines the number of components
    Saturday, May 4, 13
    

    View Slide

35. Graphics Context
    Options
    CGContextRef CGBitmapContextCreate
    (
    void *data,
    size_t width,
    size_t height,
    size_t bitsPerComponent,
    size_t bytesPerRow,
    CGColorSpaceRef colorspace,
    CGBitmapInfo bitmapInfo
    );
    Saturday, May 4, 13
    

    View Slide

36. Getting Pixel Data
    • Create a buffer of pixel data to draw into
    • We’ll use uint8_t for unsigned 8-bit
    integers
    • Create a bitmap image context
    • Draw the image into the context
    • Voilà!
    Saturday, May 4, 13
    

    View Slide

37. Getting Pixel Data
    • Why didn’t we just ask the image for its
    data?
    • Drawing it into our own context give us a
    mutable version of it
    • We know the color space we’re using
    Saturday, May 4, 13
    

    View Slide

38. Demo
    Saturday, May 4, 13
    

    View Slide

39. Generating Pixel Data
    • Remember before when we made a bitmap
    graphics context with data?
    • Turns out you can pre-fill that data with
    your own pixels
    Saturday, May 4, 13
    

    View Slide

40. Demo
    Saturday, May 4, 13
    

    View Slide

41. Edge Cases
    Saturday, May 4, 13
    

    View Slide

42. Huge Images
    • What do you do if you get an image URL
    and the image is 2GB?
    • How do you fit a super hi-res image on an
    iPhone 3GS screen? Retina iPad?
    Saturday, May 4, 13
    

    View Slide

43. Huge Images
    • Instead of keeping the downloaded bits in
    memory, write them directly to the disk
    • Instead of loading the entire image to resize
    it, use ImageIO to generate a thumbnail
    efficiently
    Saturday, May 4, 13
    

    View Slide

44. ImageIO
    Saturday, May 4, 13
    

    View Slide

45. Demo
    Saturday, May 4, 13
    

    View Slide

46. Huge Images
    • That works well for a static image, but what
    if it’s a .gif?
    • Most apps punt and put it in a UIWebView.
    Then crash when the image is huge.
    • Theoretically we should be able to run a
    2GB .gif on an iPhone 3GS
    • Working on it!
    Saturday, May 4, 13
    

    View Slide

47. Huge Images
    • What if you want to zoom into an image?
    • CATiledLayer to provide individual tiles
    • Have the image already? Cut it up
    beforehand.
    • Downloading the image? Split it up
    dynamically using libjpeg with
    PhotoScrollerNetwork
    Saturday, May 4, 13
    

    View Slide

48. Demo
    Saturday, May 4, 13
    

    View Slide

49. Additional Topics
    • OpenGL
    • CoreImage
    • Vector Graphics
    Saturday, May 4, 13
    

    View Slide

50. AmazeKit
    • Image rendering library for iOS
    • Uses stacked image effects, analogous to
    Photoshop layer styles
    • Renders UI into image, caches heavily
    • Allows for small bundle sizes, rendered-on-
    demand UI
    • Open-Source
    Saturday, May 4, 13
    

    View Slide

51. AmazeKit Example
    Saturday, May 4, 13
    

    View Slide