2ヶ月前に投稿

WordPress 5.8は本当にWebP サポートを追加したの?

この記事は約 9 分で読めます。

4.5

2021年7月20日にWordPress 5.8 への
バージョンアップがありました。

WebP サポートの追加を正式に発表。

WebP サポートの追加
WebP は、ウェブ上の画像の可逆圧縮と非可逆圧縮を改善した最新の画像フォーマットです。WebP の画像は、JPEG や PNG に比べて平均で約30%も小さくなるため、サイトの高速化や帯域幅の削減につながります。

WordPress 5.8 Tatum | WordPress.org 日本語

JPEGやPNGと同じように、
WordPressのメディアライブラリに
WebPをアップロードして
使用できるんだよね♪と思ったのですが・・・。

WebPとは

WebPは、米Googleが開発しているオープンな静止画像フォーマット。ファイルの拡張子は「webp」。Googleの示した事例では、ファイルサイズは非可逆圧縮モードで(同一画像、同等画質の)JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。

WebP – Wikipedia

WebPをアップロードできない!?

ダメじゃん!
メディアライブラリに
WebPをアップロードできません。

サーバーの負荷が高いか十分なリソースがないため画像の後処理に失敗しました。もっと小さな画像をアップロードしてみてください。推奨する最大サイズは2500ピクセルです。

「サーバーの負荷が高いか十分なリソースが・・・」と
表示された場合の解決方法として以下が挙げられますが、

  • WordPressに再ログインする
  • イメージのサイズを確認する
  • ブラウザやPCを再起動してみる
  • PHPの設定を変更する

上画像を確認頂きたいのですが、
最大アップロードサイズは10 MB」です。
アップロードしたい画像「image.webp」の
変換前の画像 (JPEG)は
1024×681 466.1 KB、
変換後の画像 (WEBP)は59.8 KBだから
アップロードしたい画像の数値は
決して高い数値ではありません。

再ログインやブラウザやPCを再起動も
試しましたが変化なしです。

PHPiniファイルの設定

PHPの設定を変更してみました。

memory_limit = 128M
post_max_size = 120M
upload_max_filesize = 100M

最大メモリ数 (デフォルト)、
POSTデータで許容する最大サイズ、
アップロードファイルサイズの上限をUPしました。

画像処理ライブラリは?

WordPressでは、
アップロードされた画像のリサイズやトリミングのために
画像処理ライブラリを必要とするらしいのですが、
GDImageMagick とよばれるもののようです。

GD

GD グラフィック ライブラリ (GD Graphics Library) は、
イメージを動的に操作するライブラリです。
GDはPHPで広く使われ、PHP 4.3 以降のバージョンでは
デフォルトの拡張機能
となっています。

GDライブラリとは何ですか?
GD は、プログラマによるイメージの動的な作成のためのオープン ソース コード ライブラリです。GDはCで書かれ、Perl、PHP、その他の言語では「ラッパー」が利用できます。GD は、PNG、JPEG、GIF、WebP、XPM、BMP 画像などを作成します。GD は、チャート、グラフィックス、サムネイル、その他ほとんどをその場で生成するために一般的に使用されます。ウェブ上での使用に限定されるわけではありませんが、GDの最も一般的なアプリケーションはウェブサイトの開発を伴います。

About (libgd.github.io)

ImageMagick

ImageMagickは、
imagickを導入することで利用できます。
「imagick」は、
ImageMagickを使用する為の拡張モジュールだそう。

ImageMagick (イメージマジック) は画像を操作したり表示したりするためのソフトウェアスイートである。GIF、JPEG、JPEG 2000、PNG、PDF、Photo CD、TIFF、DPXなど100種類以上の画像ファイルフォーマットに対応している。

ImageMagick – Wikipedia

WordPressで使われているのはどっち?

※ WordPress 4.8.3 時点の情報になります
Imagickが利用できるサーバーの場合はImagick、そうでない場合はGDが使用されるようです。どちらも入っていない場合はサムネイルの生成などが行われません。

WordPressで使われている画像処理ライブラリについて調べてみた – bitA Tech Blog

「imagick」を有効化してみる

WordPressに必要なPHPモジュール「imagick」が、
このサーバーでは、デフォルトで有効化されていません。

extension = imagick.so

結局変化なし

弊ブログのWordPressでは、
グラフィック ライブラリは
デフォルトの
「GD」が利用されているようですが、
「imagick」を有効にしても
変化は起きません
でした。

WordPress プラグイン

WebPのプラグインで検索すると、
EWWW Image Optimizer」、
WebP Express」が人気のようです。
どちらも.htaccessファイルの編集や
ブログ内全ての画像をWebPへの変換
が必要だったりします。

