$30 off During Our Annual Pro Sale. View Details »

新しい画像フォーマットHEIFを 用いたiOSアプリの通信量削減/iosdc-heif

新しい画像フォーマットHEIFを 用いたiOSアプリの通信量削減/iosdc-heif

9/16 10:30 ~ 10:45 Track A で発表した資料です

Taketo Yoshida

September 17, 2017
Tweet

More Decks by Taketo Yoshida

Other Decks in Programming

Transcript

  1. 新しい画像フォーマットHEIFを
    ⽤いたiOSアプリの通信量削減
    iOSDC 2017 Sun Sep 16
    Taketo Yoshida

    View Slide

  2. 2
    Taketo Yoshida
    @TamaObject12
    ⽇本経済新聞社のiOSエンジニア
    ⽇経電⼦版アプリ、紙⾯ビューアーアプリの開発

    View Slide

  3. 3
    HEIFとは…

    View Slide

  4. 4
    High Efficiency Image File Format

    View Slide

  5. 5
    次世代の画像フォーマット

    View Slide

  6. 6
    WWDC17にてiOS11から
    HEIFを使⽤できる事が分かりました

    View Slide

  7. 7
    H.265/HEVCでエンコードされた
    イントライメージを利⽤している
    特徴その1

    View Slide

  8. 8
    Live Photosなどの
    シーケンス画像を効率よく保存
    特徴その2

    View Slide

  9. 9
    深度マップや透明度などの
    補助データに対応
    特徴その3

    View Slide

  10. 10
    本⽇話す事
    HEIFがどのようにmacOSやiOSで使⽤されているか
    紙⾯ビューアアプリのHEIFの導⼊実験の話

    View Slide

  11. 11
    HEIFに触れてみる

    View Slide

  12. iOS11のiPhone7(A10 chip)で写真を撮る

    View Slide

  13. 13
    PHAssetのrequestContentEditingInput
    を使ってファイルのパスを取得してみる

    View Slide

  14. // Photo image url: file:///var/mobile/Media/DCIM/102APPLE/IMG_2252.HEIC

    View Slide

  15. 15
    取った写真はHEIFで保存されています

    View Slide

  16. 16
    Webにアップロードする時は
    どうすればいいん?

    View Slide

  17. 17
    HEIFからJPEGに⾃動で変換されます※
    HEIF to JPEG
    ※ PhotoKitやUIImagePickerControllerを普通に使えば問題ないです

    View Slide

  18. Previewで普通に閲覧できる (なおSafariでは無理な模様)

    View Slide

  19. 19
    HEIF Decode サポート
    iPhone Mac
    Hardware Decode A9 Chip (iPhone 6S, iPad Pro)
    6th Generation Intel Core
    (Skylake family of processors.)
    Software Decode All iOS Devices All Macs
    HEIF Encode サポート
    iPhone Mac
    Hardware Decode A10 Chip (iPhone7) None

    View Slide

  20. 20
    ⽇経の朝刊画像をHEIF/WebP/JPEG
    に変換して⽐べた話

    View Slide

  21. 21
    その前に紙⾯ビューアーアプリの話を

    View Slide

  22. 22
    紙⾯ビューアーアプリの歴史
    2012年3⽉ リリース
    当時は外注開発
    JPEG画像で紙⾯配信

    View Slide

  23. 内製開発、Swift移⾏
    23
    紙⾯ビューアーアプリの歴史
    WebP画像で紙⾯配信
    サーバレスアーキテクチャが少し話題に
    2016年3⽉ リニューアル

    View Slide

  24. 24
    2016年3⽉
    2012年3⽉ 201?年??⽉
    JPEG時代 WebP時代 HEIF時代?

    View Slide

  25. 25
    HEIF導⼊のために評価を⾏う

    View Slide

  26. 26
    HEIF/WebP/JPEGでSSIMの値を⾒て同程度の画質に※
    朝刊画像⼀週間分を変換
    HEIFの作成はffmpeg, GPAC/MP4Boxを利⽤
    ※ SSIMの値が⼤体0.963 ~ 0.998の間に収まるように
    JPEGとWebPはImageMagickで作成

    View Slide

  27. 27
    JPEG HEIF
    HEVC intra image
    ffmpeg GPAC/MP4Box
    HEIF作成の流れ

    View Slide

  28. $ ffmpeg -i {source.png} -y -pix_fmt yuv420p \
    -codec:v libx265 -crf 13 -preset slower \
    -x265-params ssim=1 -f hevc {output.hvc}
    画質測定のためにx265のオプションにSSIMする
    HEIFのHEVCイントライメージを作成

    View Slide

  29. $ MP4Box -add-image {source.hvc} -ab heic \
    -new {output.heic}
    GPAC/MP4BoxでHEIFを作成する

    View Slide

  30. 30
    実験結果

    View Slide

  31. 31
    0
    30
    60
    90
    120
    8/21 8/22 8/23 8/24 8/25 8/26 8/27
    HEIF [MB] WebP [MB] JPEG [MB]
    朝刊画像の各フォーマットの合計サイズ

    View Slide

  32. 32
    0
    30
    60
    90
    120
    8/21 8/22 8/23 8/24 8/25 8/26 8/27
    HEIF [MB] WebP [MB] JPEG [MB]
    朝刊画像の各フォーマットの合計サイズ
    32%削減

    View Slide

  33. 33
    0
    30
    60
    90
    120
    8/21 8/22 8/23 8/24 8/25 8/26 8/27
    HEIF [MB] WebP [MB] JPEG [MB]
    朝刊画像の各フォーマットの合計サイズ
    52%削減

    View Slide

  34. 34
    JPEGと⽐べて、約50%通信量を削減可能
    A9 chip以降ならばハードウェアデコード可能

    View Slide

  35. 35
    HEIF最⾼や!JPEG、WebPなんて
    最初っからいらんかったんや!

    View Slide

  36. 36
    しかし…

    View Slide

  37. 37
    商業⽬的でffmpeg, GPAC/MP4Box
    を使うのは特許使⽤の観点から
    正直怪しい IANAL
    ɹɹɹɹɹɹɹɹ㱸㱸
    ɹɹɹɹɹɹʋ ŋТŋ
    ɹɹţƄŠŖ
    ɹɹɹɹɹʘ ʘϊ
    ɹɹɹɹŊŰ Ŋɹʉ
    ɹɹɹɹʉ

    View Slide

  38. 38
    ffmpegなどを使ってHEIF
    作成しても商業利⽤できないので
    気をつけてくださいね

    View Slide

  39. 39
    それでも僕はHEIFを使いたいので
    ⼒技でも実現できるように考えてみました

    View Slide

  40. 紙⾯ビューアーアプリ朝刊⾃動ダウンロード
    紙⾯画像⽣成

    View Slide

  41. 紙⾯ビューアーアプリ朝刊⾃動ダウンロード
    紙⾯画像⽣成
    これだ!!

    View Slide

  42. 42
    ※ デバイストークンの管理については⼀度無視
    紙⾯画像確認
    メタデータ更新
    朝刊のページ分 ✕ N 回
    SQSに積む
    Polling
    Notifier
    Download
    HEIF Encode & Upload
    社内のiPhone Cluster
    Silent
    Remote
    Notification
    紙⾯画像置き場
    ①画像確認





    View Slide

  43. 43
    ※ デバイストークンの管理については⼀度無視
    紙⾯画像⽣成
    朝刊のページ分 ✕ N 回
    SQSに積む
    Polling
    Notifier
    Download
    HEIF Encode & Upload
    社内のiPhone Cluster
    Silent
    Remote
    Notification
    紙⾯画像置き場
    ①画像確認





    取りこぼし防⽌のために⼀つの端末に通知をN回送る
    スケジューラが何度も起動して反映されてるか確認
    iPhoneの台数は朝刊の最⼤ページ数の48個程度⽤意

    View Slide

  44. 44
    問題点
    画像反映スピード
    システム全体の可⽤性
    iPhone爆買いを上に説得すること

    View Slide

  45. 45
    最後に

    View Slide

  46. 46
    High SierraとiOS11からHEIFの利⽤が可能
    AppleがServerSide-HEIFに対応するのを期待
    HEVCやHEIFは特許問題でドロドロしてる
    1
    2
    3

    View Slide

  47. 47
    ありがとうございました

    View Slide