キーワード...ちゃんと選んでる?

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

WebPフォーマットの画像をダウンロード保存する方法はこちらの記事に書きました。

ウェブ上のWEBP画像をJPG・PNG形式に変換してダウンロードする方法ウェブ上のWebP画像をJPG・PNG形式に変換してダウンロードする方法

「WebP〔ウェッピー〕」はGoogleが開発した画像フォーマット。画質を落とさず26%もサイズダウンできるものでございます。

ということは、表示速度の改善にも一役買ってくれるに違いありませんね。

ブログの表示スピードが速くなるなら、ぜひ使いたい。

対応してるソフトがほとんどないって聞いたけど?

えっ?  じゃあどうやってWordPressで使うの?

そんな声が聞こえてきそうです。

そんなわけで、この記事ではブログの画像をWebPに置き換える方法について書きました。

ねね

しかも一気に。簡単に。

運用歴が長くなると画像の数も多くなります。全ての画像を貼り替えるのはかなり面倒な作業。

でも、プラグインを使えば、既にあなたのブログに表示されている画像も一気にパパッと貼り替えられます。

ことり

サクッと片付けてしまいましょう。

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

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

間違えるとブログが表示されないなどの不具合が起こってしまうので慎重に。

  • 必ずバックアップを取ること
  • 自己責任で

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

作業環境について

あくまで私の・・作業環境です。ご参考までに。

  • OS:Windows7 Home Premium Service Pack1
  • サーバー:Xサーバー(X10)
  • WordPress4.9.8

対応ブラウザについて

MEMO

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

 

現時点(2018/9/19)で対応しているブラウザは

  • Google Chrome
  • Opera

など。

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

https://developers.google.com/speed/webp/faq#which_web_browsers_natively_support_webp

 

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

参考 Web用の新しい画像フォーマット「WebP」Google Developers

 

こちらのページの『Support〔サポート〕』も見てね」とWebPの公式サイトも言ってます。

参考 WebPWikipedia

 

こんなことが書いてあります。

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

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

 

MEMO

いずれも英語のページですが、

  1. 何も表示されていない箇所にマウスカーソルを置いて右クリック
  2. 「日本語に翻訳(T)」をクリック

すると日本語表示されます。

英語表記に戻したいときはブラウザのページを更新してください。

 

少し前置きが長くなりました。

ことり

この後、画像を一括で置き換える方法をご紹介しますね。

スポンサーリンク

ブログ上の画像をWebP画像に置き換えるには?

WebP形式の画像をWordPressのメディアフォルダに放り込もうとすると拒否されます。

「セキュリティ上の理由によりこのファイル形式は許可されていません。」

そうなんです。通常の方法ではアップロードできないのです。

ことり

そこで助けてくれるのがプラグイン「EWWW Image Optimizer」。

プラグイン「EWWW Image Optimizer」をインストールする

1

「EWWW Image Optimizer」をインストール&有効化。

 

※プラグインのインストール&有効化の方法については省略します。

 

 

 

このプラグインを入れると、「『Compress JPEG & PNG images』と干渉して不具合を起こすかもしれないよ」という警告が表示されます。

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

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

 

なので、「Compress JPEG & PNG images」を停止しておきましょう。

ことり

削除までしなくとも、停止のみでエラーメッセージは消えます。

 

WebP画像に置き換える前に

 

事前に表示スピードを計っておき、事後また計ってビフォーアフターを比べてみると面白そうですね。

参考 PageSpeed Insights

 

WordPressダッシュボードでの作業①

2

プラグインの設定を変更します。

  1.  ダッシュボード
  2.  プラグイン
  3. 「EWWW Image Optimizer」の「設定」をクリック

ブログの画像をWebPに置き換える方法|JPG・PNGを無料で一度に簡単に

3

「WebP」タブを開きます。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法◆無料で一度に簡単に

4

  1. 「JPG, PNG から WebP」にチェックを入れ
  2. 「変更を保存」をクリック

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

5

下にスクロールするとこのような文字列が表示されています。

「リライトルールを挿入する」を押したいところですが、押しません。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法◆無料で一度に簡単に

 

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

 

6

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

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法◆無料で一度に簡単に

 