わたしとしては、
全ての画像をWebPにしたい訳ではなく、
必要ならWebP、あとはJPEGと使い分けたい
ので、
上記のプラグインは導入しません。

Plus WebP

Plus WebPは、
アップロードしたJPEGやPNGなどの画像から、
WebP画像を自動生成してくれるWordPressプラグインです。

とてもシンプルですね。
以下が概要になります。

overview
  • メディアライブラリに画像ファイルを追加する際に WebP ファイルを生成します。
  • ajax で全ての画像から WebP を生成します。
  • バックグラウンドですべての画像から WebP を生成します。
  • オプションで、新しいメディアを追加するときに画像ファイルを WebP に置き換え、元の画像ファイルを削除できます。 また、すべての画像を生成する場合、元の画像ファイル ID は WebP として上書きされ、元の画像ファイルは削除されます。 コンテンツ内のすべての URL も置き換えられます。

WebP 対応の GD モジュールや、cwebp コマンドなどは、必要ありません。

苦労して導入した拡張機能の
imagickモジュールは
必要無いようです。

設定

画質WebP画像の画質を指定、
解像度が高いほどファイルサイズは大きくなるようです。
タイプWebP画像を生成する画像タイプを指定、
「image/gif」のチェックを外しておきます。
アニメーションGIFをWebP化すると動かなくなるからです。
元のファイル名に
webp 拡張子を追加
このチェックをつけない場合「test.jpg」は「test.webp」に変換されますが、
混乱を防ぐ意味でもチェックした方がよいようです。
このチェックをつける事で「test.jpg」は「test.jpg.webp」に変換されます。

後は画像をWordPressに追加するだけで、
勝手にWebPファイルを生成してくれます。

アップロードしてみた

メディアライブラリ画面を見ると、
同じ画像が2枚表示されます。
メディアライブラリで画像を
アップロードした際にWebP画像が生成され、
同じ画像が2枚並んでいるように見えます。

JPGE画像のファイルサイズ 527 KBに対して、
WebP画像のファイルサイズ: 65 KB!

これまでのJPEGよりも静止画像データを、
さらに平均40%以下に圧縮処理することが
できるようですが、実際に画像は
1/8のサイズまで減っています。

uploads フォルダを見てみると、
JPEGとWebP画像合わせて24枚生成されました!

JPEG 12枚、WebP 12枚
計24枚の画像が自動生成されます。

WordPressは画像をアップロードすると、
複数の画像サイズが自動生成されるようになっているようです。
デフォルトでは、WordPressの「メディア設定」で指定している
サムネイル・中サイズ・大サイズの3つのサイズが作られ保存されるので、
元サイズの他に3枚の画像が自動生成されることになります。

ここで4枚生成されますね。

さらに、使っているテーマにより、
別のサイズの画像も自動生成される場合があります。

残りの8枚はテーマに依存しているのかな?

メディア設定では
自動生成しない設定にできるようですが、
このようなトピックを見つけました。
このブログのテーマとは違いますが、

1つの画像をアップすると生成される全てのサムネイルを合わせても、せいぜい200KBです。
Simplicityのサムネイルが生成するものだけだと70KB。
Simplicityが生成するサムネイルが1GBを使用するには、15000記事を書かないといけない計算になります。Wordpressが生成するサムネイルを合わせても5200記事書かないと1GB使用しないのではないかと思います。
(画像によって多少の差はあります)

サムネイル画像について (wp-simplicity.com)

そんなに心配する事ではなさそうですが、
それにしても枚数が多いな!

一括生成

元々ある画像のWebPへの一括変換機能です。
一括生成をバックグラウンドで実行できます。
処理が終わるとメールが配信されるようです。

以下のオプションを適応すると、
元の画像ファイル ID は WebP として上書きされ、
元の画像ファイルを削除します。
コンテンツ内のすべてのURLも置換できます。

オプション

全ての画像がWebPに置き換えられ、
元の画像ファイルを削除するようです。

webp非対応ブラウザでは
画像が表示されなくなります。

(WebPと従来の画像を振り分ける
従来の画像が削除されるため)
振り分けも行う事が出来なくなります。

このオプションは、ほぼ全てのブラウザが WebP に対応して以降に使用すべきです。

ほぼ全てのブラウザがWebPに
対応する日もそう遠くないかと思います。
そしたら「適用」にチェックを入れます。

最後に

WordPress 5.8は、
本当にWebPサポートを追加したの?

おかげで
色々と勉強になりました。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

WordPress 5.8は本当にWebP サポートを追加したの?