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
HEIC画像って何!?ってところから実装まで
Search
mii
August 19, 2025
0
170
HEIC画像って何!?ってところから実装まで
HEICってなんだよ〜〜〜〜
mii
August 19, 2025
Tweet
Share
More Decks by mii
See All by mii
Zennの記事からLTスライドを爆速で生成してみた!
mii9808
0
160
AI Agent Hackathon with Google Cloudに参加して、すごいプロダクトをたくさん見つけたので紹介します🎉
mii9808
2
570
Cloud_Vision_APIで個人情報を隠すサービスを開発しました_.pdf
mii9808
0
410
社内でまちアプの攻略方法をLTしました。
mii9808
0
140
個人開発にNextAuthを実装してハマったこと
mii9808
3
440
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
71
11k
Fireside Chat
paigeccino
40
3.7k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Transcript
⿑藤 夢実 HEIC画像って何!? ってところから 実装するまでの流れ
⾃⼰紹介 01 ⽬次 実装までの流れ 03 HEICって何? 02 苦労したところ 04 さいごに
05
⾃⼰紹介 01
⾃⼰紹介 名前: ⿑藤夢実 08 仕事: フロントエンドエンジニア 趣味: 美術館巡り‧ハンドメイド‧ゲーム(最近はDQ5)
10MBまで PC:Chrome/Safari スマホ:iOS/Android Next.js 画像の許容 アプリの要件 環境の許容 実装 いろいろお話しする前に.....
HEICって何? 02
HEICって何? アプリにアップロードした画像が表⽰されない!! ↓ .heicという拡張⼦.....HEIC画像??? HEICとの出会い
HEICって何? じゃあ、表⽰させよう!!
Appleが作った 独⾃の画像 ⾼画質 ⼩容量 iOS標準 HEIF 国際規格のこと HEIC(ヘイク)とは? HEICって何? HEICの特徴
HEIF(ハイフ)とは? HEIC この規格を元に作 られたもの HEICがなんなのか調べてみよう!
環境差の調査 環境別表⽰表
環境差の調査 Safari以外は、<img src="..."> で読み込んでも何も表示ない .... しかも、Next/imageがHEICに対応していない.....
そのまま HEIC画像が表示 acceptの画像形式に 自動的に変換 環境差の調査 JPEG画像に ⾃動的に変換 macOS Safari iOS
Safari inputのaccept属性でheicが記載されているかどうか 記載関係なく 記載されている 記載されていない
実装までの流れ 03
⽅針の決定 許容 判断材料 対象ユーザーにiOSを使⽤する⼈が多いかどうか iOSデフォルトで設定されていることがあるので、多くの写真が⾮対応になってしまうかも ⾮対応 実装コスト: 低 ユーザー体験: 落ちる
実装コスト: ⾼ ユーザー体験: ◎ JPEGに変換する
変換する場所の決定 フロントエンド バックエンド 判断材料 プレビュー画像を表⽰する必要があるかどうか
変換で検討したライブラリ 許容 heic2anyは実装できませんでした 10MGの画像だと変換されない可能性があるという記事を⾒た heic2any Canvas+heic-decode
変換に使⽤したライブラリ 無事にCanvas+heic-decodeでJPEGに変換する処理ができました🎉
苦労したところ 04
苦労したところ カラーノイズ + Live Photos + ⼿ぶれ→MAX7MB
苦労したところ 環境ごとに異なるため 今⾃分が何をやっているのか、検証も多く分からなくなる
さいごに 05
さいごに HEIC画像は、⼀般的には変換せずに⾮対応にすることが多いので あまり記事がなく、実装に苦労しましたが、無事に実装できてよかったです。 もし、⾃分がアプリを作っている時にHEIC画像にであったら 今⽇のLTを思い出して参考にしてくださると嬉しいです。
Thank you!