エックスサーバーでの作業

7

  1.  サーバーパネルにログイン
  2.  対象ドメインを選択し
  3. 「設定」をクリック
  4. 「.htaccess編集」
  5. 「.htaccess編集」
  6.  ⑥でコピーした文字列を一番上に貼りつけ
  7.  保存して終了

 

WordPressダッシュボードでの作業②

8

  1.  ダッシュボード
  2.  メディア
  3. 「一括最適化」をクリック

ブログ高速化!JPG・PNGをWebP画像に置き換える方法◆無料で一度に簡単に

9

  1. 「再最適化を強制」にチェックを入れ
  2. 「最適化されていない画像をスキャンする」をクリック

ブログ高速化!JPG・PNGをWebP画像に置き換える方法◆無料で一度に簡単に

10

「最適化を開始」をクリック。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法◆無料で一度に簡単に

 

ねね

全ての画像がWebPファイルに書き換えられたよ。

置き換えが完了しているか確認しよう

11

確認したい画像のあるブログURLにアクセスします。

 

12

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

ブログ高速化!JPG・PNGをWebP画像に置き換える方法◆無料で一度に簡単に

13

ねね

おや?

ことり

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

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

 

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

 

先ほどまでの作業は失敗に終わったのでしょうか・・・?

 

14

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

右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法◆無料で一度に簡単に

 

ねね

保存されると「.webp」ファイルだってことがわかるね。

ことり

そうなの。

 

WordPressのメディアライブラリで見ると「.png」や「.jpg」のままですが、このとおり、ちゃんと変換されてます。ご心配なく。

 

 

画像をアップロードするたびにこの作業をしないとダメなの?

という疑問をお持ちになると思います。

答えは「ノー」。

アップロードすると自動的に「WebP」ファイルが生成されるようになってます。

ことり

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

確認してみよう

1

試しに画像をアップロードしてみます。

 

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

2

アップロード完了。

 

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

3

FTPソフトでサーバーにアクセスします。

  1. 対象ドメインのフォルダを開く
  2. 「public_html」フォルダを開く
  3. 「wp-content」フォルダを開く
  4. 「uploads」フォルダを開く
  5. 対象の年のフォルダを開く
  6. 対象の月のフォルダを開く

このように表示されているはず。

 

※「101×125」などの数値はメディア設定によって違います。

 

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

 

 

MEMO

WordPressのメディア設定で「アップロードしたファイルを年月ベースのフォルダに整理」のチェックを外している場合は④までの手順で確認できます。

 

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

 

 

スポンサーリンク

PNG・JPG・WebPのサイズと画質を比較してみる

サイズ比較

スマホで撮影したPNG画像(4.7MB)を使用しています。

フォーマットサイズWebP
PNG4.7MB245KB
(94.8%減)
JPG1.26MB244KB
(80.6%減)

ファイルサイズは効果の高いもので約10分の1。約95%もの圧縮に成功しました。

公式サイトで発表されている26%を大きく上回る結果です。

気になる画質の差は?

ことり

ご自身の目で確かめてみてくださいな。

参考 PNG画像(4.7MB) 参考 JPG画像(1.26MB) 参考 WebP画像(245KB)

※WebP画像は、ご紹介した方法でPNG画像を変換したものです。

 

この後に出てくる無料アプリのお話はおまけ・・・ぐらいの気持ちで読んでおいてくださったら。

本家「ICSメディア」ではちょっとわかりづらかった部分も、画像入りでわかりやすく解説してます。

ただ、せっかく無償でアプリが提供されていても、WordPressが「.webp」画像を受け付けてくれない以上、現時点(2018/9/19)では使えません・・・。

ねね

ゆくゆく対応ソフトが増えたときには役に立つね。

ことり

今後に期待。

では、ここでいったん関連記事を置いて締めますね。

関連記事

ことり

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

右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】 画像から色を取り出してカラーコードやRGB値を調べる方法【 for Windows】画像から色を取り出してカラーコードやRGB値を調べる方法【for Windows】

JPG・PNGをWebP画像に変換する無料アプリ

池田泰延さん(@clockmaker)がツールを無償で提供してくださっています。

