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
180
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
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Code Reviewing Like a Champion
maltzj
526
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
610
A Modern Web Designer's Workflow
chriscoyier
697
190k
We Have a Design System, Now What?
morganepeng
53
7.8k
For a Future-Friendly Web
brad_frost
180
10k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Done Done
chrislema
185
16k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
How GitHub (no longer) Works
holman
315
140k
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!