Vegas2で画像のスライド表示を実装しているサイトのお話。
今回のヘルプ要請は、PageSpeed Insightsで「次世代フォーマットでの画像の配信をせよ」と注意されてるんだけどなんで！？という内容。
WordPressで構築したサイトで、EWWW Image OptimizerというプラグインでWebP表示させているはずなのに…ということですが、ブラウザの開発者ツールで調べてみたところ、確かにスライド表示している画像だけJPEG画像のまま。
あれ、Vegas2ってWebPに対応していないのかな？
いえいえ、そんなことはありません。ただ、EWWWプラグインではVegas2上で指定されているJPEGをWebPに置き換えることができていなかったようです。
さすがにメジャーなブラウザはWebP対応していますし、だったら最初からWebP画像を指定してしまえ！というのが、今回のメモです。
Vegas2について
画像をスライド表示させるためのjQueryプラグインです。
Vegas2のJSファイルとCSSファイルを自サイトに設置し、jQueryで呼び出せば、簡単にスライダーを設置できる優れものです。
公式サイトの右下にある「DOWNLOAD VEGAS x.x.x」の「VEGAS x.x.x」の部分をクリックすると、Vegas2をダウンロードできます。「x.x.x」の部分は最新のバージョン番号が入ります。
もしくは、「FORK IT ON GITHUB」の「GITHUB」の部分をクリックするか、下記リンクに飛ぶと、GitHubからもVegas2をダウンロードすることができます。
動作確認
とりあえずVegas2をWebP画像で動かしてみます。とりあえず動かすだけなので、必要なファイルは全て同じフォルダ（ディレクトリ）に放り込んでください。
ダウンロードしたVegas2のZIP書庫内「vegas-master」→「dist」の中にある「vegas.min.css」と「vegas.min.js」を任意のフォルダにコピー。
同じフォルダに、ファイル名「img01.webp」～「img04.webp」と連番にしたWebP画像をコピー。とりあえず4枚で。
同じフォルダに、下記をvegas2.htmlとして保存。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="vegas.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<script>
jQuery(function($) {
$('body').vegas({
slides: [
{ src: 'img01.webp' },
{ src: 'img02.webp' },
{ src: 'img03.webp' },
{ src: 'img04.webp' },
],
transition: 'fade'
});
});
</script>
<script src="vegas.min.js"></script>
</body>
</html>保存したら、vegas2.htmlをダブルクリックするなり、ブラウザに放り込むなりして表示してみましょう。
画像がフェードしながら切り替わって表示されればOK。
ということで、いろいろなワードで検索してみてもVegas2がWebPに対応しているかどうかが確認できなかったので、実際に自分で試してみました。
結果としては、WebPでも問題なく使えました。
以上、今日のメモはここまで！お疲れ様でした！
…調べ方が甘かったか、そもそも調べるまでもない事だったかな…。
コメント