参考 WebP画像を作成できるアプリ「WebP画像を作る君」を公開ICS MEDIA

このアプリ(ソフト)はPCにインストールして使います。

こちらに詳細が載っていますが、混乱するので見なくてヨイです。英語だし。

参考 WebP画像を作る君 ― WebP ConverterGitHub
ことり

ひねりのないアプリ名がいいですね。笑

ねね

そだね。「コンバーター」とか言われてもよくわかんないもんね。

「WebP画像を作る君」のDL&インストール

1

池田泰延さんのサイト「ICSメディア」にアクセスします。

参考 WebP画像を作成できるアプリ「WebP画像を作る君」を公開ICS MEDIA

2

「Windows版」をクリック。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

3

「WebP-Converter-win32-x64.zip」という名前のファイルをダウンロードします。

  1.  新しいウインドウが開くので
  2.  保存先を指定して
  3. 「保存(S)」をクリック

保存先はどこでも構いません。インストール後は不要になるので、迷子にならないようデスクトップに置いておくのがいいかな。

 

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

4

「WebP-Converter-win32-x64.zip」は圧縮ファイルです。

ダブルクリックすると、解凍が始まります。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

5

「WebP-Converter-win32-x64」という名前のフォルダが作成されます。

これで「WebP画像を作る君」のDL&インストールは完了です。

 

 

ショートカットを作っておくと便利

次に使うとき

ねね

どれをクリックするんだったっけ?

とならないよう、ショートカットを作っておきましょう。

6

【その① タスクバーに表示する】

  1.  右クリック
  2. 「タスクバーに表示する(K)」をクリック

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

すると、デスクトップの最下部の帯にこんなこじゃれた・・・・・アイコンが表示されます。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

7

【その② スタートメニューに表示する】

  1.  右クリック
  2. 「スタートメニューに表示する(U)」をクリック

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

デスクトップ左下端の「Microsoftマーク」をクリックしたときに表示される「スタートメニュー」にアイコンが表示されます。

名前が「Electron」となっていますが、同じものです。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

「WebP画像を作る君」を使ってみよう

「WebP画像を作る君」を立ち上げる

1

「WebP-Converter.exe」あるいは先ほど作成したショートカットアイコンをクリックします。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

2

「WebP画像を作る君」が起動します。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

おや・・・?

ねね

「WebP画像を作る君」じゃなくて「WebP画像に変換する君」だね。笑

ことり

そうみたいだね。笑

 

「WebP画像に変換する君」を使ってみる

3

「読み込む」をクリック。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

4

画像の置いてあるフォルダを開きます。

  1.  画像を選択して
  2. 「開く(O)」をクリック

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

4

読み込まれました。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

「劣化していない画像を使う」ようにとの記述があるので、4.07MBの美しいPNG写真を使ってみることにします。

 

5

「変換する」をクリック。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

6

このようなウィンドウが表示されます。

 

「80」と表示されているのは画質です。そのままでOK。「60~80%」が池田泰延さんおすすめの設定です。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

7

「保存する」をクリック。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

8

先ほどと同じフォルダが表示されます。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

ファイル名も、拡張子(.png/.webp)を除いて同じ表示になっていますね。

保存先を変更する必要がなければ「保存(S)」をクリックします。

 

9

「保存しました。」と表示されたら「OK」をクリックして終了します。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

10

「✕」をクリックして「WebP画像に変換する君」を閉じます。

 

ブログ高速化!JPG・PNGをWebP画像に置き換える方法|半自動で一度に簡単に

 

 

これで「PNG画像をWebP画像に変換する作業」は終わりです。

ねね

JPG画像も同じ手順だよ。

おわりに

画質を落とさずにサイズを小さく。サクサク快適なページ表示を実現させてくれる夢の画像フォーマット「WebP〔ウェッピー〕」。

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

ねね

ぜひトライしてね。

関連記事

ことり

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

右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】右クリック禁止の画像をダウンロード保存する方法4つ【悪用厳禁】 画像から色を取り出してカラーコードやRGB値を調べる方法【 for Windows】画像から色を取り出してカラーコードやRGB値を調べる方法【for Windows】

コメントを残す

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

CAPTCHA