サイト内の画像を部分的に順次 webp 対応したい
システムに画像をアップロードした際 webp に変換し
webp がある場合は webp を表示、なければjpgを表示したい
アップロード画像全てを webp にすると問題が起きる
viewファイルで picture タグを利用しないと webp は表示することができないため
全ての画像を webp に変換して、DBに保存するとviewファイル全体の修正が必要になる
image_tagを利用せず と書いて居るのも直す必要がある、非常に辛い。
DBにはjpgで保存
上記の理由から、DBには jpg のままアップロードしたい。
そうすれば既存の画像表示部分には影響を与えない。
webpとjpgの両方をS3に上げる
jpgのままDBに保存する
ただし、webpとjpgの両方をS3にアップロードするようにします
あとはviewファイル側で webp があれば webp
なければ jpg を表示するというロジックを書くだけ
webpがあるかどうか判定する方法
webpがあればpictureタグを利用しないといけないため、webp画像があるかどうか判定しなければなりません。
- S3に一度問い合わせて webp 拡張子ファイルがあるかどうか確認する（遅いので却下
- 画像アップロード時に webp 対応のチェックを入れる（画像入稿部分の数だけカラムが増えるから却下
jpgのファイルアップロード時に prefix をつける
webp に変換しS3にアップロードが成功したファイルに関しては
webp_supported_元ファイル名.jpg 画像をこのようなファイル名で保存します。
あとは view ファイルでファイル名を元に webp 対応して居るか確認した上で出しわけを行います。
<% if user.icon_url.include?("webp_supported_") %>
<% # picture_tag で webp 画像を表示 %>
<% else %>
<% # image_tag で jpg 画像を表示 %>
<% end %>
CloudFrontを利用して居るので
CloudFront Functions や LambdaEdge を利用してもう少しスマートにできる方法を模索中です