WebP画像をVegas2でスライド表示する

※当サイトでは広告を掲載しています

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でも問題なく使えました。

以上、今日のメモはここまで!お疲れ様でした!

…調べ方が甘かったか、そもそも調べるまでもない事だったかな…。

初稿:2022年10月29日

コメント

タイトルとURLをコピーしました