Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新しい画像フォーマットHEIFを 用いたiOSアプリの通信量削減/iosdc-heif
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Taketo Yoshida
September 17, 2017
Programming
6.7k
9
Share
新しい画像フォーマットHEIFを 用いたiOSアプリの通信量削減/iosdc-heif
9/16 10:30 ~ 10:45 Track A で発表した資料です
Taketo Yoshida
September 17, 2017
More Decks by Taketo Yoshida
See All by Taketo Yoshida
Beautiful Japanese line break for the Web
tamanyan
1
510
Source Code Generator for Team Development/code-generator-for-team-development
tamanyan
0
1.7k
How to Design Great Alerts/how-to-design-great-alerts
tamanyan
0
650
iOSエンジニアがReact-Nativeに触れてみた/ios-developer-react-native
tamanyan
0
490
フォーシームのスピン量とその効果/the-effect-of-fourseam-fastball-spin-rate
tamanyan
1
930
Objective-CからSwift移行を始めて感じた事/ObjC-to-Swift
tamanyan
1
1.5k
Modern and Practical Networking in Swift
tamanyan
2
810
まだJPEGで消耗してるの?/iOSDC-Reject-Conference
tamanyan
0
3.1k
SwiftでWebPを使ってみた/melon-swift-webp
tamanyan
1
1.5k
Other Decks in Programming
See All in Programming
第3木曜LT会 #28
tinykitten
PRO
0
100
ドメインイベントでビジネスロジックを解きほぐす #phpcon_odawara
kajitack
3
760
PDI: Como Alavancar Sua Carreira e Seu Negócio
marcelgsantos
0
120
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
masasuzu
0
330
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
hadashia
2
330
ハーネスエンジニアリングとは?
kinopeee
9
4.3k
実践ハーネスエンジニアリング #MOSHTech
kajitack
7
6.5k
LM Linkで(非力な!)ノートPCでローカルLLM
seosoft
0
490
Mastering Event Sourcing: Your Parents Holidayed in Yugoslavia
super_marek
0
150
AI時代のPhpStorm最新事情 #phpcon_odawara
yusuke
0
180
夢の無限スパゲッティ製造機 -実装篇- #phpstudy
o0h
PRO
0
210
セグメントとターゲットを意識するプロポーザルの書き方 〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜
m3m0r7
PRO
0
530
Featured
See All Featured
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.4k
Chasing Engaging Ingredients in Design
codingconduct
0
170
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
エンジニアに許された特別な時間の終わり
watany
106
240k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
210
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
So, you think you're a good person
axbom
PRO
2
2k
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
Leo the Paperboy
mayatellez
7
1.7k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.2k
Transcript
新しい画像フォーマットHEIFを ⽤いたiOSアプリの通信量削減 iOSDC 2017 Sun Sep 16 Taketo Yoshida
2 Taketo Yoshida @TamaObject12 ⽇本経済新聞社のiOSエンジニア ⽇経電⼦版アプリ、紙⾯ビューアーアプリの開発
3 HEIFとは…
4 High Efficiency Image File Format
5 次世代の画像フォーマット
6 WWDC17にてiOS11から HEIFを使⽤できる事が分かりました
7 H.265/HEVCでエンコードされた イントライメージを利⽤している 特徴その1
8 Live Photosなどの シーケンス画像を効率よく保存 特徴その2
9 深度マップや透明度などの 補助データに対応 特徴その3
10 本⽇話す事 HEIFがどのようにmacOSやiOSで使⽤されているか 紙⾯ビューアアプリのHEIFの導⼊実験の話
11 HEIFに触れてみる
iOS11のiPhone7(A10 chip)で写真を撮る
13 PHAssetのrequestContentEditingInput を使ってファイルのパスを取得してみる
// Photo image url: file:///var/mobile/Media/DCIM/102APPLE/IMG_2252.HEIC
15 取った写真はHEIFで保存されています
16 Webにアップロードする時は どうすればいいん?
17 HEIFからJPEGに⾃動で変換されます※ HEIF to JPEG ※ PhotoKitやUIImagePickerControllerを普通に使えば問題ないです
Previewで普通に閲覧できる (なおSafariでは無理な模様)
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
20 ⽇経の朝刊画像をHEIF/WebP/JPEG に変換して⽐べた話
21 その前に紙⾯ビューアーアプリの話を
22 紙⾯ビューアーアプリの歴史 2012年3⽉ リリース 当時は外注開発 JPEG画像で紙⾯配信
内製開発、Swift移⾏ 23 紙⾯ビューアーアプリの歴史 WebP画像で紙⾯配信 サーバレスアーキテクチャが少し話題に 2016年3⽉ リニューアル
24 2016年3⽉ 2012年3⽉ 201?年??⽉ JPEG時代 WebP時代 HEIF時代?
25 HEIF導⼊のために評価を⾏う
26 HEIF/WebP/JPEGでSSIMの値を⾒て同程度の画質に※ 朝刊画像⼀週間分を変換 HEIFの作成はffmpeg, GPAC/MP4Boxを利⽤ ※ SSIMの値が⼤体0.963 ~ 0.998の間に収まるように JPEGとWebPはImageMagickで作成
27 JPEG HEIF HEVC intra image ffmpeg GPAC/MP4Box HEIF作成の流れ
$ 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イントライメージを作成
$ MP4Box -add-image {source.hvc} -ab heic \ -new {output.heic} GPAC/MP4BoxでHEIFを作成する
30 実験結果
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] 朝刊画像の各フォーマットの合計サイズ
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%削減
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%削減
34 JPEGと⽐べて、約50%通信量を削減可能 A9 chip以降ならばハードウェアデコード可能
35 HEIF最⾼や!JPEG、WebPなんて 最初っからいらんかったんや!
36 しかし…
37 商業⽬的でffmpeg, GPAC/MP4Box を使うのは特許使⽤の観点から 正直怪しい IANAL ɹɹɹɹɹɹɹɹ㱸㱸 ɹɹɹɹɹɹʋ ŋТŋ ɹɹţƄŠŖ
ɹɹɹɹɹʘ ʘϊ ɹɹɹɹŊŰ Ŋɹʉ ɹɹɹɹʉ
38 ffmpegなどを使ってHEIF 作成しても商業利⽤できないので 気をつけてくださいね
39 それでも僕はHEIFを使いたいので ⼒技でも実現できるように考えてみました
紙⾯ビューアーアプリ朝刊⾃動ダウンロード 紙⾯画像⽣成
紙⾯ビューアーアプリ朝刊⾃動ダウンロード 紙⾯画像⽣成 これだ!!
42 ※ デバイストークンの管理については⼀度無視 紙⾯画像確認 メタデータ更新 朝刊のページ分 ✕ N 回 SQSに積む
Polling Notifier Download HEIF Encode & Upload 社内のiPhone Cluster Silent Remote Notification 紙⾯画像置き場 ①画像確認 ② ③ ④ ⑤ ⑥
43 ※ デバイストークンの管理については⼀度無視 紙⾯画像⽣成 朝刊のページ分 ✕ N 回 SQSに積む Polling
Notifier Download HEIF Encode & Upload 社内のiPhone Cluster Silent Remote Notification 紙⾯画像置き場 ①画像確認 ② ③ ④ ⑤ ⑥ 取りこぼし防⽌のために⼀つの端末に通知をN回送る スケジューラが何度も起動して反映されてるか確認 iPhoneの台数は朝刊の最⼤ページ数の48個程度⽤意
44 問題点 画像反映スピード システム全体の可⽤性 iPhone爆買いを上に説得すること
45 最後に
46 High SierraとiOS11からHEIFの利⽤が可能 AppleがServerSide-HEIFに対応するのを期待 HEVCやHEIFは特許問題でドロドロしてる 1 2 3
47 ありがとうございました