すたすた式
Blogger
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
画像のURLについているs0やs320などの後ろに-rwを付与する方法です。
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を付与
<img alt=""...src="..."
<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として解釈されました。
s0,s320
w-266-h400
rw
w-266-h400-rw または w-266-rw-h400 または rw-w-266-h400
記事公開時点ではGoogleフォト、Googleアーカイブ、パソコンから、いずれの方法でもWebP形式でのアップロードが可能でした。
WebP形式でアップロードした画像が、WebP非対応のはずのIE11で表示されました。
ブログ公開後、WebP形式でアップロードした画像を右クリック - [名前を付けて画像を保存]とするとjpgで保存されるようです。(IE11、Chrome86、Firefox81で確認）
アップロードはできるが、画像はjpgとして解釈（変換？）され表示される。という理解でいますが、自信はありません。。。
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