【楽天】ポイント最大7倍還元中!

JPG・PNGを一気にWebP画像に置き換えてブログを高速化する簡単な方法

4 min
こんな疑問や要望にお答えします
  • ブログの表示スピードが速くなるなら、ぜひ使いたい。
  • WebPウェッピー画像ってどうやって作るの?
  • そもそも「WebP」って何?

スポンサーリンク

WebP(ウェッピー)とは

WebP(ウェッピー)は Google が開発した画像フォーマット。非常に高い圧縮率をほこります。

サイズ(見た目の大きさ)も画質もほとんど同じなのに、とても軽いのです。

参考WebPとは何ですか? なぜそれを使用する必要があるのですか?

ということは・・・

ねね

ねね

ことり

ことり

ブログの表示速度の改善にも役立つに違いありません。

プラグインを使って簡単に、しかも大量の画像を一気に WebP に置き換えてしまいましょう。

初めに読んでおいてほしいこと

この方法は「.htaccess」というファイルに文字列を追記します。

  • 必ずバックアップを取ること
  • あくまでも自己責任で
  • 閲覧されている時点で通じる方法かどうかは保証できません

以上についてご理解いただいた上で実施してくださいね。

失敗するとブログが表示されなくなってしまうので、慎重に。

大まかな流れ

  • プラグイン EWWW Image Optimizer の導入&設定
  • .htaccess の編集
  • 画像の最適化
ことり

ことり

とってもカンタンです。

スポンサーリンク

JPG・PNGをWebP画像に置き換える手順

WordPressダッシュボードでの作業【その1】

  1. STEP

    プラグイン EWWW Image Optimizer をインストール&有効化する

    やり方については省略します。

    他にも画像圧縮系のプラグインを有効化していると、警告が表示される場合があります。

    You have activated multiple image optimization plugins. This may lead to unexpected results. The following plugins were detected:

    【訳】複数の画像最適化プラグインを有効化しました。予期しない結果につながる可能性があります。

    「Compress JPEG & PNG images」などの画像圧縮系プラグインを有効化している場合は停止しておきましょう。

  2. STEP

    EWWW Image Optimizer の「設定」を開く

  3. STEP

    「WebP」タブを開く

  4. STEP

    「JPG, PNG から WebP」にチェックを入れる

  5. STEP

    「変更を保存」をクリック

  6. STEP

    「リライトルールを挿入する」は押さない

    「.htaccess」の最後尾に追記されるせいか、うまく行かないことがあるからです。

  7. STEP

    枠の中身をまるっとコピーする

.htaccess の編集

  1. STEP

    サーバーにログインする

  2. STEP

    対象ドメインを選択する

  3. STEP

    「.htaccess」ファイルを開く

    必ずバックアップを取っておきましょう。

  4. STEP

    先ほどコピーした文字列を「.htaccess」ファイルの一番上に貼り付ける

  5. STEP

    保存する

  1. STEP

    FTPソフトでサーバーにアクセスする

  2. STEP

    対象ドメインのフォルダを開く

  3. STEP

    「.htaccess」ファイルをダウンロードする

    必ずバックアップを取っておきましょう。

  4. STEP

    ダウンロードした「.htaccess」ファイルの一番上に先ほどコピーした文字列を貼り付ける

  5. STEP

    「.htaccess」ファイルをアップロード&上書き保存する

WordPressダッシュボードでの作業【その2】

・・・の前に。

必ず画像のバックアップを取っておきましょう。

  1. STEP

    ダッシュボード > メディア > 一括最適化をクリックして開く

  2. STEP

    「再最適化を強制」にチェックを入れる

  3. STEP

    「最適化されていない画像をスキャンする」をクリックする

  4. STEP

    「〇点の画像を最適化」をクリックする

  5. STEP

    最適化が始まる

ことり

ことり

ここまででおしまい。

スポンサーリンク

確認してみよう

  1. STEP

    確認したい画像のある記事URLにアクセス

  2. STEP

    新しいタブで画像を開く

    1. 画像の上にマウスカーソルを移動
    2. 右クリック
    3. 「新しいタブで画像を開く(I)」をクリック
  3. STEP

    気づいてしまう

    おや?

    ねね

    ねね

    ことり

    ことり

    気づいてしまったようだね・・・。

    試しに開いた画像の URL が「.png」で終わっています。

    さっきまでの作業は失敗に終わったの?

    ねね

    ねね

    ことり

    ことり

    確認しよう。

  4. STEP

    画像をダウンロードして確認する

    確認のため、▼こちらの記事でお伝えした①の方法(ドラッグ&ドロップ)で画像をダウンロードしてみます。

    保存されたファイルの形式は「WebP」だね。

    ねね

    ねね

    ことり

    ことり

    そうなの。

    WordPress のメディアライブラリで見ると「.png」や「.jpg」のままですが、対応ブラウザ上では代替表示されているということです。ご心配なく。

あるある質問にお答えします

Q

画像をアップロードするたびに「最適化」の作業が発生する?

A

いいえ。「EWWW Image Optimizer」が正常に働いてくれている限り、追加の作業は発生しません。

画像をアップロードすると自動的に WebPファイルが生成されます。


Q

未対応のブラウザではどう表示される?

A

サポートされていない場合は元の画像(JPG・PNG)が表示されます。ご安心ください。

現時点で対応しているブラウザは WebP の公式サイトでご確認くださいね。

参考どのWebブラウザーがWebPをネイティブでサポートしていますか?

WebP公式サイトで確認できます。

「▼こちらのページのサポートも読んでね」と WebP の公式サイトでも言ってます。

参考https://en.wikipedia.org/wiki/WebP#Support

※いずれも英語のページです。

実際には「置き換える」というより「代わりに表示される」イメージ。

PNG や JPG形式の画像を WordPress のメディアフォルダにアップロードすると、プラグインが自動的に WebP画像を生成してくれるのです。

そしてユーザーが WebP画像に対応しているブラウザでサイトを閲覧すると、WebP形式の画像が表示されます。

未対応のブラウザで閲覧した場合は、元の画像(PNG や JPG)が表示されます。

おわりに

画像の容量の違いを比較してみました。

フォーマットサイズWebP
PNG4.7 MB245 KB
(94.8%減)
JPG1.26 MB244 KB
(80.6%減)
ことり

ことり

圧縮率の高さは想像以上でした。

画質を落とさず画像の容量を抑え、サクサク快適なページ表示を実現する夢のような次世代画像フォーマットWebP(ウェッピー)

WordPress上の画像を「.webp」形式に変換する簡単で便利な方法をお届けしました。

ぜひトライしてね。

ねね

ねね

関連記事

ことり

ことり

ウェブ上の画像を利用する場合は▼こちらの記事を参考にしてくださいね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スパム対策:日本語が含まれないコメントは無視されます。ご注意ください。