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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 HEIFとは…

Slide 4

Slide 4 text

4 High Eﬃciency Image File Format

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

11 HEIFに触れてみる

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

27 JPEG HEIF HEVC intra image ﬀmpeg GPAC/MP4Box HEIF作成の流れ

Slide 28

Slide 28 text

$ 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イントライメージを作成

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30 実験結果

Slide 31

Slide 31 text

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] 朝刊画像の各フォーマットの合計サイズ

Slide 32

Slide 32 text

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%削減

Slide 33

Slide 33 text

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%削減

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

36 しかし…

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

43 ※ デバイストークンの管理については⼀度無視紙⾯画像⽣成朝刊のページ分 ✕ N 回 SQSに積む Polling Notiﬁer Download HEIF Encode & Upload 社内のiPhone Cluster Silent Remote Notiﬁcation 紙⾯画像置き場 ①画像確認 ② ③ ④ ⑤ ⑥ 取りこぼし防⽌のために⼀つの端末に通知をN回送るスケジューラが何度も起動して反映されてるか確認 iPhoneの台数は朝刊の最⼤ページ数の48個程度⽤意

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45 最後に

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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