- ブログの表示スピードが速くなるなら、ぜひ使いたい。
- WebP画像ってどうやって作るの？
- そもそも「WebP」って何？
もくじ
WebP（ウェッピー）とは
WebP（ウェッピー）は Google が開発した画像フォーマット。非常に高い圧縮率をほこります。
サイズ（見た目の大きさ）も画質もほとんど同じなのに、とても軽いのです。
参考WebPとは何ですか？ なぜそれを使用する必要があるのですか？
ということは･･･
ねね
ことり
ブログの表示速度の改善にも役立つに違いありません。
プラグインを使って簡単に、しかも大量の画像を一気に WebP に置き換えてしまいましょう。
初めに読んでおいてほしいこと
この方法は「.htaccess」というファイルに文字列を追記します。
- 必ずバックアップを取ること
- あくまでも自己責任で
- 閲覧されている時点で通じる方法かどうかは保証できません
以上についてご理解いただいた上で実施してくださいね。
大まかな流れ
- プラグイン EWWW Image Optimizer の導入＆設定
- .htaccess の編集
- 画像の最適化
ことり
とってもカンタンです。
スポンサーリンク
JPG･PNGをWebP画像に置き換える手順
WordPressダッシュボードでの作業【その１】
- 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」などの画像圧縮系プラグインを有効化している場合は停止しておきましょう。
- STEP
EWWW Image Optimizer の「設定」を開く
- STEP
「WebP」タブを開く
- STEP
「JPG, PNG から WebP」にチェックを入れる
- STEP
「変更を保存」をクリック
- STEP
「リライトルールを挿入する」は押さない
「.htaccess」の最後尾に追記されるせいか、うまく行かないことがあるからです。
- STEP
枠の中身をまるっとコピーする
.htaccess の編集
- STEP
サーバーにログインする
- STEP
対象ドメインを選択する
- STEP
「.htaccess」ファイルを開く
- STEP
先ほどコピーした文字列を「.htaccess」ファイルの一番上に貼り付ける
- STEP
保存する
- STEP
FTPソフトでサーバーにアクセスする
- STEP
対象ドメインのフォルダを開く
- STEP
「.htaccess」ファイルをダウンロードする
- STEP
ダウンロードした「.htaccess」ファイルの一番上に先ほどコピーした文字列を貼り付ける
- STEP
「.htaccess」ファイルをアップロード＆上書き保存する
WordPressダッシュボードでの作業【その２】
･･･の前に。
- STEP
ダッシュボード ＞ メディア ＞ 一括最適化をクリックして開く
- STEP
「再最適化を強制」にチェックを入れる
- STEP
「最適化されていない画像をスキャンする」をクリックする
- STEP
「〇点の画像を最適化」をクリックする
- STEP
最適化が始まる
ことり
ここまででおしまい。
スポンサーリンク
確認してみよう
- STEP
確認したい画像のある記事URLにアクセス
- STEP
新しいタブで画像を開く
- 画像の上にマウスカーソルを移動
- 右クリック
- 「新しいタブで画像を開く(I)」をクリック
- STEP
気づいてしまう
おや？
ねね
ことり
気づいてしまったようだね･･･。
試しに開いた画像の URL が「.png」で終わっています。
さっきまでの作業は失敗に終わったの？
ねね
ことり
確認しよう。
- 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 |
| PNG | 4.7 MB | 245 KB （94.8％減） |
| JPG | 1.26 MB | 244 KB （80.6％減） |
ことり
圧縮率の高さは想像以上でした。
画質を落とさず画像の容量を抑え、サクサク快適なページ表示を実現する夢のような次世代画像フォーマットWebP（ウェッピー）。
WordPress上の画像を「.webp」形式に変換する簡単で便利な方法をお届けしました。
ぜひトライしてね。
ねね
関連記事
ことり
ウェブ上の画像を利用する場合は▼こちらの記事を参考にしてくださいね。
