hate HEIC

webにおける画像の扱い方やHEIC形式の変換について書いてます

Transcript

1. shimayuu(Asa) 個人開発における HEIC形式との向き合いかた BEELT#11
2. 大前提：ほとんどのプレビューはピクセル列である 簡単な例 : RGBAの場合 ピクセル ピクセル = 構成する最小の点
3. 大前提：ほとんどのプレビューはピクセル列である Red,Green,Blue,Alphaを8bit(0~255)で表す 一つのピクセル = 8*4 = 32bit =4byteを持つ 縦、横ともに3つずつピクセル 4 * 3 * 3 = 36byte
4. 大前提：ほとんどのプレビューはピクセル列である 3000*1600の写真なら...(単純計算) 4 * 3000 * 1600 = 19200000byte ≃ 18.8MB (1MB = 1024byte)
5. 圧縮とは 圧縮の一例：Run-Length Encoding (RLE)
6. 圧縮とは（可逆圧縮） エンコード デコード ほぼ同じ
7. 見ているものはデコードされたもの ハードウェアレベルだから超速い エディタで見れないのは デコード機能ないから
8. 圧縮とは その他：DCT（離散コサイン変換）、イントラ予測 圧縮手法_WebP_Google for Developers https://developers.google.com/speed/webp/docs/compression?hl=ja 人間は色相よりも輝度に敏感 色相の解像度を下げちゃえ (Chroma Subsampling) そもそも予測できたら良くね？ 分割もっと多かったら良くね？
9. 非可逆圧縮とは 圧縮したら完全な状態には戻せない 違う
10. HEICのアルゴリズム HEVC/H.265 ビデオ圧縮技術 がベース 単純な圧縮効率はHEIC>webP 「HEIF コンテナに HEVC を格納したファイル」であり
11. デコードが遅い、利権の問題で普及しずらかった（昔） https://www.mc-if.org/hollywood-workshop
12. Apple製品における自動補完機能早見表(実験済み) iOS Mac 写真アプリからなら どのブラウザでもjpegに自動変換 ファイルアプリからは送信できる Webkitブラウザ(Safari)はaccept明示で 変換、表示は可能 他のブラウザは変換されず、ブラウザ上 でほとんど表示できない （ファイル自体は受け取れる）
13. なぜ自動変換 @umashiba(umashiba) Webブラウザ、レンダリングエンジン、JavaScriptエンジンの整理&図視化 https://qiita.com/umashiba/items/8cb47825624c5cb043d6 よく見るやつ
14. Webkit なぜ自動変換(iOSの場合) @umashiba(umashiba) Webブラウザ、レンダリングエンジン、JavaScriptエンジンの整理&図視化 https://qiita.com/umashiba/items/8cb47825624c5cb043d6 Appleがwebkit強制 ↓ どのブラウザから でも変換できる
15. 時代の変化 EUで規制解除 Apple Inc. https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/
16. 時代の変化 日本でも新法成立で変わるかも 【スマホソフトウェア競争促進法、2025年12月〜】 BUSINESS LAWYERS 、スマホ競争促進法とは？アプリ提供者への影響を弁護士が解説 https://www.businesslawyers.jp/articles/1422
17. 時代の変化 20xx年問題 HEICユーザーがブラウザの選択へ @umashiba(umashiba) Webブラウザ、レンダリングエンジン、JavaScriptエンジンの整理&図視化 https://qiita.com/umashiba/items/8cb47825624c5cb043d6
18. 時代の変化 考察：あんま変わんなそう ①EUの現状→ほとんど変わっていない ②Appleの言い分もすごく筋が通っている https://www.jftc.go.jp/file/241205_gijiroku_4.pdf　令和６年12月５日（木） スマートフォンにおいて利用される特定ソフトウェアに係る 競争の促進に関する検討会（第４回）議事録
19. どこに刺さるか ・高画質写真管理をする人 ・webKit縛り撤廃を見据えてる人 ・脱獄iOS向けサイトを考えている人
20. 実装編
21. 実装方法一覧 フロント→heic2any→メモリすごい食う 汎用API→cloudflare,cloudinary→高いよ 😭 サーバー→そんなユーザーいる？ サーバーレス→c++ライブラリきついよ
22. 計測時間 EC2でlibvips+libheif(C++)→早すぎる lambdaでsharpライブラリ(libheifをリンク)→面倒
23. 保守性 個人開発において大事なこと 拡張性 料金 1 4 95 : :
24. 現在の設計
25. Docker buildxでもかなりmakeに失敗する libheif libvips libaom x265 libde265 Macだと環境が合わない sharp + 権利の問題でライブラリ にはlibheif関連含まれてないよ
26. Macだと環境が合わない DockerはLinux上だけ MacだとVMの上 ホスト依存も一部有
27. Macだと環境が合わない ならちゃんとLambda環境でビルドしよう libheif libvips libaom x265 libde265 レイヤーだと 256MBまで レイヤー
28. 現在の設計
29. ありがとうございました！ https://www.pamfree.com/