ios14,Safari14以降からWebP形式の画像が使えるようになりました。記事公開時点でmacOS版Safariはまだ未対応。macOS11 Big Surからのようです。
Partial support in Safari refers to being limited to macOS 11 Big Sur and later. Can I use... Support tables for HTML5, CSS3, etc
PageSpeed InsightsやLighthouseでも「次世代フォーマットでの画像の配信」を勧められる場合があるので、先行記事を参照しながら、-rwを付与する方法と、GoogleフォトなどからWebP形式の画像をアップロードする方法を試してみました。
検証用の猫の画像はこちらのものを使用しています。→Photo by Ramiz Dedaković on Unsplash
-rwを付与
画像のURLについているs0やs320などの後ろに-rwを付与する方法です。
元のURL
<div class="separator" style="clear: both;">
<a
href="https://1.bp.blogspot.com/-AxpWXotLwQ4/X4WfTTlIcoI/AAAAAAAAIn0/6A-ar2EV63M7NO9M5b4PgPgl_3896JLhwCPcBGAsYHg/s4500/webp_test1_ramiz-dedakovic-HrGXXNGg1DA-unsplash.jpg"
style="display: block; padding: 1em 0; text-align: center; "
><img
alt=""
border="0"
height="320"
data-original-height="4500"
data-original-width="3000"
src="https://1.bp.blogspot.com/-AxpWXotLwQ4/X4WfTTlIcoI/AAAAAAAAIn0/6A-ar2EV63M7NO9M5b4PgPgl_3896JLhwCPcBGAsYHg/s320/webp_test1_ramiz-dedakovic-HrGXXNGg1DA-unsplash.jpg"
/></a>
</div>
<img alt=""...src="..."のほうのURL、s320に-rwを付与
<div class="separator" style="clear: both;">
<a
href="https://1.bp.blogspot.com/-AxpWXotLwQ4/X4WfTTlIcoI/AAAAAAAAIn0/6A-ar2EV63M7NO9M5b4PgPgl_3896JLhwCPcBGAsYHg/s4500/webp_test1_ramiz-dedakovic-HrGXXNGg1DA-unsplash.jpg"
style="display: block; padding: 1em 0; text-align: center; "
><img
alt=""
border="0"
height="320"
data-original-height="4500"
data-original-width="3000"
src="https://1.bp.blogspot.com/-AxpWXotLwQ4/X4WfTTlIcoI/AAAAAAAAIn0/6A-ar2EV63M7NO9M5b4PgPgl_3896JLhwCPcBGAsYHg/s320-rw/webp_test1_ramiz-dedakovic-HrGXXNGg1DA-unsplash.jpg"
/></a>
</div>
ブラウザが対応していれば、これだけでも表示はできました。（上の書き方だとクリックしたリンク先はjpgになります。）
ただ、ios14、Safari14以前やIE11のことを考慮するならpictureタグを使うのがいいようです。
<picture>
<source srcset="https//.../s320-rw/.jpg" type="image/webp">
<img src="https//.../s320/.jpg">
</picture>
pictureタグを使用かつ、リンク先に画像を表示させるときは下記のような感じの構造かな？
<div class="separator" style="clear: both;">
<a href="https://...">
<picture>
<source srcset="https://.../s320-rw/....jpg" type="image/webp">
<img src="https://.../s320/....jpg"/>
</picture>
</a>
</div>
pictureタグを使っていろいろやりたいのなら
<picture>
<source srcset="https//.../s320-rw/.jpg" type="image/webp">
<source srcset="https//.../s320/.jpg" type="image/jpg">
<img src="https//.../s320/.jpg">
</picture>
でしょうか。
また、URLがs0,s320などではなくw-266-h400のような場合、下記のように、いずれかの位置に-rwやrwを追加するとWebPとして解釈されました。
w-266-h400-rw
または
w-266-rw-h400
または
rw-w-266-h400
GoogleフォトなどからWebP画像をアップロード
記事公開時点ではGoogleフォト、Googleアーカイブ、パソコンから、いずれの方法でもWebP形式でのアップロードが可能でした。
jpgとして扱われる？
WebP形式でアップロードした画像が、WebP非対応のはずのIE11で表示されました。
ブログ公開後、WebP形式でアップロードした画像を右クリック - [名前を付けて画像を保存]とするとjpgで保存されるようです。(IE11、Chrome86、Firefox81で確認）
アップロードはできるが、画像はjpgとして解釈（変換？）され表示される。という理解でいますが、自信はありません。。。
コメントなし: