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
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Statistics for Hackers
jakevdp
799
220k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Designing for humans not robots
tammielis
254
25k
A Modern Web Designer's Workflow
chriscoyier
697
190k
A Tale of Four Properties
chriscoyier
160
23k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Bash Introduction
62gerente
615
210k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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!