ツクリンクで実践している 画像処理

Transcript

1. ツクリンクで実践している
 画像処理

2. 自己紹介 
 なまへ：にしむらてつ
 趣味：スノボ、クライミング、スキューバダイビング
 おしごと：Webエンジニア（ツクリンクでは非機能面の改善を担当）
 好きな言語・技術：Rust, TypeScript, TCP/IP(Routing, Swiching, QoS)
 経歴：ネットワークエンジニア -> Webエンジニア 

3. 今日話すこと - ユーザーが増えてくると小さな要素でも無視できなくなる 
 • ツクリンクでの画像の取り扱い方
 • 画像を取り扱う上で満たすべき要件
 • 画像アップロードの処理の流れ
 • 軽量化について
 • 残っている課題
 • 課題に対してできることがあるとしたら？（検討中）

5. ツクリンクでの画像の使い方 
 建設業者一覧
 プライベートメッセージ 
 Etc.. 
 案件一覧

6. 画像を取り扱う上で満たすべきこと 
 画像アップロードの背景 
 ユーザーはスマートフォンで撮る高画質な写真をそのままアップ ロードする。
 ときにはガチなカメラで撮ったわがまま高解像度の画像のときも... 
 • スマホの場合は特にユーザーの通信量を消費する 
 • 重い画像を一度に複数表示すると表示にリソースを消費する 
 • 端末によってはブラウザのエラーを引き起こす 

7. 画像を取り扱う上で満たすべきこと 
 • 高画質な画像をアップロードされてもよい設計 
 • 複数の画像を一覧表示しても表示に問題のない処理 
 • ユーザーの操作を妨げないUI 

8. 画像を取り扱う上で満たすべきこと 
 • 高画質な画像をアップロードされてもよい設計 
 • 複数の画像を一覧表示しても表示に問題のない処理 
 → 画像の軽量化 
 • ユーザーの操作を妨げないUI 
 → 一時ファイルを用意 

9. AWS Cloud
 CloudFront
 S3
 User(Frontend) 
 Application
 ImageMagick
 Ruby on Rails
 ECS
 ALB
 DB
 画像アップロードの処理の流れ
10. AWS Cloud
 CloudFront
 S3
 Application
 ImageMagick
 Ruby on Rails
 ECS
 ALB
 フォームで画像を選択した時点で 
 S3へアップロードするための1時的な事前署名付きURLをリクエスト 
 DB
 User(Frontend) 
 画像アップロードの処理の流れ
11. AWS Cloud
 CloudFront
 S3
 Application
 ImageMagick
 Ruby on Rails
 ECS
 ALB
 事前署名付きURL（tmpディレクトリ）に 
 画像をアップロードしてURLを取得 
 DB
 User(Frontend) 
 画像アップロードの処理の流れ
12. AWS Cloud
 CloudFront
 S3
 Application
 ImageMagick
 Ruby on Rails
 ECS
 ALB
 FormをSubmitしてImageレコードがcreateされる 
 DB
 Imageレコードがcreate 
 tmpのurlを記録 
 User(Frontend) 
 画像アップロードの処理の流れ
13. AWS Cloud
 CloudFront
 S3
 Application
 ImageMagick
 Ruby on Rails
 ECS
 ALB
 画像の軽量化処理を 
 非同期のActiveJobで実施 
 DB
 User(Frontend) 
 画像アップロードの処理の流れ
14. AWS Cloud
 CloudFront
 S3
 Application
 ImageMagick
 Ruby on Rails
 ECS
 ALB
 DB
 User(Frontend) 
 画像には１時的にtmp画像にCloudFrontでアクセスできるようになる 
 画像アップロードの処理の流れ
15. AWS Cloud
 CloudFront
 S3
 Application
 ImageMagick
 Ruby on Rails
 ECS
 ALB
 Imageレコードを 
 軽量化した画像のURLに更新 
 DB
 User(Frontend) 
 画像アップロードの処理の流れ
16. AWS Cloud
 CloudFront
 S3
 Application
 ImageMagick
 Ruby on Rails
 ECS
 ALB
 DB
 User(Frontend) 
 軽量化した画像にCloudFrontでアクセスできるようになる 
 画像アップロードの処理の流れ
17. 縮小
 メタデータ
 削除
 webp変換
 解像度: 3840px x 2160px 容量: 1,531,760 バイト(1.5MB) 解像度: 1200px x 675px 容量: 111,911 バイト（115 KB） 現在軽量化で実施していること 

18. ImageMagick他にできる軽量化 
 圧縮オプションの調整（jpg）
 
 圧縮前のファイルサイズ: 4,125,951bytes
 圧縮後のファイルサイズ: 1,740,486 bytes
 圧縮率: 42.18%

19. ImageMagick他にできる軽量化 
 色数を減らす
 元の画像サイズ: 4,125,951 bytes
 色数削減後の画像サイズ: 3,664,622 bytes
 圧縮率: 88.82%

20. ImageMagick他にできる軽量化 
 モノクロ化
 元の画像サイズ: 3,664,622 bytes
 色数削減後の画像サイズ: 3,610,114 bytes
 圧縮率: 98.51%
 以外と容量は変わらない 

21. 直面している課題 
 - 一度に多くのユーザーが会社一覧で使用される画像をアップロードすると非常に重 くなる
 - いまのところ確認できていない 
 - サーバーリソースの都合でImageMagickで扱える画像に限界がある
 - フロント側でのバリデーション 
 - 軽量化に失敗した場合はリトライタスクを走らせている 
 
 

22. 他にもできることがあるとしたら？ 
 
 - フロントエンドに最低限の軽量化を任せる
 - JSでも縮小くらいはできそうで、それ以上もwasmできそう 
 - 画像の軽量化プロセスを外部に切り出す
 - 検討したが結構コスト高そうだが、工夫次第 

23. ありがとうございました