ミモミデブログ

おい！詐欺師どもだけは絶対ゆるさん！！

サイトを軽量化！WebPで動画設定手順を分かり易く解説

ブログ

サイトの表示速度は、ユーザーエクスペリエンスやSEOにおいて非常に重要な要素です。画像や動画のサイズを軽減することで、ページの読み込み時間を大幅に短縮できます。本記事では、WebP形式を活用して、簡単なステップでサイトを高速化する方法と、画像や動画の貼り付け手順を解説します。

目次

WebPとは？

WebPは、Googleが開発した次世代の画像フォーマットで、高い圧縮率と画質を両立しています。従来のJPEGやPNGに比べてファイルサイズを大幅に削減できるため、サイトのパフォーマンス向上に最適です。

きたっしー
ブログに数秒程度の説明動画貼りたいときYouTubeに動画アップしてリンク貼るっていう手もあるけど3～５秒程度のYouTube動画を大量につくるのも何だかね・・・
ニョロリン
YouTube動画作りとかアップロードも手間かかるけんね。webpやったら手軽に画像も軽量化出来るけん魅力やねー。
このような短い軽量webp動画ファイルをブログに貼れるようになります。
拡大縮小もできます。

WebP設定の大まかな手順

  1. WordPressにwebp対応を可能にするプラグインを入れる。
  2. レンタルしているサーバの.htaccess編集を行う。
  3. mp4などの動画ファイルをwebpファイルに変換する。
  4. 完成したwebpファイルをサーバにアップする。
  5. サーバに保存したwebpファイルのリンクURLを修正してちゃんと表示されるようにする。

WordPressにプラグインを入れる

プラグインの新規プラグインを追加からEWWW Image Optimizerを検索してインストール、有効化したら設定にすすむ。

EWWW Image Optimizerを検索窓で検索して画像赤枠にあるプラグインをインストール有効化します。

左の設定から赤枠のEssentialタブを選択。

webp変換の“ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。”にチェックを入れる。

下の画像のように現在右下に赤いボックスでpngと出ています。

レンタルサーバーで.htaccess編集を行う

今回はエックスサーバーで説明をしていきます。サーバーパネルのホームページから.htaccess編集を選択。

 

webpを設定するドメイン名を選択。

 

そのまま.htaccess編集にすすむ。

 

</IfModule>と# BEGIN WordPressの間に下の文字列をコピーして画像と同じように貼り付ける。

下の文字列プロンプトの意味は簡単にwebp対応ブラウザならwebpファイルを、それ以外はpngやjpegを配信の意味です。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
下の画像のように貼り付けたら確認画面に進んで実行するで保存します。

設定の確認

サーバーの設定が反映されているか確認のためEWWW Image Optimizer設定に戻って先程の赤いボックスpngが緑のボックスwebpになっているか確認します。さきほどサーバー側での設定は即時WordpressのEWWW Image Optimizerにも反映されるので下の画像のようになっていると思います。

mp4などのファイルをwebpファイルに変換

ネットで検索するとmp4からwebpにサイト上で変換してくれるところがいくつか出てきます。何度か試して見ましたがwebp画像ではなくwebp動画の方を上手く処理できるところが見当たらなかったのでmp4を一度gifに変換してそれをwebpに変換するというひと手間を加えます。

わたしく管理人はラッコツールでmp4をgifに変換してそれをコンバーターでwebpに変換しています。

ラッコツール変換
コンバーター

完成したwebpファイルをサーバーに保存

エックスサーバーはwebpファイル処理に対応していないので手動でアップします。

エックスサーバーのファイルマネージャーからアップする方法とプラグインを使った方法、FTPソフトを使った方法などいくつかありますが、今回はプラグインを使った方法で説明します。

File Managerをインストール

WordPressのプラグインから新規プラグインを選んでFile Managerを検索。インストールして有効化します。

webpファイルのアップロード

File Managerを有効化すると左にWP File Managerが出てくるのでそれを選択。右上の言語設定をJapaneseにして以下の通りにフォルダを開く。uploadsの中に2024(西暦2024年)というフォルダがあるのでその中にwebpファイルをドラッグ＆ドロップでアップロードする。

フォルダ

  1. public_html
  2. wp-content
  3. uploads
  4. 2024

 

webpファイルのhtmlを修正

さきほどアップロードしたwebpファイルをブログで読み込めるhtmlに修正していきます。

 

アップロードしたwebpファイルを右クリックで選択、一番したの情報を選択。開いた窓のリンク部分をクリックすると別窓でwebpファイルが開くのでURLをコピーする。

チャットGPTで修正

さきほどコピーしたURLをチャットGPTに貼り付けhtmlを修正する。プロンプトは“ブログで読めるようにhtml修正”で大丈夫です。さきほどのhtmlを貼り付けたら下をスペースひとつ開けてその下にプロンプトを打ち込みます。

チャットGPT

 

完成したコードをブログに貼り付け

チャットGPTで修正したhtmlをコピーしてブログ記事のテキスト側に貼り付ける。

 

ニョロリン
最後に必ずチャットGPTでhtml修正ばせんとwebp動画は見れんとばい！
きたっしー
これしないとブログで表示されないからね！とても大事な設定だからチャットGPTでの修正は忘れないでね☆彡☆彡

まとめ

webpのWordPress設定で分かり易く説明しているサイトが少なかったので今回記事にしてみました。webp対応のレンタルサーバーもまちまちなので非対応の場合はこの記事の手順に沿って進めてください。

エックスサーバーの場合はwebp非対応なのでWordPressのメディアに直接アップできなかったり、サーバーにアップしてもメディアでサムネイル画像が確認出来なかったりと不便な点もありますが、一度webp設定すると使い方はそんなに難しいものではありませんので是非一度チャレンジしてみてください。

ただしwebpがエラーの原因であるような記事もちらほら見かけます。大手レンタルサーバーのエックスサーバーがwebp非対応である点も気になる部分です。webpが出来て長い時間が経過してるにも関わらず非対応には何かそれなりの理由があるのかもしれません。もしwebp設定して以降不具合やエラーが頻繁におこるようなら設定解除も視野に入れておいてくださいね！