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
170
AI Agent Hackathon with Google Cloudに参加して、すごいプロダクトをたくさん見つけたので紹介します🎉
mii9808
2
590
Cloud_Vision_APIで個人情報を隠すサービスを開発しました_.pdf
mii9808
0
410
社内でまちアプの攻略方法をLTしました。
mii9808
0
140
個人開発にNextAuthを実装してハマったこと
mii9808
3
440
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
Raft: Consensus for Rubyists
vanstee
140
7.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Statistics for Hackers
jakevdp
799
220k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Speed Design
sergeychernyshev
32
1.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
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!