前の記事でwordpressで画像をWebPに対応させるプラグインの使用方法を書いたけど、今回はhtmlに直接記述時の方法です。
「EWWW Image Optimizerの使い方」
コード
<picture>
<source srcset="./images/hogehoge.webp" type="image/webp">
<img src="./images/hogehoge.jpg" alt="hogehoge" loading="lazy" width="00" height="00">
</picture>pictureタグで囲み、sourceタグにWebPの画像。
imgタグにデフォルトの画像を設定する。
これでWebPに対応したブラウザの場合は、WebP画像を。
対応していないブラウザではデフォルトの画像を表示してくれる。
ちなみに loading=”lazy” がいらない時は外して使用しましょう。
width と height は入れておいた方が良いかも。
