サイト内の画像を部分的に順次 webp 対応したい

システムに画像をアップロードした際 webp に変換し
webp がある場合は webp を表示、なければjpgを表示したい

アップロード画像全てを webp にすると問題が起きる

viewファイルで picture タグを利用しないと webp は表示することができないため
全ての画像を webp に変換して、DBに保存するとviewファイル全体の修正が必要になる
image_tagを利用せずと書いて居るのも直す必要がある、非常に辛い。

上記の理由から、DBには jpg のままアップロードしたい。
そうすれば既存の画像表示部分には影響を与えない。

jpgのままDBに保存する
ただし、webpとjpgの両方をS3にアップロードするようにします

あとはviewファイル側で webp があれば webp
なければ jpg を表示するというロジックを書くだけ

webpがあればpictureタグを利用しないといけないため、webp画像があるかどうか判定しなければなりません。

webp に変換しS3にアップロードが成功したファイルに関しては
webp_supported_元ファイル名.jpg 画像をこのようなファイル名で保存します。

あとは view ファイルでファイル名を元に webp 対応して居るか確認した上で出しわけを行います。

<% if user.icon_url.include?("webp_supported_") %>
  <% # picture_tag で webp 画像を表示 %>
  <% else %>
  <% # image_tag で jpg 画像を表示 %>
<% end %>

CloudFront Functions や LambdaEdge　を利用してもう少しスマートにできる方法を模索中です