Railsアプリの画像配信最適化 - Imgproxyを活用したパフォーマンス改善事例

Transcript

1. Rails アプリの画像配信最適化 Imgproxy を活用したパフォーマンス改善事例 2025/08/26@AKASHI.rb
2. 自己紹介 活動名 無双（@nishi_okashi ） 普段のお仕事 Super Ramen Engineer
3. 前提情報 BtoBtoC （超簡単に言えば）ホームページ作成サービス エンドユーザーの投稿機能があり、投稿機能一覧画面にはエンドユ ーザーが投稿した画像が多数表示される CarrierWave を利用
4. 画像配信で問題となっていたこと CloudFront の配信コストが高額 画像表示に平均3-4 秒かかっていた 1 画像あたり1-10MB の転送でユーザーのパケットを圧迫
5. なぜ？？
6. オリジナルを配信していた バリデーションは10MB
7. 解決方法 画像サイズを減らす 表示域に合わせたリサイズを行う 品質を調整する フォーマットをWebP に統一
8. どうやって実施する？
9. CarrierWave のサムネイル生成 1. Uploader クラスでサムネイルを宣言 class MyUploader < CarrierWave::Uploader::Base version :thumb do process :resize_to_fit => [300, 300] end end 2. 投稿時にオリジナルとサムネイルがアップロードされる 3. 2 の後に新しくサムネイルを設定した場合は #recreate_versions! で 作成
10. 新しくサムネイルを設定して Rake タスク？？
11. 数が多くて現実的ではない…
12. 動的リサイズ
13. ActiveStorage のVariant で解決！ <%= image_tag @post.image.variant(resize:'300x300').processed %>
14. … したいが移行がちょっと大変そう
15. マネージドサービスを利用する？ Imgix ImageFlux CloudFlare Images
16. コストが気になる…
17. Imgproxy(OSS) というものがありました
18. Imgproxy とは？ Go 言語で実装されたプロキシサーバー Simplicity コードを書かなくていい Speed libvips を利用 Security 実寸サイズのチェック 署名による不正リクエストの防止
19. Simplicity 動かすだけならこれでオッケー docker pull ghcr.io/imgproxy/imgproxy:latest docker run -p 8080:8080 -it ghcr.io/imgproxy/imgproxy:latest
20. Simplicity URL だけで画像変換ができる http://imgproxy.example.com/%signature/%processing_options/plain /%source_url@%extension
21. Simplicity 設定は環境変数のみ # 品質 IMGPROXY_QUALITY="80" # S3の利用設定 IMGPROXY_USE_S3="true" # 許可するS3バケット IMGPROXY_ALLOWED_SOURCES="s3://my-bucket/"
22. Speed libvips はRails ガイドでも早いと紹介されている （とはいえもともとのソースはlibvips のwiki の情報） https://railsguides.jp/active_storage_overview.html ImageMagick は、libvips に比べて知名度が高く普及も進んでいま す。しかしlibvips は10 倍高速かつメモリ消費も1/10 です。 “ “
23. Security （Simplicity と共通するが）受け入れる画像の制限を環境変数だけで 指定可能 # 受け入れる画像の最大解像度 IMGPROXY_MAX_SRC_RESOLUTION="50"
24. 導入の結果 転送量: 1 枚あたり100KB 未満に削減（90% 以上削減） 表示速度: 1 秒未満に削減（70% 以上改善） コスト: CloudFront 配信費を大幅削減
25. その他いいこと 簡単にサムネイルを作ることができるようになった（= デザイン変 更に柔軟に対応が可能になった） サムネイル画像をS3 に保存する必要がなくなった exif 情報を簡単に除去できる
26. まとめ 問題: オリジナル画像配信による高コスト・表示遅延・大容量転送 解決策: Imgproxy(OSS) による動的画像最適化 結果: 90% 以上の転送量削減、70% 以上の速度改善 メリット: 簡単導入・高速処理・柔軟な運用 Imgproxy は画像配信最適化の強力な選択肢です！
27. ありがとうございました